Android 如何自定义View？

Android 如何自定义View？

在看这篇博客之前可以先看View的工作原理

1. 自定义View

1. 自定义View的分类

1. 继承View重写onDraw方法

这种方式需要通过绘制的方式来实现，即重写onDraw方法。采用这种方式需要自己支持wrap_content，并且padding也需自己处理。

2. 继承ViewGroup派生特殊的Layout

这种方法主要用于实现自定义布局，采用这种方式稍微复杂一些，需要合适的处理ViweGroup的测量，布局两个过程，并且同时处理子元素的测量和布局过程。

3. 继承特定的View

这种方式比较常见，一般是用于扩展某种已有的View的功能，这种方式不需要自己支持wrap_content和padding。

4. 继承特定的ViewGroup

这种方式不需要自己处理测量和布局这两个过程。

2. 自定义View须知

1. 让View支持wrap_content

这是因为直接继承View或者ViewGroup的控件，如果不在onMeasure中对wrap_content做特殊处理时，那么当外界在布局中使用wrap_content时就无法达到预期的效果。具体原因在View的工作原理

2. 如果有必要，让View支持padding

这是因为直接继承View的控件，如果不在draw方法中处理padding，那么padding属性是无法起作用的。另外，直接继承自ViewGroup的控件需要在onMeasure和onLayout中考虑padding和子元素的margin对其造成的影响。

3. 尽量不要在View中使用Handler，没必要

这是因为View的内部本身就提供了post系列的方法，完全可以替代Handler的作用。

4. View中如果有线程或者动画，需要及时停止

如果有线程或者动画需要停止时，那么onDetachedFromWindow是一个很好的时机。当包含此view的Activity退出或者当前View被remove时，View的onDetachedFromWindow方法会被调用，和此方法对应的是onAttachedToWindow，当包含此View的Activity启动时，View的onAttachedToWindow会被调用。

5. View带有滑动嵌套情形时，需要处理好滑动冲突

如果有滑动冲突的话，那么要合适的处理滑动冲突。

2. 示例

1. 继承现有控件

相对而言，这是一种较简单的方式。因为大部分核心工作，比如关于控件大小的测量，控件位置的摆放等相关的计算，在系统内部都已经实现并封装好，我们只需要在此基础上做一些扩展，并按照自己的意图显示相应的元素。

如：

public class CustomToolBar extends RelativeLayout {
    private ImageView leftImage,rightImage;
    private TextView titleTextView;
    public CustomToolBar(Context context) {
        this(context,null);
    }

    public CustomToolBar(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        leftImage = new ImageView(context);
        leftImage.setPadding(12,12,12,12);
        rightImage = new ImageView(context);
        rightImage.setPadding(12,12,12,12);
        leftImage.setImageResource(R.mipmap.ic_launcher);
        rightImage.setImageResource(R.mipmap.ic_launcher);
        LayoutParams leftParams = new LayoutParams((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,48,getResources().getDisplayMetrics()),(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,48,getResources().getDisplayMetrics()));
        leftParams.addRule(ALIGN_PARENT_LEFT,TRUE);
        this.addView(leftImage,leftParams);
        titleTextView = new TextView(context);
        titleTextView.setText("CustomToolBar");
        titleTextView.setTextSize(20);
        titleTextView.setTextColor(Color.WHITE);
        LayoutParams titleParams  = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        titleParams.addRule(CENTER_IN_PARENT,TRUE);
        this.addView(titleTextView,titleParams);
        LayoutParams rightParams = new LayoutParams((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,48,getResources().getDisplayMetrics()),(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,48,getResources().getDisplayMetrics()));
        rightParams.addRule(ALIGN_PARENT_RIGHT,TRUE);
        addView(rightImage,rightParams);
    }
}

2. 自定义属性

有时候我们想在XML中使用CustomToolBar时，希望能在XML中直接指定Title的显示内容，字体颜色，leftImage和rightImage的显示图片等。这就需要自定义属性。

