Android自定义View之三种流行进度条的写法
2015-09-16 21:05
821 查看
概述:
利用自定义View的onDraw()方法,可以绘制很多种图形,进度框只是其中之一。Demo
这是一个模拟下载的demo。自中央逐渐充满型圆形进度框
demo1
public class FirstProgressView extends View{ private int width; private int height; private int progress; private int maxProgress = 100; private Paint mPaintBackGround; private Paint mPaintCurrent; private Paint mPaintText; public void setWidth(int width) { this.width = width; } public void setHeight(int height) { this.height = height; } public int getProgress() { return progress; } public void setProgress(int progress) { this.progress = progress; invalidate(); } public int getMaxProgress() { return maxProgress; } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } public FirstProgressView(Context context) { super(context); } public FirstProgressView(Context context, AttributeSet attrs) { super(context, attrs); mPaintBackGround = new Paint();//新定义一个画笔,用来画背景 mPaintBackGround.setColor(Color.GRAY);//设置画笔颜色 mPaintBackGround.setAntiAlias(true);//设置为true,代表抗锯齿 mPaintCurrent = new Paint();//用于画进度图 mPaintCurrent.setColor(Color.GREEN); mPaintCurrent.setAntiAlias(true); mPaintText = new Paint();//用来画文本的画笔 mPaintText.setColor(Color.BLACK); mPaintText.setAntiAlias(true); mPaintText.setTextAlign(Paint.Align.CENTER);//设置文本排布方式:正中央 mPaintText.setTextSize(50);//设置文本大小,这里为50xp } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //左起:圆心x坐标,圆心y坐标,半径,Paint对象(画笔) canvas.drawCircle(width / 2, height / 2, 400, mPaintBackGround); canvas.drawCircle(width/2,height/2,progress*400f/maxProgress,mPaintCurrent); //左起:文本内容,起始位置x坐标,起始位置y坐标,画笔 canvas.drawText(progress*100f/maxProgress+"%",width / 2, height / 2,mPaintText); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //该View布局宽 width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec); //该View布局高 height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec); //设定本View的大小的方法 setMeasuredDimension(width, height); } }
水箱型注水式进度框
demo2
public class SecondProgressView extends View { private int width; private int height; private int progress; private int maxProgress = 100; private Paint mPaintBackGround; private Paint mPaintCurrent; private Paint mPaintText; public void setWidth(int width) { this.width = width; } public void setHeight(int height) { this.height = height; } public int getProgress() { return progress; } public void setProgress(int progress) { this.progress = progress; invalidate(); } public int getMaxProgress() { return maxProgress; } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } public SecondProgressView(Context context) { super(context); } public SecondProgressView(Context context, AttributeSet attrs) { super(context, attrs); mPaintBackGround = new Paint(); mPaintBackGround.setColor(Color.GRAY); mPaintBackGround.setStyle(Paint.Style.STROKE); mPaintBackGround.setStrokeWidth(20); mPaintBackGround.setAntiAlias(true); mPaintCurrent = new Paint(); mPaintCurrent.setColor(Color.BLUE); mPaintCurrent.setAntiAlias(true); mPaintText = new Paint(); mPaintText.setColor(Color.BLACK); mPaintText.setAntiAlias(true); mPaintText.setTextAlign(Paint.Align.CENTER); mPaintText.setTextSize(50); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawRect(width / 2 - 200, height / 2 - 200, width / 2 + 200, height / 2 + 200, mPaintBackGround); canvas.drawRect(width/2-190,height/2-190+(380-progress*380f/maxProgress),width/2+190,height/2+190,mPaintCurrent); canvas.drawText(progress*100f/maxProgress+"%",width / 2, height / 2,mPaintText); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec); height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec); setMeasuredDimension(width, height); } }
圆圈式弧形进度框:
demo3:
public class ThirdProgressView extends View { private int width; private int height; private int progress; private int maxProgress = 100; private Paint mPaintBackGround; private Paint mPaintCurrent; private Paint mPaintText; public void setWidth(int width) { this.width = width; } public void setHeight(int height) { this.height = height; } public int getProgress() { return progress; } public void setProgress(int progress) { this.progress = progress; invalidate(); } public int getMaxProgress() { return maxProgress; } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } public ThirdProgressView(Context context) { super(context); } public ThirdProgressView(Context context, AttributeSet attrs) { super(context, attrs); mPaintBackGround = new Paint(); mPaintBackGround.setColor(Color.GRAY); mPaintBackGround.setStrokeWidth(60); mPaintBackGround.setStyle(Paint.Style.STROKE); mPaintBackGround.setAntiAlias(true); mPaintCurrent = new Paint(); mPaintCurrent.setColor(Color.GREEN); mPaintCurrent.setStrokeWidth(60); mPaintCurrent.setStyle(Paint.Style.STROKE); mPaintCurrent.setAntiAlias(true); mPaintText = new Paint(); mPaintText.setColor(Color.BLACK); mPaintText.setAntiAlias(true); mPaintText.setTextAlign(Paint.Align.CENTER); mPaintText.setTextSize(50); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawCircle(width / 2, height / 2, 400, mPaintBackGround); RectF oval = new RectF(width/2-400,height/2-400,width/2+400,height/2+400); //左起分别是RectF对象,起始角度,终止角度,是否显示扇边(如果为true画出的是一个扇形),Paint对象 canvas.drawArc(oval,0,progress*360f/maxProgress,false,mPaintCurrent); canvas.drawText(progress*100f/maxProgress+"%",width / 2, height / 2,mPaintText); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec); height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec); setMeasuredDimension(width, height); } }
需要在布局文件中加载自定义View,这里随便加载一个作示范(自定义View都这么加载):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:id="@+id/button_start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Start Download"/> <com.example.administrator.selfdefinedview.widget.ThirdProgressView android:id="@+id/progress_view_first" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
主活动的中自定义View也需要声明和findViewById,这里写的是一个模拟下载的小demo,加载的是第三种自定义View,其他的自定义View加载方式完全一样。
public class MainActivity extends Activity { private int progress; private Button mButtonStart; private ThirdProgressView mProgressView; private static final int DOWNLOAD_UPDATE = 0x99; //模拟下载 private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); //处理msg switch (msg.what) { case DOWNLOAD_UPDATE: progress++; if (progress <= 100) { mProgressView.setProgress(progress); sendEmptyMessageDelayed(DOWNLOAD_UPDATE, 100);//每隔100毫秒发送一次handler } break; } } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mButtonStart = (Button) findViewById(R.id.button_start); mProgressView = (ThirdProgressView) findViewById(R.id.progress_view_first); mButtonStart.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //向handler发送一个延时空消息,1000毫秒后发送 mHandler.sendEmptyMessageDelayed(DOWNLOAD_UPDATE, 1000); } }); } }
相关文章推荐
- android 视频流的格式转换(YUV-RGB)
- Android 6.0 权限模型——Permissions
- Intent数据传递
- android学习:Activity简单操作---打开、关闭一个新的Activity
- Android0916<二十>(自定义的View,Converse的简单绘图)
- Android 二维码扫描 YUV字节数组转换成bitmap
- 0916Android基础自定义View(Canvas绘图)
- Android学习笔记之——GridView
- Android学习笔记之——Spinner
- Android开发之Intent.Action
- Android中自制各种进度条的实现
- Android 无法获取正在运行的程序
- Android之自定义View以及画一个时钟
- Android屏幕适配及DisplayMetrics解析
- android学习:android Activity生命周期的七个方法测试
- 初识Android
- Android多媒体之调用摄像头和从本地相册中选择图片
- Android 自定义View——自定义View控件
- Android 4.4 kitkat以上及以下根据uri获取路径的方法
- Android启动服务播放音乐(两种启动方式)