安卓自定义控件（三）实现自定义View

时间：2021-11-20 01:42:50

前面两篇博客，把View绘制的方法说了一下，但是，我们只在onDraw里面做文章，控件都是直接传入一个Context，还不能在布局文件里使用自定义View。这一篇博客，就不再讲绘制，在我们原先的基础上，真正实现一个可用的View。

工具类：ViewHelper（View处理常用方法封装）
安卓自定义控件（一）Canvas、Paint、Shader、Xfermode
安卓自定义控件（二）BitmapShader、ShapeDrawable、Shape
安卓自定义控件（三）实现自定义View

方案：

1、在attrs.xml文件中添加View的自定义属性。
2、继承一个已有的View，比如Button，这样就不要考虑onMeasure方法的内容，因为安卓自带的View肯定已经把它写好了。
3、继承一个View，我们自己设计，实现View的全部功能。

自定义属性

首先，学会自定义属性，两个步骤1、配置attrs.xml文件，写入我们自定义属性；2、在View中引用我们的自定义属性。

配置attrs.xml文件

在res/values包下新建attrs.xml文件，配置好自定义控件名称、自定义属性名称。

我自定义了一个View，名叫RectView，自定义两个属性，rect_hight和rect_width，然后配置文件如下：

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <declare-styleable name="RectView">

        <attr name="rect_hight" format="reference|dimension"/>

        <attr name="rect_width" format="reference|dimension"/>

    </declare-styleable>

</resources>

format的可选参数类型：

“reference” //引用
“color” //颜色
“boolean” //布尔值
“dimension” //尺寸值
“float” //浮点值
“integer” //整型值
“string” //字符串
“fraction” //百分数,比如200%

使用自定义属性

在自定义View中获取自定义属性：

    //获取TypedArray对象

    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RectView);

    //获取自定义属性

    int mWidth = typedArray.getDimensionPixelSize(R.styleable.RectView_rect_width, 300);

    //回收TypedArray

    typedArray.recycle();

或者使用for循环遍历

        int n = typedArray.getIndexCount();

        for (int i = 0; i < n; i++) {

            switch (typedArray.getIndex(i)){

                case R.styleable.RectView_rect_width:

                    int mWidth = typedArray.getDimensionPixelSize(R.styleable.RectView_rect_width, 300);

                    break;

            }

        }

Demo

使用上面给出的attrs.xml文件，在布局文件中使用我们的自定义View，在使用自定义属性的时候，注意在布局中写这一行：xmlns:app=”http://schemas.android.com/apk/res-auto”，在Android Studio下输入App回车即可。

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <main.com.example.administrator.demo.design.canvas.RectView

        android:layout_width="200dp"

        android:layout_height="200dp"

        app:rect_width="150dp"

        app:rect_hight="150dp"

        android:background="@android:color/holo_blue_light"/>

</LinearLayout>

自定义View代码：

/**

 * 在布局文件中使用自定义View

 * Created by ChenSS on 2016/11/24.

 */

public class RectView extends View {

    private int mWidth, mHeight;

    private Paint mPaint;

    public RectView(Context context) {

        this(context, null);

    }

    public RectView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public RectView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        //获取所需的控件参数

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RectView);

        mWidth = typedArray.getDimensionPixelSize(R.styleable.RectView_rect_width, 300);

        mHeight = typedArray.getDimensionPixelSize(R.styleable.RectView_rect_hight, 500);

        mPaint = new Paint();

        mPaint.setAntiAlias(true);

        //注意回收

        typedArray.recycle();

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        canvas.drawRoundRect(30, 30, mWidth, mHeight, 40, 20, mPaint);

    }

}

实现的效果：

安卓自定义控件（三）实现自定义View
简单地实现了一个自定义控件，绘制一个圆角矩形，从效果图可以看出，layout_width和layout_height决定了View的大小（蓝色区域），而我们自定义的rect_width和rect_hight用于绘制我们自己的图形（黑色区域）。

自定义View方式一：继承已有的View

  1. 继承Button，直接拷贝Button的所有构造函数；
  2. 注意：调用3个参数的构造函数时，第三个参数使用：R.attr.buttonStyle，这样使用wrap_content的时候，显示的大小和默认Button相同；
  3. 绘制思路：使用Xfermode，先绘制圆角矩形，然后设置PorterDuff.Mode，再绘制位图，将位图中圆角矩形的部分显示出来；
  4. 也可以使用Shape的子类绘制圆角矩形。
