自定义控件之-----progressBar
写了那一年多代码都没有认认真真写过自定义控件,最近看到网易新闻里面的加载图标如图
感觉很有意思,就准备自己写个玩玩。在api里面脑补了一些canvas的姿势,就上了,效果如下。
说实话真心不难,自定义控件比起平时做的应用多了几分自由和创作的快感,可能我应该去做游戏,代码如下,注释已经写的很白痴了:
package com.example.circleprogressbar; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.util.AttributeSet; import android.view.View; public class CircleProgressBarView extends View { private int progress; private int max; private Paint paint; private RectF oval; public int getMax() { return max; } public void setMax(int max) { this.max = max; } public int getProgress() { return progress; } public void setProgress(int progress) { this.progress = progress; invalidate(); } public CircleProgressBarView(Context context, AttributeSet attrs) { super(context, attrs); paint = new Paint(); oval = new RectF(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); paint.setAntiAlias(true);// 设置是否抗锯齿 paint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿 paint.setColor(Color.GRAY);// 设置画笔灰色 paint.setStrokeWidth(10);// 设置画笔宽度 paint.setStyle(Paint.Style.STROKE);// 设置中空的样式 canvas.drawCircle(100, 100, 55, paint);// 在中心为(100,100)的地方画个半径为55的圆,宽度为setStrokeWidth:10,也就是灰色的底边 paint.setColor(Color.GREEN);// 设置画笔为绿色 oval.set(45, 45, 155, 155);// 设置类似于左上角坐标(45,45),右下角坐标(155,155),这样也就保证了半径为55 canvas.drawArc(oval, -90, ((float) progress / max) * 360, false, paint);// 画圆弧,第二个参数为:起始角度,第三个为跨的角度,第四个为true的时候是实心,false的时候为空心 paint.reset();// 将画笔重置 paint.setStrokeWidth(3);// 再次设置画笔的宽度 paint.setTextSize(35);// 设置文字的大小 paint.setColor(Color.BLACK);// 设置画笔颜色 if (progress == max) { canvas.drawText("完成", 70, 110, paint); } else { canvas.drawText(progress + "%", 70, 110, paint); } } }
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".CirclePbActivity" > <com.example.circleprogressbar.CircleProgressBarView android:id="@+id/circleProgressBar" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
package com.example.circleprogressbar; import android.os.Bundle; import android.os.Handler; import android.app.Activity; import android.view.Menu; public class CirclePbActivity extends Activity { private CircleProgressBarView testConvas; private int i = 0; Handler handler = new Handler() { public void handleMessage(android.os.Message msg) { testConvas.setProgress(msg.what); if (i <= testConvas.getMax()) { handler.sendEmptyMessageDelayed(i++, 50); } }; }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_circle_progressbar); testConvas = (CircleProgressBarView) findViewById(R.id.circleProgressBar); testConvas.setMax(100); handler.sendEmptyMessageDelayed(i++, 50); } }
做了圆形的,一不做二不休,把horizontalProgressBar也做了一遍,加了一点创意要素,立马多了几分艺术气息(其实好像更俗气了),各位可以自己发挥想象力。
package com.example.circleprogressbar; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; @SuppressLint("DrawAllocation") public class HorizontalProgressBarView extends View { private int progress = 50; private int max = 100; private int mwidth = 450; private int mhight = 40; private int startX; private int startY; private Paint paint; public int getMwidth() { return mwidth; } public void setMwidth(int mwidth) { this.mwidth = mwidth; } public int getMhight() { return mhight; } public void setMhight(int mhight) { this.mhight = mhight; } public int getProgress() { return progress; } public void setProgress(int progress) { this.progress = progress; invalidate(); } public int getMax() { return max; } public void setMax(int max) { this.max = max; } public HorizontalProgressBarView(Context context, AttributeSet attrs) { super(context, attrs); paint = new Paint(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); paint.setAntiAlias(true);// 设置是否抗锯齿 paint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿 paint.setColor(Color.parseColor("#EFEFEF"));// 设置画笔灰色 paint.setStrokeWidth(10);// 设置画笔宽度 canvas.drawRect(startX, startY, mwidth, mhight, paint); paint.setColor(Color.parseColor("#76B034")); canvas.drawRect(startX, startY, ((float) progress / max) * mwidth, mhight, paint); // 绘制内部线条 paint.setStrokeWidth(2); paint.setColor(Color.YELLOW); canvas.drawLine(startX, startY + (mhight - startY) / 4 * 1, ((float) progress / max) * mwidth, startY + (mhight - startY) / 4 * 1, paint); paint.setColor(Color.RED); canvas.drawLine(startX, startY + (mhight - startY) / 4 * 2, ((float) progress / max) * mwidth, startY + (mhight - startY) / 4 * 2, paint); paint.setColor(Color.WHITE); canvas.drawLine(startX, startY + (mhight - startY) / 4 * 3, ((float) progress / max) * mwidth, startY + (mhight - startY) / 4 * 3, paint); // 绘制下标进度数字 if(progress<(max/3)){ paint.setColor(Color.BLACK); }else if(progress<(max/3)*2&&progress>(max/3)){ paint.setColor(Color.YELLOW); }else{ paint.setColor(Color.RED); } paint.setTextSize(30); canvas.drawText(progress + "%", ((float) progress / max) * mwidth - 20, mhight + 30, paint); } }
最后谈一下感想:
总感觉学的越多,自己的想象力和创新能力越枯竭,代码敲多了,脑袋敲不灵活了,以前没接触程序的时候有很多的想法,现在感觉自己越来越平庸,没了那份想象力,和搬砖的有什么区别?天朝的教育让能很快学会人家的技术,但是永远跟着别人后面,就看各大布局,各种控件,基本上都是学国外的。哎,不吐槽了,已经这样了,我希望能保存自己仅有的那份想象力,在敲代码的时候多想想自己能创造什么,一次从无到有,比重复千万次人家的都有价值,我是这么认为的。