1. attrs.xml中声明自定义属性

   在res目录下的attrs.xml文件中（没有就自己创建一个），使用标签自定义属性，如下所示：

   <declare-styleable name="CustomToolBar">
           <attr name = "titleText" format="string|reference"/>
           <attr name="myTitleTextColor" format="color|reference"/>
           <attr name="titleTextSize" format="dimension|reference"/>
           <attr name="leftImageSrc" format="reference"/>
           <attr name="rightImageSrc" format="reference"/>
       </declare-styleable>
   

   解释：

   • declare-styleable标签代表一个自定义属性集合，一般会与自定义控件结合使用
   • attr标签则代表一条具体的属性，name是属性名称，format代表属性的格式。

   在XML布局中使用自定义属性

首先添加命名空间xmnls:app ，然后通过命名空间app引用自定义属性，并传入相应的图片资源和字符串内容。

在CustomToolBar中，获取自定义属性的引用值

private void initAttrs(Context context) {
        TypedArray ta = context.obtainStyledAttributes(R.styleable.CustomToolBar);
        titleText = ta.getString(R.styleable.CustomToolBar_titleText);
        textColor = ta.getColor(R.styleable.CustomToolBar_myTitleTextColor,Color.WHITE);
        titleTextSize = ta.getDimension(R.styleable.CustomToolBar_titleTextSize,12);
        leftImageId = ta.getResourceId(R.styleable.CustomToolBar_leftImageSrc,R.mipmap.ic_launcher);
        rightImageId = ta.getResourceId(R.styleable.CustomToolBar_rightImageSrc,R.mipmap.ic_launcher);
    }

3. 直接继承View或ViewGroup

这种方式相比第一种麻烦一些，但是更加灵活，也能实现更加复杂的UI界面。一般需要解决以下问题：

• 如何根据相应的属性将UI元素绘制到界面；
• 自定义控件的大小，也就是宽和高分别设置多少；
• 如果是ViewGroup，如何合理安排子元素的摆放位置。

以上三个问题依次在如下三个方法中解决：

1. onDraw
2. onMeasure
3. onLayout

因此自定义View的工作重点其实就是复写并且合理的实现这三个方法。注意：并不是每个自定义View都需要实现这三个方法，大多数情况下只需要实现其中2个甚至1个方法也能满足需求。

onDraw

onDraw方法接收一个Canvas参数。Canvas可以理解为一个画布，在这块画布上可以绘制各种类型的UI元素。

系统提供了一系列Cnavas操作方法，如下：

void drawRect(RectF rect,Paint paint);//绘制矩形区域
void drawOval(RectF oval,Paint paint);//绘制椭圆
void drawCircle(float cx,float cy,float radius,Paint paint);//绘制圆形
void drawArc(RectF oval,float startAngle,float sweepAngle,boolean useCenter,Paint paint);//绘制弧形
void drawPath(Path path,Paint paint);//绘制path路径
void drawLine(float startX,float startY,float stopX,float stopY,Paint paint);//绘制连线
void drawOval(float x,float y,Paint paint);//绘制点

从上图中可以看出，Canvas中每一个绘制操作都需要传入一个Paint对象。Paint就相当于一个画笔，我们可以设置画笔的各种属性，实现不同的绘制效果。

setStyle(Style style);//设置绘制模式
setColor(int color);//设置颜色
setAlpha(int a);//设置透明度
setShader(Shader sahder);//设置Paint的填充效果
setStroke(float width);//设置线条宽度
setTextSize(float textSize);//设置文字大小
setAntiAlias(boolean aa);//设置抗锯齿开关
setDither(boolean dither);//设置防抖动开关

如下代码，定义PieImageView继承自View，然后在onDraw方法中，分别使用canvas的drawArc，和drawCircle来绘制弧度和圆形。这两个形状结合在一起就能表示一个简易的圆形进度条控件。

public class PieImageView extends View {

