首先你需要在自己的的res目录下创造一个attrs.xml的文件,然后在里面写自定义view的属性例如
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RoundBar">
<attr name="roundColor" format="color"/>
<attr name="roundWidth" format="dimension"></attr>
</declare-styleable>
</resources>
然后你的layout可以这样写
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.example.hasee.customviewdemo.CustomView
android:id="@+id/custom"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:roundColor="#ff1ff41f"
app:roundWidth="2dp"/>
</FrameLayout>
</LinearLayout>
在引用自定义控件的时候注意写自定义控件类的绝对路径,你也可以看到在attrs定义的属性,我们已经给他赋值了,当然也别忘了,在xml的头加上这句,声明一下我们属性里的app是什么
xmlns:app="http://schemas.android.com/apk/res-auto"
CustomView的代码
package com.example.hasee.customviewdemo;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by hasee on 2016/10/31.
*/
public class CustomView extends View {
private float mBorderWidth;
private int mBorderColor;
private ProgressBean progressBean[] = {new ProgressBean(0x66555555,2)};
private int sum;
private RectF mOval;
private Paint mPaint;
private RectF mBounds;
private float width;
private float height;
float radius;
float smallLength;
float largeLength;
public CustomView(Context context) {
super(context);
init();
}
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
// 取得自定义控件
TypedArray typedArray = context.getTheme()
.obtainStyledAttributes(
attrs,
R.styleable.RoundBar
, 0, 0);
// 取得自定义控件的属性
try {
mBorderColor = typedArray.getColor(R.styleable.RoundBar_roundColor, 0xff000000);
mBorderWidth = typedArray.getDimension(R.styleable.RoundBar_roundWidth, 2);
} finally {
// 回收控件
typedArray.recycle();
}
init();
}
public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 其实代码写在第三个构造函数里也可以
}
private void init() {
// 新建画笔
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
// 空心
mPaint.setStyle(Paint.Style.STROKE);
// 边缘宽度
mPaint.setStrokeWidth(mBorderWidth);
// 颜色
mPaint.setColor(mBorderColor);
// 总和初始化
sum = 100;
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBounds = new RectF(getLeft(), getTop(), getRight(), getBottom());
width = mBounds.right - mBounds.left;
height = mBounds.bottom - mBounds.top;
if (width < height) {
radius = width / 4;
} else {
radius = height / 4;
}
smallLength = 10;
largeLength = 20;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 画最外层的大圆环
*/
int centre = getWidth()/2; //获取圆心的x坐标
int radius = (int) (centre/2); //圆环的半径
mPaint.setColor(mBorderColor);
mPaint.setStyle(Paint.Style.STROKE); //设置空心
mPaint.setStrokeWidth(2); //设置圆环的宽度
mPaint.setAntiAlias(true); //消除锯齿
canvas.drawCircle(centre, centre, radius, mPaint); //画出圆环
/**
* 画圆弧 ,画圆环的进度
*/
float startAngle = 0;
float sweepAngle = 0;
for(ProgressBean bean:progressBean){
//设置进度是实心还是空心
mPaint.setStrokeWidth(mBorderWidth); //设置圆环的宽度
mPaint.setColor(bean.getColor()); //设置进度的颜色
mOval = new RectF(centre - radius,centre - radius, centre
+ radius,centre + radius); //用于定义的圆弧的形状和大小的界限
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
sweepAngle = 360*bean.getAmount()/sum;
canvas.drawArc(mOval, startAngle,sweepAngle, true, mPaint); //根据进度画圆弧
startAngle = startAngle + sweepAngle;
}
}
// UI调用该方法向view传入需求的扇形
public void setmDegree(int sum,ProgressBean...bean) {
this.sum = sum;
this.progressBean = bean;
// 调用该方法从新绘制view
postInvalidate();
}
}
progressBean的代码
public class ProgressBean {
private int color;
private int amount;
public ProgressBean(int color,int amount){
this.amount = amount;
this.color = color;
}
public int getColor() {
return color;
}
public void setColor(int color) {
this.color = color;
}
public int getAmount() {
return amount;
}
public void setAmount(int amount) {
this.amount = amount;
}
}
调用样例
CustomView customView = (CustomView) findViewById(R.id.custom);
final int yellow = getResources().getColor(R.color.colorYellow);
final int red = getResources().getColor(R.color.colorRed);
customView.setmDegree(10,new ProgressBean(yellow,9),new ProgressBean(red,8));
目前其实有个bug就是当你的amount总和大于sum时之前的扇形会被覆盖掉,以后会增加一些check禁止用户这么传值。。。恩就是这样