Android自定义控件—自绘控件

night_rain.png

随着Android的快速发展，对于Android开发者来说也是一个挑战，Android现有控件已经满足不了项目的一些特殊需求，这个时候就需要到了自定义控件，通过自己定义属性来渲染UI，从而得到自己想要的控件。

自定义属性

在values文件下创建attrs.xml文件(名字随意,能用就好)

<resources>
    <!--这种方式定义属性可以再style中引用-->
    <declare-styleable name="CustomView">
        <attr name="custom_height" format="dimension"></attr>
        <attr name="custom_witch" format="dimension"></attr>
        <attr name="custom_color" format="color"></attr>
        <!--name 属性名称-->
        <!--format 属性值的类型-->
    </declare-styleable>
</resources>

继承View(Android中所有控件都是View的子类)

继承View会重写三个构造方法

    /**
     * 代码创建调用
     * <p>
     *     在活动中用java创建控件的时候
     * </p>
     * @param context
     */
    public CustomView(Context context) {
        super(context);
        init(context, null, 0);
    }

    /**
     * XML创建调用
     * <p>
     *     在layout文件夹下的XML文件中引用调用
     * </p>
     * @param context
     * @param attrs
     */
    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    /**
     * XML创建调用
     * <p>
     *     在layout文件夹下的XML文件中引用，
     *     不同的是，控件引用样式的时候会调用
     * </p>
     * @param context
     * @param attrs
     */
    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

初始化

这里要把画笔和画笔的一些属性设置好

    private void init(Context context, AttributeSet attrs, int defStyle) {
        if (attrs != null) {
            //获取自定义属性的数组
            TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
            //获取自定义属性
            cutomWidth = mTypedArray.getDimension(R.styleable.CustomView_custom_witch, cutomWidth);
            customHeight = mTypedArray.getDimension(R.styleable.CustomView_custom_height, customHeight);
            cutomColor = mTypedArray.getColor(R.styleable.CustomView_custom_color, cutomColor);
            //释放资源
            mTypedArray.recycle();
            //创建画笔
            mPaint = new Paint();
            //设置抗锯齿()
            mPaint.setAntiAlias(true);
            //设置颜色
            mPaint.setColor(cutomColor);
            //设置画笔的宽度
            mPaint.setStrokeWidth(customHeight);
        }
    }

绘制逻辑

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取控件的测量的宽度
        int mMeasuredWidth = this.getMeasuredWidth();
        //绘制过的长度
        int customLength = 0;
        //开始绘制的位置
        float startX = 0;
        //结束绘制的位置
        float endX = cutomWidth / 2;
        do {
            //绘制横线
            canvas.drawLine(startX, 20, endX, 20, mPaint);
            //计算绘制后的长度
            customLength += (cutomWidth / 2 + (endX - startX));
            //计算下一次开始绘制的位置
            startX += (cutomWidth / 2 + (endX - startX));
            //计算下一次结束绘制的位置
            endX = (startX + cutomWidth);
            //绘制长度大于测量的长度就结束绘制
        } while (customLength <= mMeasuredWidth);
    }

XML文件中引用

   <com.nightrain.qfamily.custom_demo_2017_12_19.CustomView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:custom_color="@color/colorPrimary"
       app:custom_height="5dp"
       app:custom_witch="50dp"/>

效果图

自定义View效果图.png