5源码的角度分析View

作者: 帝乙岩 | 来源:发表于2017-09-04 10:54 被阅读0次

内容：自定义view实现

自定义View

View的三大流程：测量流程measure，布局流程layout，绘制流程draw

自定义View的分类

分类标准不唯一

继承View重写onDraw方法
主要用于实现一些不规则效果，即这种效果不方便通过布局的组合方式来达到，往往需要静态或动态地显示一些不规则图形。这需要重写onDraw方法。采用这种方式需要自己支持wrap_content,并且padding也需要自己处理。
继承ViewGroup派生特殊的Layout
主要用于实现自定义布局，除LinearLayout、RelativeLayout、FrameLayout这几种系统的布局之外，重新定义一个新的布局，当某种效果看起来像几个view组合在一起的时候，可以采用这种方法来实现。这种方式稍微复杂些，需要合适的处理ViewGroup的测量、布局两个过程，并同时处理子元素的测量和布局过程。
继承特定的View（例TextView）
常见方法，一般用于扩展某种已有的View的功能，比如TextView,这种方法比较容易实现。不需要自己支持wrap_content和padding等。
继承特定的ViewGroup（例LinearLayout）
常见方法，当某种效果看起来像几个view组合在一起的时候，可以采用这种方法来实现。这种方法不需要自己处理ViewGroup的测量、布局。方法2与4的差别主要是2更接近View底层。

自定义View须知

自定义View的注意事项

让View支持wrap_content
因为直接继承View或ViewGroup的控件，如果不在onMeasure中对wrap_content做处理，当外界在布局中使用wrap_content时无法达到预期效果。
如果有必要，让你的View支持padding
因为直接继承View的控件，如果不在draw方法中处理padding，那么padding属性无效。直接继承ViewGroup的控件需要在onMeasure和onLayout中考虑padding和子元素的margin对其造成的影响，不然padding和子元素的margin会失效。
尽量不在View中使用Handler
因为View内部本身就提供了post系列方法，完全代替Handler的作用，除非很明确要使用Handler来发送消息。
View中如果有线程或者动画，需要及时停止，参考View#onDetachedFromWindow
当包含此View的Activity退出或者当前View被remove时，View的onDetachedFromWindow方法会被调用,当包含此View的Activity启动时，View的onAttachedToWindow方法会被调用。当View变的不可见时我们也需要停止线程和动画，不及时处理可能会造成内存泄漏。
View带有滑动嵌套情形时，需要处理好滑动冲突

自定义View示例

1.继承View重写onDraw方法
这个例子是绘制一个红心圆,代码：

public class CustomView extends View {
    private int mColor = Color.RED;
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

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

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

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

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

    private void init() {
        mPaint.setColor(mColor);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //进行绘制使wrap_content为200的宽高
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthSpecMode == MeasureSpec.AT_MOST
                && heightSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(200, 200);
        } else if (widthSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(200, heightSpecSize);
        } else if (heightSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(widthSpecSize, 200);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //这里对padding进行处理否则无效
        final int paddingLeft = getPaddingLeft();
        final int paddingRight = getPaddingRight();
        final int paddingTop = getPaddingTop();
        final int paddingBottom = getPaddingBottom();
        int width = getWidth() - paddingLeft - paddingRight;
        int height = getHeight() - paddingTop - paddingBottom;
        //取宽高的最小值绘制圆
        int radius = Math.min(width, height) / 2;
        canvas.drawCircle(paddingLeft + width / 2, paddingTop + height / 2,
                radius, mPaint);
    }

Activity中没有新增代码,布局代码

<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:background="#fff"
    android:orientation="vertical">

    <com.example.ceshiactivity.viewdemo.CustomView
        android:id="@+id/circleView1"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:background="#000000"
        android:padding="20dp"/>
</LinearLayout>

添加自定义属性

在values目录下创建自定义属性xml,比如attrs.xml(完整代码属性)

<resources>
    <!--声明自定义属性集合CircleView-->
    <declare-styleable name="CircleView">
        <!--定义属性名字及格式，还有其它格式这里不列举-->
        <attr name="circle_color" format="color" />
    </declare-styleable>
</resources>

在View的构造方法中解析自定义属性的值并做相应处理。本例解析circle_color属性

    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //加载自定义属性集合CircleView
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
        //解析CircleView集合中的circle_color属性，如果没有指定则记载默认色值红色
        mColor = a.getColor(R.styleable.CircleView_circle_color, Color.RED);
        //实现资源
        a.recycle();
        init();
    }

在布局文件中使用自定义属性(完整代码布局)

<?xml version="1.0" encoding="utf-8"?>
<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:background="#fff"
    android:orientation="vertical">

    <com.example.ceshiactivity.viewdemo.CustomView
        android:id="@+id/circleView1"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:background="#000000"
        app:circle_color="@color/orange"
        android:padding="20dp"/>