    private static final int MAX_PROGRESS = 100;
    private Paint mArcPaint;
    private RectF mBound;
    private Paint mCirclePaint;
    private int mProgress = 0;
    public PieImageView(Context context) {
        this(context,null);
    }

    public PieImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public PieImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void setProgress(@IntRange(from  = 0,to = MAX_PROGRESS) int mProgress){
        this.mProgress = mProgress;
        ViewCompat.postInvalidateOnAnimation(this);
    }

    private void init() {
        mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mArcPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mArcPaint.setStrokeWidth(dpToPixel(0.1f,getContext()));
        mArcPaint.setColor(Color.RED);

        mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(dpToPixel(2,getContext()));
        mCirclePaint.setColor(Color.argb(120,0xff,0xff,0xff));
        mBound = new RectF();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        //判断是wrap_content模式
        if (MeasureSpec.AT_MOST == widthMode||MeasureSpec.AT_MOST == heightMode){

            //将宽高设置为传入宽高的最小值
            int size = Math.min(measureWidth,measureHeight);
            setMeasuredDimension(size,size);
        }else{
            setMeasuredDimension(measureWidth,measureHeight);
        }

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        int min = Math.min(w,h);
        int max = w + h - min;
        int r = Math.min(w,h)/3;
        mBound.set((max >> 1) - r,(min >> 1) -r,(max>>1)+r,(min>>1)+r);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mProgress!=MAX_PROGRESS&&mProgress!=0){
            float mAngle = mProgress*360f/MAX_PROGRESS;
            canvas.drawArc(mBound,270,mAngle,true,mArcPaint);
            canvas.drawCircle(mBound.centerX(),mBound.centerY(),mBound.height()/2,mCirclePaint);
        }
    }

    private float scale = 0;
    private int dpToPixel(float dp, Context context) {
        if (scale == 0){
            scale = context.getResources().getDisplayMetrics().density;
        }
        return (int)(dp*scale);
    }
}

在Activity中设置进度为45

如果在上面代码中的布局文件中，将PieImageView的宽高设置为wrap_content（也就是自适应），显示效果如下：

宽是父容器的宽，高等于宽，这是因为我们在onMeasure中处理了wrap_content的情况。

4. ViewGroup的onMeausre

如果我们自定义的控件是一个容器，onMeasure方法会更加复杂一些。因为ViewGroup在测量自己的宽高之前，需要先确定其内部子View的所占大小，然后才能确定自己的大小。

当我们要自己定义一个ViewGroup时，也需要在onMeaure方法中综合考虑子View的宽度。比如如果要实现一个流式布局FlowLayout，效果如下：

在大多数App的搜索界面经常会使用FlowLayout来展示历史搜索或者热门搜索项。FlowLayout的每一行中的item的个数不一定，当每行item累计宽度超过可用总宽度，则需要重启一行进行摆放。如下：

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获得宽高的测量模式和测量值
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec)-getPaddingLeft()-getPaddingRight();
        int heightSize = MeasureSpec.getSize(heightMeasureSpec)-getPaddingBottom()-getPaddingTop();
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //获得容器中子View的个数
        int childCount = getChildCount();
        //记录每一行View的总宽度
        int totalLineWidth = 0;
        //记录每一行最高view的高度
        int perLineMaxHeight = 0;
        //记录当前ViewGroup的总高度
        int totalHeight = 0;

        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            //对子view进行测量
            measureChild(childView,widthMeasureSpec,heightMeasureSpec);
            MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
            //获得子view的测量宽度
            int childWidth = childView.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;
            //获得子view的测量高度
            int childHeight = childView.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;
            if (totalLineWidth+childWidth>widthSize){
                //统计总高度
                totalHeight+=perLineMaxHeight;
                //开启新一行
                totalLineWidth=childWidth;
                perLineMaxHeight=childHeight;
            }else{
                //记录每一行的总宽度
                totalLineWidth+=childWidth;
                //比较每一行最高的view
                perLineMaxHeight = Math.max(perLineMaxHeight,childHeight);
            }

            //当前view已是最后一个view时，将改行最大高度添加到totalHeight中
            if (i == childCount-1){
                totalHeight+=perLineMaxHeight;
            }
        }

        //如果高度的测量模式是EXACTLY，则高度用测量值，否则用计算出来的总高度（这时的测量模式是AT_MOST）
        heightSize = heightMode == MeasureSpec.EXACTLY?heightSize:totalHeight;
        setMeasuredDimension(widthSize,heightSize);
    }

