自定义View | 基础概述 & 自定义TextView实战 & 基于源码分析自定义View继承自ViewGroup时无法正常绘制的问题

2020-08-31 12:41:34 浏览数 (1)
  • 部分描述见注释 项目源码：点击前往

三个自定义构造函数的调用时机

代码语言：javascript复制
public class TextView extends View {

    //这个构造函数 会在代码里面 new的时候 调用
    //TextView textView = new TextView(this);
    public TextView(Context context) {
        super(context);
    }

    //这个构造函数 在布局layout中使用时候 调用
//    <com.lwp.customviewtest.CustomViews.TextView
//    android:layout_width="wrap_content"
//    android:layout_height="wrap_content" />
    public TextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //这个构造函数 在布局layout中使用 并且有style的时候 调用
    // 【Refactor -- Extract -- style】
//    <com.lwp.customviewtest.CustomViews.TextView
//    android:text="6666666666666666666"
//    style="@style/cstyle" />
//   style可以提取重复的属性
    public TextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}
  • style.xml
代码语言：javascript复制
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
    </style>

    <style name="cstyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/colorPrimaryDark</item>
    </style>

</resources>

onMeasure()简述

测量模式
  • UNSPECIFIED ：任意大，尽可能大，一般开发中少用 如ListView，RecyclerView，ScrollView测量子View的时候 给的就是UNSPECIFIED；
  • EXACTLY ：一个确定的值， 比如在布局中写的 layout_width="666dp","match_parent","fill_parent"；
  • AT_MOST：包裹内容，比如在布局中写的layout_width="wrap_content"。
  • 获取：MeasureSpec.getMode()
代码语言：javascript复制
@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        //获取宽高的模式 widthMeasureSpec的前两位
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        
        //获取宽高的值 widthMeasureSpec的后30位
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    }
  • widthMeasureSpec、heightMeasureSpec 是32位的值， 前面2位是模式， 后面30位是值；
  • 源码：
代码语言：javascript复制
        /**
         * Measure specification mode: The parent has not imposed any constraint
         * on the child. It can be whatever size it wants.
         */
        public static final int UNSPECIFIED = 0 << MODE_SHIFT;

        /**
         * Measure specification mode: The parent has determined an exact size
         * for the child. The child is going to be given those bounds regardless
         * of how big it wants to be.
         */
        public static final int EXACTLY     = 1 << MODE_SHIFT;

        /**
         * Measure specification mode: The child can be as large as it wants up
         * to the specified size.
         */
        public static final int AT_MOST     = 2 << MODE_SHIFT;

onDraw()简述

主要用来绘制效果，利用参数canvas就可以画各式各样的效果；

代码语言：javascript复制
    @Override
    protected void onDraw(Canvas canvas) {
        // 画圆
        canvas.drawCircle();
        // 画bitmap
        canvas.drawBitmap();
        // 画文本
        canvas.drawText();
        // ......
    }

onTouch()方法简述

用来处理触摸事件与用户进行交互;

代码语言：javascript复制
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                Log.e(TAG,"ACTION_DOWN");
                break;
            case MotionEvent.ACTION_MOVE:
                Log.e(TAG,"ACTION_MOVE");
                break;
            case MotionEvent.ACTION_UP:
                Log.e(TAG,"ACTION_UP");
                break;
        }
        return super.onTouchEvent(event);
    }

自定义属性

  • android:layout_width=""等，是系统的自定义属性；
  • 在res下的values目录下新建一个attrs.xml文件： 【系统已经定义的属性，不能重新自定义（注意自定义属性的命名）】