</LinearLayout>

注意：使用自定义属性，必须在布局文件中添加schemas声明：xmlns:app="http://schemas.android.com/apk/res-auto "。app是自定义属性前缀，可以换成其它名字，但是必须与布局中CircleView的自定义属性的前缀保持一致。也有按照如下方式声明schemas的：xmlns:app="http://schemas.android.com/apk/res/com.example.ceshiactivity "没有区别。
下面给出完整代码：

public class CustomView extends View {
    private int mColor = Color.RED;
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

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

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

    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //加载自定义属性集合CircleView
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
        //解析CircleView集合中的circle_color属性，如果没有指定则记载默认色值红色
        mColor = a.getColor(R.styleable.CircleView_circle_color, Color.RED);
        //实现资源
        a.recycle();
        init();
    }

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

    private void init() {
        mPaint.setColor(mColor);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //进行绘制使wrap_content为200的宽高
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthSpecMode == MeasureSpec.AT_MOST
                && heightSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(200, 200);
        } else if (widthSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(200, heightSpecSize);
        } else if (heightSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(widthSpecSize, 200);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //这里对padding进行处理否则无效
        final int paddingLeft = getPaddingLeft();
        final int paddingRight = getPaddingRight();
        final int paddingTop = getPaddingTop();
        final int paddingBottom = getPaddingBottom();
        int width = getWidth() - paddingLeft - paddingRight;
        int height = getHeight() - paddingTop - paddingBottom;
        //取宽高的最小值绘制圆
        int radius = Math.min(width, height) / 2;
        canvas.drawCircle(paddingLeft + width / 2, paddingTop + height / 2,
                radius, mPaint);
    }
}

效果图：

自定义view.jpg

2.继承ViewGroup派生特殊的Layout
使用滑动冲突的HorizontalScrollViewEx（外部拦截）类继承于ViewGroup，分析它的measure和layout过程。
注意：使用此种方法实现一个很规范的自定义View,是有一定的代价的，因为比较复杂，这里只完成主要功能。

看下measure的代码:

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measuredWidth = 0;
        int measuredHeight = 0;
        final int childCount = getChildCount();
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        int widthSpaceSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpaceSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        //判断是否有子元素如果没有则宽高设置为0
        if (childCount == 0) {
            setMeasuredDimension(0, 0);
        } else if (heightSpecMode == MeasureSpec.AT_MOST) {
            //判断高是否是wrap_content，是则高度就是第一个子元素的高度
            final View childView = getChildAt(0);
            measuredHeight = childView.getMeasuredHeight();
            setMeasuredDimension(widthSpaceSize, childView.getMeasuredHeight());
        } else if (widthSpecMode == MeasureSpec.AT_MOST) {
            //判断宽是否是wrap_content，是宽度取所有子元素的宽度之和
            final View childView = getChildAt(0);
            measuredWidth = childView.getMeasuredWidth() * childCount;
            setMeasuredDimension(measuredWidth, heightSpaceSize);
        } else {
            final View childView = getChildAt(0);
            measuredWidth = childView.getMeasuredWidth() * childCount;
            measuredHeight = childView.getMeasuredHeight();
            setMeasuredDimension(measuredWidth, measuredHeight);
        }
    }

以上代码不规范的地方：第一点没有子元素的时候不应该直接把宽高设置为0，而是应该根据LayoutParams中的宽高来做相应处理；第二点在测量HorizontalScrollViewEx的宽高时没有考虑到它的padding以及子元素的margin,这会影响到它的宽高。

看下onLayout方法

 protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childLeft = 0;
        final int childCount = getChildCount();
        mChildrenSize = childCount;
        //遍历所有子元素
        for (int i = 0; i < childCount; i++) {
            final View childView = getChildAt(i);
            //如果子元素不为gone，则通过layout方法放置在合适的位置上
            if (childView.getVisibility() != View.GONE) {
                final int childWidth = childView.getMeasuredWidth();
                mChildWidth = childWidth;
                childView.layout(childLeft, 0, childLeft + childWidth,
                        childView.getMeasuredHeight());
                childLeft += childWidth;
            }
        }
    }

不规范：放置子元素的过程没有考虑到它的padding以及子元素的margin。

自定义View的思想

首先掌握基本功，比如View的弹性滑动、滑动冲突、绘制原理，这些都是自定义View所必须的。
在面对新的自定义view时，要能够对其分类并选择合适的实现思路。
平时多积累自定义View相关经验，并逐渐做到融会贯通，通过这些慢慢提高自定义View的水平。

5源码的角度分析View

自定义View

自定义View的分类

自定义View须知

自定义View示例

自定义View的思想

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读