自定义视图的简单应用

1、在res/values目录下新建attrs.xml文件：

<resources>
    <declare-styleable name="myStyleable">
        <attr name="max" format="integer"/>
        <attr name="progress" format="integer"/>
        <attr name="textSize" format="dimension"/>
        <attr name="smallBgColor" format="color"/>
        <attr name="progressColor" format="color"/>
    </declare-styleable>

</resources>

format（自定义属性的格式）可选内容有integer、dimension(尺寸)、color、boolean、enum（枚举值）、flag（位或运算）、float、fraction（百分数）、reference（参考某一ID、默认）、string.

<declare-styleable name = "名称">
      <attr name = "background" format = "reference" />
</declare-styleable>

eg:

<ImageView
     android:layout_width = "42dip"
     android:layout_height = "42dip"
     android:background = "@drawable/图片ID"
                     />

2、自定义视图：

public class XykjProgressBar extends View {
    //进度条的半径
    private int radius;
    //圆心
    private int cx, cy;
    //画笔
    private Paint paint;
    //进度的最大值
    private int max = 100;

    //进度值
    private int progress;
    //文本大小
    private int textSize;
    //内部小圆的背景色
    private int smallBgColor = 0xff3F51B5;
    //进度条的颜色
    private int progressColor = 0xffFF4081;

    public XykjProgressBar(Context context) {
        super(context);
        init();
    }

    public XykjProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //解析自定义属性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.myStyleable);
        textSize = ta.getDimensionPixelSize(R.styleable.myStyleable_textSize, 0);  //sp dp dip
        max = ta.getInteger(R.styleable.myStyleable_max,100);
        progress = ta.getInteger(R.styleable.myStyleable_progress,0);
        smallBgColor = ta.getColor(R.styleable.myStyleable_smallBgColor,0xff3F51B5);
        progressColor = ta.getColor(R.styleable.myStyleable_progressColor,0xffFF4081);
        //释放资源
        ta.recycle();
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(smallBgColor);
        //画中间的小圆
        canvas.drawCircle(cx, cy, radius - 10, paint);
        //文本
        int num = 100 * progress / max;  //50 100 -->50%
        String str = num + "%";
        //获取文本的边框
        Rect bound = new Rect();
        paint.setTextSize(textSize);
        paint.getTextBounds(str, 0, str.length(), bound);
        int x = cx - bound.centerX();
        int y = cy - bound.centerY();
        paint.setColor(Color.WHITE);
        //画进度文本
        canvas.drawText(str, x, y, paint);
        //进度的弧线
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        paint.setColor(progressColor);
        //计算所跨越的弧度
        int degree = 360 * progress / max;
        RectF rect = new RectF(cx - radius, cy - radius, cx + radius, cy + radius);
        //画弧线
        canvas.drawArc(rect, -90, degree, false, paint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = getSize(widthMeasureSpec);
        int height = getSize(heightMeasureSpec);
        //初始化圆心
        cx = width / 2;
        cy = height / 2;
        //取最短的边的一半作为进度半径
        radius = width < height ? cx : cy;
        radius -= 10;
        //如果没有默认值则，初始化文本大小
        if (textSize == 0) {
            textSize = radius / 2;
        }
        setMeasuredDimension(width, height);
    }

    //获取尺寸方法（自定义的根据模式获取，wrap_content时设置默认值为80）
    private int getSize(int measureSpec) {
        //获取测量模式
        int mode = MeasureSpec.getMode(measureSpec);
        int size = 80;
        if (mode == MeasureSpec.EXACTLY) {
            //精确的，固定的值，match_parent或者100  200
            size = MeasureSpec.getSize(measureSpec);
        }/*else if(mode == MeasureSpec.AT_MOST){
            //不确定，如wrap_content
            size = 80;
        }*/
        return size;
    }

    public int getMax() {
        return max;
    }

    public void setMax(int max) {
        this.max = max;
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        if (this.progress != progress && progress <= max) {
            this.progress = progress;
            invalidate();
        }
    }

    public int getTextSize() {
        return textSize;
    }

    public void setTextSize(int textSize) {
        this.textSize = textSize;
    }

    public int getSmallBgColor() {
        return smallBgColor;
    }

    public void setSmallBgColor(int smallBgColor) {
        this.smallBgColor = smallBgColor;
    }

    public int getProgressColor() {
        return progressColor;
    }

    public void setProgressColor(int progressColor) {
        this.progressColor = progressColor;
    }
}

3、在主界面中引用：

<LinearLayout 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.xykj.myprogressbar.MainActivity">

    <com.xykj.myprogressbar.XykjProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:textSize="30sp"
        app:smallBgColor="#ff000000"/>

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click" />

</LinearLayout>

java代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    XykjProgressBar pBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pBar = (XykjProgressBar) findViewById(R.id.progress_bar);
        pBar.setMax(100);
        pBar.setProgress(10);
        pBar.setTextSize(50);
        findViewById(R.id.btn).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        int p = pBar.getProgress();
        p+=5;
        pBar.setProgress(p);
    }
}

结果如下图：

面试题：介绍下实现一个自定义View的基本流程：

1、自定义view属性，编写attrs.xml文件

2、在layout布局中引用，同时引用命名空间

3、在view的构造方法中获得我们自定义的属性，在自定义的控件中进行读取

4、重写onMeasure()方法

5、重写onDraw()方法