代码语言：javascript复制
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--name 最好是自定义View的名字 TextView-->
    <declare-styleable name="TextView">
        <!--name 是名称，format是格式  color（颜色），string（文本），
        dimension（sp,dp）【宽高、字体大小】 integer 数字
        reference 资源（Drawable）-->
        <attr name="lwpTextColor" format="color"/>
        <attr name="lwpText" format="string"/>
        <attr name="lwpTextSize" format="dimension"/>
        <attr name="lwpMaxLength" format="integer"/>

        <!--Background由View控制-->
        <!--<attr name="lwpBackground" format="reference|color"/>-->

        <!--枚举 外部写入的值是 number、text等 枚举量，
        自定义View逻辑收到的是 1、2等实际的值-->
        <attr name="lwpInputType">
            <enum name="number" value="1"/>
            <enum name="text" value="2"/>
            <enum name="password" value="3"/>
        </attr>
    </declare-styleable>
</resources>
  • 在布局文件中使用： 首先需要写入命名空间xmlns:app="http://schemas.android.com/apk/res-auto"
代码语言：javascript复制
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@ id/ll_nextParent"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.lwp.customviewtest.CustomViews.TextView
        // app: 自定义属性
        app:lwpText="自定义文本"
        app:lwpTextColor="@color/colorAccent"
        app:lwpTextSize="18sp"
        // android: 系统自带的属性
        android:text="6666666666666666666"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <!--<com.lwp.customviewtest.CustomViews.TextView-->
        <!--android:text="6666666666666666666"-->
        <!--style="@style/cstyle" />-->
    <!--<com.lwp.customviewtest.CustomViews.TextView-->
        <!--android:text="6666666666666666666"-->
        <!--style="@style/cstyle" />-->

</LinearLayout>
  • 在Java逻辑中，编写自定义View的逻辑：

【注意三个构造函数的调用技巧， 把前两个改成this，使得始终调用第三个构造函数】 【有时候可能会找不到我们自定义的属性 如TextView_lwpMaxLength， 这个时候Rebuild一下，或者重启AS即可】

代码语言：javascript复制
    private String mText;
    private int mTextSize = 15;
    private int mTextColor = Color.BLACK;

    //这个构造函数 会在代码里面 new的时候 调用
    //TextView textView = new TextView(this);
    public TextView(Context context) {
        this(context,null);
    }

    //这个构造函数 在布局layout中使用时候 调用
//    <com.lwp.customviewtest.CustomViews.TextView
//    android:layout_width="wrap_content"
//    android:layout_height="wrap_content" />
    public TextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // 获取自定义属性列表 TypedArray
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.TextView);
        // 获取文本 
        mText = (String) typedArray.getText(R.styleable.TextView_lwpText);
        // 获取文字颜色
        mTextColor = typedArray.getColor(R.styleable.TextView_lwpTextColor, mTextColor);
        // 获取文字大小
        mTextSize = typedArray.getDimensionPixelSize(R.styleable.TextView_lwpTextSize, mTextSize);

        // 回收
        typedArray.recycle();
    }

其中的TextSize要选用get方法的时候：

我们可以通过读TextView 的原生源码而知：

完善onMeasure()

