之所以想试试这个,是因为看到了MIUI商店中的安装按钮
就像自己做一个吧,因为自己也是菜鸟,遇到了一些问题,其中最主要的是,xfermode中,要saveLayer到一个新的透明图层进行绘制,完了再显示到Canvas中,不然的话,会吧原来的背景色都会当做DST处理。没有效果,写的时候,一度怀疑人生。
还有一个就是,text要居中,DrawText其实不是从左上角0,0开始绘制,是按照Text的基准线来的,baseLine。
其他没什么,代码比较烂。直接贴代码吧。
View
public class MyRectPrograss extends View {
RectF Rbounds;
Paint mPaint, mPrograssPaint, mTextPaint;
int radiousX, radiousY;
int prograss;
int measureHeight, measureWidth;
public MyRectPrograss(Context context) {
super(context);
}
public MyRectPrograss(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
/* mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.GREEN);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));*/
mPrograssPaint = new Paint();
mPrograssPaint.setAntiAlias(true);
mPrograssPaint.setColor(Color.GREEN);
mPrograssPaint.setStyle(Paint.Style.FILL);
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(28);
mTextPaint.setColor(Color.BLACK);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
Rbounds = new RectF(0, 0, w, h);
measureHeight = getMeasuredHeight();
measureWidth = getMeasuredWidth();
Log.e("xxx","w : "+w+" h :"+h+" measureHeight: "+measureHeight+"measureWidth: "+measureWidth);
}
int id;
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
id =canvas.saveLayer(Rbounds,null,Canvas.ALL_SAVE_FLAG);//保存到layer!!!这里必须这么做!!不然没效果,我也不知道为什么
Paint paint=new Paint();
paint.setStyle(Paint.Style.FILL); //这里下面五句相当于画一个绿色的边框
paint.setColor(Color.GREEN);
canvas.drawRoundRect(Rbounds,20,20,paint);
paint.setColor(Color.WHITE);
canvas.drawRoundRect(new RectF(Rbounds.left+1,Rbounds.top+1,Rbounds.right-1,Rbounds.bottom-1),20,20,paint);
paint.setColor(Color.BLUE);//进度条填充,蓝色
//设置mode
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
//画进度条
int prograssss= (int) (1.0f*measureWidth/100*this.prograss);
canvas.drawRect(new Rect(0,0,prograssss,measureHeight),paint);
//restore
canvas.restoreToCount(id);
//这里文字居中,也需要注意BaseLine!!!!!!
drawText(canvas);
}
private void drawPrograss(Canvas canvas) {
int prograssDraw = measureWidth / 100 * prograss;
Rect rect = new Rect(0, 0, prograssDraw, measureHeight);
canvas.drawRect(rect, mPaint);
}
private void drawText(Canvas canvas) {
String prograssS = prograss + "%";
Rect bounds = new Rect();
mTextPaint.getTextBounds(prograssS,0,prograssS.length(),bounds);
Paint.FontMetrics fontMetrics=mTextPaint.getFontMetrics();
//绘制文字,不是从左上角的0,0开始的,分文四条基准线。
int baseline= (int) (measureHeight/2+(fontMetrics.bottom-fontMetrics.top)/2-fontMetrics.bottom);
Log.e("xxx",baseline+"");
canvas.drawText(prograssS,(measureWidth-bounds.width())/2,baseline,mTextPaint);
}
//对外暴露接口
public void setPrograss(int prograss) {
this.prograss = prograss;
invalidate();
}
}
Activity
public class MainActivity extends AppCompatActivity {
MyRectPrograss myRectPrograss;
int prograss;
Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
myRectPrograss.setPrograss(msg.arg1);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myRectPrograss= (MyRectPrograss) findViewById(R.id.iiii);
new Thread(new Runnable() {
@Override
public void run() {
for (int i=1;i<=100;i++){
Message message=handler.obtainMessage();
message.arg1=i;
handler.sendMessage(message);
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:padding="10dp"
tools:context="com.example.administrator.myrectprograss.MainActivity">
<com.example.administrator.myrectprograss.MyRectPrograss
android:id="@+id/iiii"
android:layout_width="500dp"
android:layout_height="200dp"
android:layout_centerInParent="true" />
</RelativeLayout>
最后上两张效果图,没有弄得很细。