/**

 * 自定义圆角矩形ImageView

 * Created by ChenSS on 2016/11/24.

 */

public class RectView extends Button {

    private Paint mPaint;

    private Bitmap mBitmap;

    private PorterDuffXfermode xfermode;

    //边框

    private static final int RECT_BORDER=5;

    //圆角

    private static final int RECT_RADIO=10;

    public RectView(Context context) {

        this(context, null);

    }

    public RectView(Context context, AttributeSet attrs) {

        this(context, attrs, R.attr.buttonStyle);

    }

    public RectView(Context context, AttributeSet attrs, int defStyleAttr) {

        this(context, attrs, defStyleAttr, 0);

    }

    public RectView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {

        super(context, attrs, defStyleAttr, defStyleRes);

        xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

        mBitmap = ViewHelper.findBitmapById(context, R.mipmap.view_shape);

        mPaint = new Paint();

        mPaint.setAntiAlias(true);

        mPaint.setColor(Color.GRAY);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        //位图改变大小

        mBitmap=ViewHelper.zoomImage(mBitmap,getMeasuredWidth(),getMeasuredHeight());

        //描边

        canvas.drawRoundRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(),

                RECT_BORDER+RECT_RADIO, RECT_BORDER+RECT_RADIO, mPaint);

        //离屏缓存

        int sc = canvas.saveLayer(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), null, Canvas.ALL_SAVE_FLAG);

        //图片遮罩

        canvas.drawRoundRect(RECT_BORDER, RECT_BORDER,

                mBitmap.getWidth()-RECT_BORDER, mBitmap.getHeight()-RECT_BORDER,

                RECT_RADIO, RECT_RADIO, mPaint);

        mPaint.setXfermode(xfermode);

        canvas.drawBitmap(mBitmap,RECT_BORDER, RECT_BORDER, mPaint);

        mPaint.setXfermode(null);

        // 还原画布

        canvas.restoreToCount(sc);

    }

}

安卓自定义控件（三）实现自定义View

采用这种方式自定义View，实现起来就十分简单，直接在onDraw中调用getMeasuredWidth()、getMeasuredHeight()就可以了，不用我们多考虑什么。

自定义View方式二：继承View

如果是继承View，就要重新考虑一下View的大小了，在Xml布局中，会有3种情况：match_parent、wrap_content或者指定一个确切的大小，区分这些情况，我们就要考虑MeasureSpec的Mode了，Mode一共三种类型：

  • EXACTLY：一般是设置了明确的值，或者是MATCH_PARENT
  • AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT
  • UNSPECIFIED：表示子布局想要多大就多大，如果你想绘制Listview这样的东西，就考虑使用吧

对上面的代码做一些修改，把继承Button改成继承View，如果不重写onMeasure方法，你会发现match_parent、wrap_content效果是一样的，下面代码简单地重写了一下onMeasure方法。

/**

 * 继承View实现自定义控件

 * Created by ChenSS on 2016/11/24.

 */

public class RectView extends View {

    private Paint mPaint;

    private Bitmap mBitmap;

    private PorterDuffXfermode xfermode;

    //边框

    private static final int RECT_BORDER = 5;

    //圆角

    private static final int RECT_RADIO = 10;

    //默认宽度

    private static final int DEFAULT_WIDTH = 600;

    //默认高度

    private static final int DEFAULT_HEIGHT = 200;

    public RectView(Context context) {

        this(context, null);

    }

    public RectView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public RectView(Context context, AttributeSet attrs, int defStyleAttr) {

        this(context, attrs, defStyleAttr, 0);

    }

    public RectView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {

        super(context, attrs, defStyleAttr, defStyleRes);

        xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

        mBitmap = ViewHelper.findBitmapById(context, R.mipmap.view_shape);

        mPaint = new Paint();

        mPaint.setAntiAlias(true);

        mPaint.setColor(Color.GRAY);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        //位图改变大小

        mBitmap = ViewHelper.zoomImage(mBitmap, getMeasuredWidth(), getMeasuredHeight());

        //描边

        canvas.drawRoundRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(),

                RECT_BORDER + RECT_RADIO, RECT_BORDER + RECT_RADIO, mPaint);

        //离屏缓存