代码语言：javascript复制
    /**
     * 自定义View的测量方法
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //布局的 宽高 都是由这个方法指定
        //指定控件的宽高 需要测量

        //获取宽高的模式 widthMeasureSpec的前两位
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //1.确定的值，这个时候 不需要计算，给的多少就是多少
        //获取宽高的值 widthMeasureSpec的后30位
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);


        //2.给的是wrap_content，需要计算
        if (widthMode == MeasureSpec.AT_MOST) {
            //计算的宽度 与 字体的长度、大小 有关  用画笔来测量
            Rect bounds = new Rect();
            //获取文本的 Rect
            mPaint.getTextBounds(mText, 0, mText.length(), bounds);
            //拿到文本的宽度
            widthSize = bounds.width()   getPaddingLeft()   getPaddingRight();
        }
        if (heightMode == MeasureSpec.AT_MOST) {

            int x = getPaddingLeft();
            //计算的宽度 与 字体的长度、大小 有关  用画笔来测量
            Rect bounds = new Rect();
            //获取文本的 Rect
            mPaint.getTextBounds(mText, x, mText.length(), bounds);
            //拿到文本的高度
            heightSize = bounds.height()   getPaddingTop()   getPaddingBottom();
        }

        //设置控件的宽高
        setMeasuredDimension(widthSize, heightSize);
    }

完善onDraw()

计算文字基线

  • Baseline到字体的下边缘线为descent； Baseline到字体的上边缘线为ascent
  • f.bottom = bottom - baseline（文字底部到基线的距离，正值） f.top = top - baseline（文字顶部到基线的距离，负值） f.bottom - f.top = bottom - baseline - （top-baseline）= bottom - top

（f.bottom - f.top）/ 2 = View的一半高度（文字底部到View中线的距离） getHeight()是View的一半高度的位置的y坐标； dy = (f.bottom - f.top)/ 2 - f.bottom （基线与View中线间的距离）

  • 基线位置的y坐标``baseline = getHeight() / 2 dy;
  • Baseline的定义（以及关于一个TextView的所有属性）
代码语言：javascript复制
        //***********************************计算基线************************************
        //画文字 四个参数：text内容  x  y  paint画笔
        //x 开始的位置 0   y 基线
        //dy 代表的是：高度的一半到 baseline的距离
        Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();
        int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
        int baseline = getHeight() / 2   dy;
        //*******************************************************************************
代码语言：javascript复制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //***********************************计算基线************************************
        //画文字 四个参数：text内容  x  y  paint画笔
        //x 开始的位置 0   y 基线
        //dy 代表的是：高度的一半到 baseline的距离
        Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();
        int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
        int baseline = getHeight() / 2   dy;
        //*******************************************************************************

//        canvas.drawText(mText, 0, getHeight() / 2, mPaint);
        canvas.drawText(mText, 0, baseline, mPaint);
    }

一个问题——ViewGroup默认不会触发onDraw()方法

  • background不是用onDraw()画的
  • View的draw()源码： 这里边有6个Step，可以去具体看一下，这里就大体点一下：
代码语言：javascript复制
public void draw(Canvas canvas) {
....
        // Step 1, draw the background, if needed
        int saveCount;

        if (!dirtyOpaque) {
            drawBackground(canvas);
        }
...
        // Step 3, draw the content
        if (!dirtyOpaque) onDraw(canvas);

        // Step 4, draw the children
        dispatchDraw(canvas);
...
        // Step 6, draw decorations (foreground, scrollbars)
        onDrawForeground(canvas);
...
}

应该是说——ViewGroup默认没有设置背景时不会画出来（调用onDraw()），下面究其原因

我们自定义TextView的时候是extends View去做的， 如果extends LinearLayout等ViewGroup、 且没有设置自定义TextView的background的话，【有background还是可以绘制】 自定义TextView就无法正常绘制【不会调用onDraw()方法】；

  • 由下面源码， // Step 3, draw the content if (!dirtyOpaque) onDraw(canvas); 可知dirtyOpaque需为false，才会调用onDraw()；
  • 而final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE && (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState); dirtyOpaque又 由privateFlags、PFLAG_DIRTY_MASK、PFLAG_DIRTY_OPAQUE、mAttachInfo、mAttachInfo.mIgnoreDirtyState等决定；
  • 首先，privateFlags; 源码中：final int privateFlags = mPrivateFlags; 找到源码中View的构造方法：

View的构造方法中，最后一行调用了computeOpaqueFlags()：

代码语言：javascript复制
    /**
     * @hide
     */
    protected void computeOpaqueFlags() {
        // Opaque if:
        //   - Has a background  
        //   - Background is opaque  Background 不透明
        //   - Doesn't have scrollbars or scrollbars overlay

        if (mBackground != null && mBackground.getOpacity() == PixelFormat.OPAQUE) {
            mPrivateFlags |= PFLAG_OPAQUE_BACKGROUND;
        } else {
            mPrivateFlags &= ~PFLAG_OPAQUE_BACKGROUND;
        }

        final int flags = mViewFlags;
        if (((flags & SCROLLBARS_VERTICAL) == 0 && (flags & SCROLLBARS_HORIZONTAL) == 0) ||
                (flags & SCROLLBARS_STYLE_MASK) == SCROLLBARS_INSIDE_OVERLAY ||
                (flags & SCROLLBARS_STYLE_MASK) == SCROLLBARS_OUTSIDE_OVERLAY) {
            mPrivateFlags |= PFLAG_OPAQUE_SCROLLBARS;
        } else {
            mPrivateFlags &= ~PFLAG_OPAQUE_SCROLLBARS;
        }
    }

