自定义ProgressBar(自定义View和ClipDrawable)

2017-11-15 11:33:03来源:segmentfault作者:why_rookie人点击

分享

开发中经常需要自定义ProgressBar,这里用了自定义View和ClipDrawable实现简单的ProgressBar
自定义View效果:

public class CustomProgressBar extends View {private Paint mBgtPaint;//底部背景画笔
private Paint mProgressPaint;//progress画笔
private int startX;//起始X坐标,保持不变
private int endX;//终点坐标,保持不变
private int currentX;//当前坐标,progress换算而来,不断增大private int mProgressBgHeight = 60;
private int mProgressHeight = 50;
private int mProgressBgColor = Color.BLACK;
private int mProgressColor = Color.BLUE;public CustomProgressBar(Context context){
this(context, null);
}public CustomProgressBar(Context context, @Nullable AttributeSet attrs){
this(context, attrs, 0);}public CustomProgressBar(Context context,@Nullable AttributeSet attrs, int defStyleAttr){
super(context, attrs, defStyleAttr);TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.myProgressBar, defStyleAttr, 0);mProgressBgHeight = a.getInteger(R.styleable.myProgressBar_progress_background_height, mProgressBgHeight);
mProgressHeight = a.getInteger(R.styleable.myProgressBar_progress_height,mProgressHeight);mProgressBgColor = a.getColor(R.styleable.myProgressBar_progress_background_color,mProgressBgColor);
mProgressColor = a.getColor(R.styleable.myProgressBar_progress_color, mProgressColor);a.recycle();init();
}
private void init() {//初始化画笔
mBgtPaint = new Paint();
mBgtPaint.setAntiAlias(true);//抗锯齿
mBgtPaint.setStyle(Paint.Style.STROKE);
//注意:这是笔尖样式的属性,Paint.Cap.ROUND设置笔尖为圆形,默认方形,
mBgtPaint.setStrokeCap(Paint.Cap.ROUND);
mBgtPaint.setColor(mProgressBgColor);
//mBgtPaint.setColor(Color.parseColor("#1F1F26"));//设置画笔颜色,这里是深灰色
mBgtPaint.setStrokeWidth(60);mProgressPaint = new Paint();
mProgressPaint.setAntiAlias(true);
mProgressPaint.setStyle(Paint.Style.STROKE);
mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
mProgressPaint.setColor(mProgressColor);
//mProgressPaint.setColor(Color.parseColor("#54FC00"));
mProgressPaint.setStrokeWidth(50);//这里的线条宽度比背景线条窄一些。}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);//这里根据屏幕的宽高获取坐标,可以设置成自定义属性,让用户设置
startX = getWidth()/2-getWidth()/3;
endX = getWidth()/2 + getWidth()/3;
currentX = startX;
}@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);//绘制底部背景线条(深灰色,区别于View背景色)
canvas.drawLine(startX, getHeight() / 2, endX,
getHeight() / 2, mBgtPaint);//绘制当前的progress
canvas.drawLine(startX+1, getHeight() / 2, currentX,
getHeight() / 2, mProgressPaint);}//更新进度
public void updateProgress(int progress) {//这里progress的长度分成100个单位,再计算坐标,其实progress可以是实时的下载进度,
//计算下载量百分比,然后再计算坐标,会相对精确
if (progress <= 100){
currentX = startX + (int)((progress * 1.0)/100 * (endX - startX));
invalidate();//重新绘制才能生效
}
}
}

使用到了自定义的属性,可以在values/下添加attrs.xml(文件可以为其他名字),res/values/attrs.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="myProgressBar"><attr name="progress_background_color" format="color"/>
<attr name="progress_background_height" format="integer"/>
<attr name="progress_color" format="color"/>
<attr name="progress_height" format="integer"/>
</declare-styleable>
</resources>

代码中使用:


public class CustomActivity extends AppCompatActivity {
private CustomProgressBar mCustomProgressBar;private int mProgress=0;private Handler mHandler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom);mCustomProgressBar = (CustomProgressBar)findViewById(R.id.progress_bar_custom);mHandler.postDelayed(new Runnable() {
@Override
public void run() {mCustomProgressBar.updateProgress(++mProgress);
if (mProgress < 100) {
mHandler.postDelayed(this, 500);
}
}
}, 500);}
}

这样大部分的自定义的ProgressBar都可以画出来,有些可能需要添加动画。如果有些ProgressBar本身的样式
太过复杂,使用自定义view画出来有较大的难度,那么还有更简单的方法,让ui切出ProgressBar完整的图片,然后使用ClipDrawable根据
进度的更新不断地显示,使用起来其实挺简单的,效果图:



先定义一个clipDrawable


<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="horizontal"
android:drawable="@drawable/gakki_alone"
android:gravity="left"/>

第一个属性:裁剪方向,这里是水平方向。第二个参数:图片,第三个参数:开始裁剪的位置,这里是从左开始


xml布局中使用,和普通的drawable使用方法一样


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.why.traing2.ClipDrawableActivity"><ImageView
android:id="@+id/img_clip"
android:layout_width="300dp"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:background="@color/colorAccent"
android:src="@drawable/clip"
android:layout_centerInParent="true"/></FrameLayout>

最后是代码中的的引用


public class ClipDrawableActivity extends AppCompatActivity {private Handler mHandler = new Handler();
private int mLevel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_clip_drawable);ImageView imageView = (ImageView)findViewById(R.id.img_clip);final ClipDrawable clipDrawable = (ClipDrawable)imageView.getDrawable();//level取值:0-10000, 0:不可见,10000:完全显示
mLevel = clipDrawable.getLevel();mHandler.postDelayed(new Runnable() {
@Override
public void run() {
clipDrawable.setLevel(mLevel);
mLevel += 100;if (mLevel <= 10000) {
mHandler.postDelayed(this, 500);
}
}
}, 500);}
}

这样复杂的ProgressBar, 可以直接使用图片按比例显示读取进度,节省代码量.

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台