        int sc = canvas.saveLayer(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), null, Canvas.ALL_SAVE_FLAG);

        //图片遮罩

        canvas.drawRoundRect(RECT_BORDER, RECT_BORDER,

                mBitmap.getWidth() - RECT_BORDER, mBitmap.getHeight() - RECT_BORDER,

                RECT_RADIO, RECT_RADIO, mPaint);

        mPaint.setXfermode(xfermode);

        canvas.drawBitmap(mBitmap, RECT_BORDER, RECT_BORDER, mPaint);

        mPaint.setXfermode(null);

        // 还原画布

        canvas.restoreToCount(sc);

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width;

        int height;

        if (widthMode == MeasureSpec.EXACTLY) {

            width = widthSize;

        } else {

            width = DEFAULT_WIDTH;

        }

        if (heightMode == MeasureSpec.EXACTLY) {

            height=heightSize;

        } else {

            height = DEFAULT_HEIGHT;

        }

        setMeasuredDimension(width, height);

    }

}

安卓自定义控件（三）实现自定义View

自定义View进阶：Java代码修改View的显示

有时候，我们会有这样的需求，当我们点击图片的时候，会有一个新的图片替换掉旧的，其中的关键方法是postInvalidate()，在调用postInvalidate()之前，我们需要对参数进行一些设置，调用postInvalidate()之后，onDraw中的内容会重新执行一遍。自定义View的其它方法请参考：自定义View常用方法汇总

Demo：

/**

 * 继承View实现自定义控件

 * Created by ChenSS on 2016/11/24.

 */

public class RectView extends View {

    private Paint mPaint;

    private Bitmap mBitmap;

    private PorterDuffXfermode xfermode;

    private Context mContext;

    //边框

    private static final int RECT_BORDER = 5;

    //圆角

    private static final int RECT_RADIO = 10;

    //默认宽度

    private static final int DEFAULT_WIDTH = 600;

    //默认高度

    private static final int DEFAULT_HEIGHT = 200;

    public RectView(Context context) {

        this(context, null);

    }

    public RectView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public RectView(Context context, AttributeSet attrs, int defStyleAttr) {

        this(context, attrs, defStyleAttr, 0);

    }

    public RectView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {

        super(context, attrs, defStyleAttr, defStyleRes);

        mContext=context;

        xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

        mBitmap = ViewHelper.findBitmapById(context, R.mipmap.view_shape);

        mPaint = new Paint();

        mPaint.setAntiAlias(true);

        mPaint.setColor(Color.GRAY);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        //位图改变大小

        mBitmap = ViewHelper.zoomImage(mBitmap, getMeasuredWidth(), getMeasuredHeight());

        //描边

        canvas.drawRoundRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(),

                RECT_BORDER + RECT_RADIO, RECT_BORDER + RECT_RADIO, mPaint);

        //离屏缓存

        int sc = canvas.saveLayer(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), null, Canvas.ALL_SAVE_FLAG);

        //图片遮罩

        canvas.drawRoundRect(RECT_BORDER, RECT_BORDER,

                mBitmap.getWidth() - RECT_BORDER, mBitmap.getHeight() - RECT_BORDER,

                RECT_RADIO, RECT_RADIO, mPaint);

        mPaint.setXfermode(xfermode);

        canvas.drawBitmap(mBitmap, RECT_BORDER, RECT_BORDER, mPaint);

        mPaint.setXfermode(null);

        // 还原画布

        canvas.restoreToCount(sc);

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width;

        int height;

        if (widthMode == MeasureSpec.EXACTLY) {

            width = widthSize;

        } else {

            width = DEFAULT_WIDTH;

        }

        if (heightMode == MeasureSpec.EXACTLY) {

            height=heightSize;

        } else {

            height = DEFAULT_HEIGHT;

        }

        setMeasuredDimension(width, height);

    }

    /**

     * 修改图片

     * @param drawableId 图片资源ID

     */

    public void setBitmap(int drawableId){

        mBitmap.recycle();

        mBitmap = ViewHelper.findBitmapById(mContext, drawableId);

        if(mBitmap.isRecycled())

            return;

        postInvalidate();

    }

}

上面的代码中，我们添加了一个setBitmap方法，这个方法用于获取本地的图片Id，然后修改自定义View中的mBitmap对象，然后调用postInvalidate()方法进行View的重新绘制。

在Activity中修改View的显示

public class RectActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_rect);

        final RectView rectView= (RectView) findViewById(R.id.rect_id);

        rectView.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                //替换背景

                rectView.setBitmap(R.mipmap.view_robot);

            }

        });

    }

}

点击前：

安卓自定义控件（三）实现自定义View

点击后：

安卓自定义控件（三）实现自定义View

相关文章