注意，if (mBackground != null...)， 是否有Background直接影响到ViewGroup能不能显示；

  • ViewGroup源码中， 构造方法调用了initViewGroup()，initViewGroup()调用了setFlags()：
代码语言：javascript复制
    public ViewGroup(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);

        initViewGroup();
        initFromAttributes(context, attrs, defStyleAttr, defStyleRes);
    }

    private void initViewGroup() {
        // ViewGroup doesn't draw by default
        if (!debugDraw()) {
            setFlags(WILL_NOT_DRAW, DRAW_MASK);
        }
...
    }

setFlags(WILL_NOT_DRAW, DRAW_MASK);会对mPrivateFlags根据情况重新计算并赋值， WILL_NOT_DRAW，默认什么都不画了！！！！！！ 最后连锁反应不会调用到onDraw()；

  • 但是如果background有，不为空的时候， 则会调用到View的setBackgroundDrawable()方法：
代码语言：javascript复制
@Deprecated
    public void setBackgroundDrawable(Drawable background) {
        computeOpaqueFlags();

...

            if ((mPrivateFlags & PFLAG_SKIP_DRAW) != 0) {
                mPrivateFlags &= ~PFLAG_SKIP_DRAW;
               ...
            }
        } else {
           ...
            if ((mViewFlags & WILL_NOT_DRAW) != 0
                    && (mDefaultFocusHighlight == null)
                    && (mForegroundInfo == null || mForegroundInfo.mDrawable == null)) {
                mPrivateFlags |= PFLAG_SKIP_DRAW;
            }

...

        computeOpaqueFlags();
...

        mBackgroundSizeChanged = true;
        invalidate(true);
        invalidateOutline();
    }

其中调用了两次computeOpaqueFlags()； 重新计算了相关的Flags； 并调用invalidate(true);重绘； 使得ViewGroup得以显示；

解决问题——使得ViewGroup没有设置背景也能正常画出来

  • 思路1 —— 绕过条件： 把自定义TextView的onDraw()改成dispatchDraw() 【由View的draw()源码， 可知drawBackground(canvas);、onDraw(canvas);是否会执行， 是受if条件(!dirtyOpaque)控制的； 而dispatchDraw(canvas);、onDrawForeground(canvas);不受if条件制约！】
代码语言：javascript复制
public class TextView extends LinearLayout {

...
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
...
        }

     ...
    }

...

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
       ...
    }
...
}
  • 思路2 —— 默认置位： 在自定义View的构造函数、或者其他方法中， 通过setBackgroundColor(Color.TRANSPARENT); 指定一个透明的背景或者其他默认的背景色即可；
  • 思路3 —— 从根源解决： 调用View的setWillNotDraw()， 即调用setWillNotDraw(false);，亦可解决； 因为setWillNotDraw()调用了setFlags()， 而setFlags()可以根据形参变动mPrivateFlags；【上面提到过】
代码语言：javascript复制
public void setWillNotDraw(boolean willNotDraw) {
        setFlags(willNotDraw ? WILL_NOT_DRAW : 0, DRAW_MASK);
    }