上述onMeasure方法的主要目的有2个：

• 通过measureChild方法递归测量子View
• 通过叠加每一行的高度，计算出最终FlowLayout的最终高度totalHeight

ViewGroup中的onLayout方法声明如下：

protected abstract void onLayout(boolean changed,int l,int t,int r,int b);

它是一个抽象方法 ，也就是每一个自定义ViewGroup都必须实现如何排布子View，具体就是遍历每一个子View，调用child.layout(l,t,r,b);为每个子View设置具体的布局位置。如下：

protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.d("PADDING", "onLayout: viewgroup width--->"+getWidth());
        Log.d("PADDING", "onLayout: paddingLeft --->"+getPaddingLeft());
        mAllViews.clear();
        mPerLineMaxHeight.clear();

        //存放每一行的子view
        List<View> lineViews = new ArrayList<>();
        //记录每一行已存放view的总宽度
        int totalLineWidth = 0;
        //记录每一行最高View的高度
        int lineMaxHeight = 0;

        /**************************遍历所有View，将View添加到List<List<View>>集合中*************************/
        //获得View的总个数
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
            int childWidth = childView.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;
            int childHeight = childView.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;
            if (totalLineWidth+childWidth>getWidth()){
                mAllViews.add(lineViews);
                mPerLineMaxHeight.add(lineMaxHeight);
                //开启新一行
                totalLineWidth = 0;
                lineMaxHeight = 0;
                lineViews = new ArrayList<>();
            }

            totalLineWidth+=childWidth;
            lineViews.add(childView);
            lineMaxHeight = Math.max(lineMaxHeight,childHeight);
        }
        //单独处理最后一行
        mAllViews.add(lineViews);
        mPerLineMaxHeight.add(lineMaxHeight);
        /***********************遍历集合中的所有view并显示出来***********************/
        //表示一个view和父容器左边的距离
        int mLeft = getPaddingLeft();
        //表示view和父容器顶部的距离
        int mTop = getPaddingTop();

        for (int i = 0; i < mAllViews.size(); i++) {
            //获得每一行的所有view
            lineViews = mAllViews.get(i);
            lineMaxHeight = mPerLineMaxHeight.get(i);
            for (int j = 0; j < lineViews.size(); j++) {
                View childView = lineViews.get(j);
                MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
                int leftChild = mLeft + lp.leftMargin;
                int topChild = mTop + lp.topMargin;
                int rightChild = leftChild + childView.getMeasuredWidth();
                int bottomChild = topChild+childView.getMeasuredHeight();
                //四个参数分别表示view的左上角和右下角
                childView.layout(leftChild,topChild,rightChild,bottomChild);
                mLeft+=lp.leftMargin+childView.getMeasuredWidth()+lp.rightMargin;
            }
            mLeft=getPaddingLeft();
            mTop+=lineMaxHeight;
        }
    }

最终使用效果：

<com.song.lagoucustomizedview.FlowLayout 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=".MainActivity"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="#aa0000"
        android:text="Hello World!"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#aa0000"
        android:text="Android"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="1dp"
        android:background="#aa0000"
        android:text="Java"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#aa0000"
        android:text="Android Studio"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="#aa0000"
        android:text="ViewGroup"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="#aa0000"
        android:text="GoodBye"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#aa0000"
        android:text="Layout"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:background="#aa0000"
        android:text="Variable"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#aa0000"
        android:text="Hello World!"
        android:textSize="20sp" />

</com.song.lagoucustomizedview.FlowLayout>