最近在学自定义View,然后联想到经常看到的圆环刷新效果,感觉可以用自定义View实现,于是便写了一个。
废话不说,先上效果
ps:博主没找到合适的录制gif的软件,有朋友知道可以留个言
刷新时效果就是一个个进度块颜色依次刷新
直接上代码了,注释写得很清楚,应该很容易看懂
xml布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ustb.shinerio.myview.MainActivity">
<com.ustb.shinerio.myview.RefreshBar
android:id="@+id/circleRef"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
custom:stepNum="12"
/>
<Button
android:layout_below="@+id/circleRef"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开始刷新"
android:textColor="@android:color/black"
android:onClick="startRef"
/>
</RelativeLayout>
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="basicColor" format="color"/>
<attr name="refreshColor" format="color"/>
<attr name="radius" format="dimension"/>
<attr name="speed" format="integer"/>
<attr name="stepNum" format="integer"/>
<declare-styleable name="refreshBar">
<attr name="stepNum"/>
<attr name="radius"/>
<attr name="speed"/>
<attr name="basicColor"/>
<attr name="refreshColor" />
</declare-styleable>
</resources>
自定义view类
public class RefreshBar extends View {
private int basicColor; //基础颜色
private int refreshColor; //刷新用色
private int speed; //刷新速度
private int stepNum; //刷新步数
private int radius; //圆环半径
private int progress = 0; //记录刷新进度
private Paint mPaint; //画笔工具
//java代码创建时调用
public RefreshBar(Context context){
this(context,null);
}
//xml中定义是调用
public RefreshBar(Context context, AttributeSet attrs){
this(context, attrs,0);
}
public RefreshBar(Context context,AttributeSet attrs,int defStyle){
//defStyle默认为xml中style标签指定
super(context,attrs,defStyle);
//下面获得我们自定义的属性
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,R.styleable.refreshBar,defStyle,0);
basicColor = typedArray.getColor(R.styleable.refreshBar_basicColor, Color.parseColor("#8F8F8F"));//默认浅灰色
refreshColor = typedArray.getColor(R.styleable.refreshBar_refreshColor,Color.parseColor("#292424"));//默认深灰色
speed = typedArray.getInt(R.styleable.refreshBar_speed,1);
stepNum = typedArray.getInt(R.styleable.refreshBar_stepNum,12);
//半径默认50dp,TypedValue可以进行各种尺寸单位的转换
radius = typedArray.getDimensionPixelSize(R.styleable.refreshBar_radius,
(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,getResources().getDisplayMetrics()));
typedArray.recycle(); //回收再利用
mPaint = new Paint();
}
//重写onMeasure
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heighMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int length;
if(widthMode == MeasureSpec.EXACTLY&&heighMode == MeasureSpec.EXACTLY){
length = Math.min(widthSize,heightSize); //取最小值
}else {
length = radius*3;
}
setMeasuredDimension(length,length); //圆形边界宽相同
}
//重写onDraw()
@Override
protected void onDraw(Canvas canvas) {
/*
先绘制基础圆环
*/
int center = getWidth()/2; //圆心
//根据stepNum计算出每一个进度占用角度,空隙占用角度相同
int perAngle = 360/(stepNum*2);
mPaint.setColor(basicColor);
mPaint.setStrokeWidth(radius/2); //小方块的长度,这里取半径一半
mPaint.setStyle(Paint.Style.STROKE); //不填充内部
for(int i=0;i<stepNum;i++){ //绘制每一个进度块
RectF rectF = new RectF(center-radius,center-radius,center+radius,center+radius); //绘制边界
canvas.drawArc(rectF,i*2*perAngle,perAngle,false,mPaint); //*2用来间隔空隙
}
/*
绘制进度
*/
mPaint.setColor(refreshColor);
for(int i=0;i<progress;i++){ //绘制每一个进度块
RectF rectF = new RectF(center-radius,center-radius,center+radius,center+radius); //绘制边界
canvas.drawArc(rectF,i*2*perAngle,perAngle,false,mPaint); //*2用来间隔空隙
}
}
/**
* 调用此方法来执行刷新进度操作
*/
public void refresh(){
new Thread(new Runnable() {
@Override
public void run() {
while (true){
if (progress==stepNum){
break; //刷新结束
}
progress++;
postInvalidate();
try {
Thread.sleep(1000/speed); //控制刷新速度 个数/秒
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
}