【ViewGroup源码中的initViewGroup中， 默认设置为setFlags(WILL_NOT_DRAW, DRAW_MASK);即不绘制， 所以这里只要调用一下setFlags(0, DRAW_MASK);即可】

最终自定义TextView代码
代码语言：javascript复制
public class TextView extends View {

    private String mText;
    private int mTextSize = 15;
    private int mTextColor = Color.BLACK;

    //写字用的画笔
    private Paint mPaint;

    //这个构造函数 会在代码里面 new的时候 调用
    //TextView textView = new TextView(this);
    public TextView(Context context) {
        this(context,null);
    }

    //这个构造函数 在布局layout中使用时候 调用
//    <com.lwp.customviewtest.CustomViews.TextView
//    android:layout_width="wrap_content"
//    android:layout_height="wrap_content" />
    public TextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    //这个构造函数 在布局layout中使用 并且有style的时候 调用
    // 【Refactor -- Extract -- style】
//    <com.lwp.customviewtest.CustomViews.TextView
//    android:text="6666666666666666666"
//    style="@style/cstyle" />
//   style可以提取重复的属性
    public TextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // 获取自定义属性列表 TypedArray
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.TextView);
        // 获取文本 有时候可能会找不到我们自定义的属性 如TextView_lwpMaxLength，这个时候Rebuild一下，或者重启AS即可
        mText = (String) typedArray.getText(R.styleable.TextView_lwpText);
        // 获取文字颜色
        mTextColor = typedArray.getColor(R.styleable.TextView_lwpTextColor, mTextColor);
        // 获取文字大小
        mTextSize = typedArray.getDimensionPixelSize(R.styleable.TextView_lwpTextSize, sp2px(mTextSize));

        // 回收
        typedArray.recycle();

        mPaint = new Paint();
        //抗锯齿 画的时候不会那么模糊
        mPaint.setAntiAlias(true);
        //设置 字体的大小和颜色！！
        mPaint.setTextSize(mTextSize);
        mPaint.setColor(mTextColor);
    }

    /**
     * 自定义View的测量方法
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //布局的 宽高 都是由这个方法指定
        //指定控件的宽高 需要测量

        //获取宽高的模式 widthMeasureSpec的前两位
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();

        //1.确定的值，这个时候 不需要计算，给的多少就是多少
        //获取宽高的值 widthMeasureSpec的后30位
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);


        //2.给的是wrap_content，需要计算
        if (widthMode == MeasureSpec.AT_MOST) {
            //计算的宽度 与 字体的长度、大小 有关  用画笔来测量
            Rect bounds = new Rect();
            //获取文本的 Rect
            mPaint.getTextBounds(mText, 0, mText.length(), bounds);
            //拿到文本的宽度
            widthSize = bounds.width()   getPaddingLeft()   getPaddingRight();
        }
        if (heightMode == MeasureSpec.AT_MOST) {

            int x = getPaddingLeft();
            //计算的宽度 与 字体的长度、大小 有关  用画笔来测量
            Rect bounds = new Rect();
            //获取文本的 Rect
            mPaint.getTextBounds(mText, x, mText.length(), bounds);
            //拿到文本的高度
            heightSize = bounds.height()   getPaddingTop()   getPaddingBottom() -
                    fontMetricsInt.ascent   fontMetricsInt.descent;
        }

        //设置控件的宽高
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //***********************************计算基线************************************
        //画文字 四个参数：text内容  x  y  paint画笔
        //x 开始的位置 0   y 基线
        //dy 代表的是：高度的一半到 baseline的距离
        Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();
        int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
        int baseline = getHeight() / 2   dy;
        //*******************************************************************************

//        canvas.drawText(mText, 0, getHeight() / 2, mPaint);
        canvas.drawText(mText, 0, baseline, mPaint);
    }

    //sp转px
    private int sp2px(int sp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, getResources().getDisplayMetrics());
    }
}

自定义View分类、注意事项

  • 参考自要点提炼|开发艺术之View
textview android canvas

0 人点赞