Android 自定义View之onMeasure、onLayout、onDraw

华为云博客 技术博客 12581 26

android自定义View，相信大家都会了。因此我也不打算在这一篇文章中去展示如何自定义View。我想分享一下自定义View中onMeasure、onLayout、onDraw这几个方法中，我认为有趣的地方，尤其是onMeasure方法对视图的测量。

onMeasure:测量视图大小

首先，这个方法是用于测量我们的View的大小的。要用好这个方法，关键在于理解onMeasure(int widthMeasureSpec, int heightMeasureSpec)这个两个参数的含义和用法。
其实，我相信很多人都已经知道了这两个参数，每一个都包含了两方面的信息，一个是测量模式（mode）信息，另一个尺寸大小信息。我们通过重写onMeasure方法决定视图的宽和高。一般，自定义View都应该要重写这个方法。重写了这个方法onMeasure后，记得调用setMeasuredDimension(int, int)保存宽和高。

如下是我们自定义的CustomTextView在布局中的情况：

<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:wong="http://schemas.android.com/apk/res-auto" tools:context=".MainActivity"> <com.wong.customtextview.CustomTextView android:background="@android:color/holo_green_dark" android:layout_width="50dp" android:layout_height="wrap_content" android:padding="8dp" wong:custom_text="Hello world" app:custom_textSize="16" app:custom_textColor="@color/design_default_color_error" />

</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

如上布局所示，CustomTextView的父布局就是LinearLayout，那么在初始化时，CustomTextView的onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法，会收到父布局传过来的参数。每个参数都包含两部分信息，一是测量模式信息，另一部分是尺寸信息。我们通过以下方式可以分离出这两部分信息，另一个参数的信息提取也是类似的。

int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  • 1
  • 2

它的模式有三种：

  • UNSPECIFIED：父布局没有任何限制（在自定义View不常用这个）
  • EXACTLY：父布局已经确定了确切的尺寸
  • AT_MOST：可以任意增长，直到指定确切的尺寸

自定义视图一般只需要关注后两种。

xml布局文件中android:layout_width和android:layout_height的取值情况：

  1. match_parent：占满整个父布局的宽或高，父布局的宽和高一定是先于子视图或子布局确定好的。
  2. 具体的数值,如300dp：那么这个更加不用说了，直接就指明了它的大小，这也是确定的。
  3. wrap_content：内容多大，宽和高相应多大，反正是能够包裹住内容。但是我们的父布局根本不知道内容有多大，所以干脆就默认把整个父布局的宽高给过来了。这种情况正是我们最需要处理的。我们需要计算内容的大小，以决定视图的宽和高。

通过各个模式及xml布局的设值情况，我们不难发现:

  • match_parent、具体的数值,如300dp：属于EXACTLY测量模式
  • wrap_content：属于AT_MOST测量模式

例子：

 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 mWidth = 0; int mHeight = 0; switch (widthMode) { case MeasureSpec.AT_MOST: widthModeStr = "AT_MOST"; mWidth = getPaddingLeft() + getPaddingRight() + mTextBounds.width(); break; case MeasureSpec.EXACTLY: widthModeStr = "EXACTLY"; mWidth = getPaddingLeft() + getPaddingRight() + widthSize; break; default: throw new IllegalStateException("Unexpected value: " + widthMode); } switch (heightMode) { case MeasureSpec.AT_MOST: heightModeStr = "AT_MOST"; mHeight = getPaddingTop() + getPaddingBottom() + mTextBounds.height(); break; case MeasureSpec.EXACTLY: heightModeStr = "EXACTLY"; mHeight = getPaddingTop() + getPaddingBottom() + heightSize; break; default: throw new IllegalStateException("Unexpected value: " + heightMode); } setMeasuredDimension(mWidth, mHeight); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

在自定义View中，只需要考虑padding的情况，不需要考虑margin的情况，因为margin是view与view之间的，属于外部关系，而padding是view内部，所以应当考虑在内，如：

mWidth = getPaddingLeft() + getPaddingRight() + widthSize;
  • 1

onLayout：设置视图显示位置

在自定义View中，一般不需要重写这个方法，但有些情况需要重写，例如字幕滚动，那么就需要改变文字显示的位置，需要重写onLayout.

onDraw：将视图渲染出来

利用画布和画笔，把内容渲染出来。

 protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (!TextUtils.isEmpty(mText)) { Paint.FontMetrics fontMetrics = mPaint.getFontMetrics(); canvas.drawText(mText, getPaddingLeft(), Math.abs(fontMetrics.top)+(Integer)(getPaddingTop()/2), mPaint); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

如上所示利用画布canvas的drawText方法将视图渲染出来。

drawText方法里有个坐标，一般来说者是取左上角的坐标，应该就会把文字显示完整，但是事实不是这样。对于drawText这个坐标来说：

  • x：正在绘制的文本原点的x坐标
  • y：正在绘制的文本基线(baseline)的y坐标
    什么是基线呢，请看图：
    在这里插入图片描述
    从上图可以看出，基线就是文本的底部。那么如何获得这条基线的位置呢？就在这里：
 Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
 Math.abs(fontMetrics.top);// baseline的位置
  • 1
  • 2

完整示例：
style.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources> <declare-styleable name="CustomTextView"> <attr name="custom_text" format="string"/> <attr name="custom_textColor" format="color|reference"/> <attr name="custom_textSize" format="float"/> </declare-styleable>
</resources>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

CustomTextView.java:

package com.wong.customtextview;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.text.TextPaint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;

import androidx.annotation.Nullable;

public class CustomTextView extends View { private final Rect mTextBounds = new Rect(); private String mText; private TextPaint mPaint; private int mTextColor; private float mTextSize; public CustomTextView(Context context) { this(context, null); } public CustomTextView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public CustomTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); @SuppressLint("Recycle") TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomTextView); mText = a.getString(R.styleable.CustomTextView_custom_text); mTextColor = a.getColor(R.styleable.CustomTextView_custom_textColor, Color.BLACK); mTextSize = a.getFloat(R.styleable.CustomTextView_custom_textSize, 15); a.recycle(); float size = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, mTextSize, context.getResources().getDisplayMetrics()); mPaint = new TextPaint(); mPaint.setColor(mTextColor); mPaint.setAntiAlias(true); mPaint.setStrokeCap(Paint.Cap.ROUND); mPaint.setStrokeJoin(Paint.Join.ROUND); mPaint.setTextSize(size); if (!TextUtils.isEmpty(mText)) { mPaint.getTextBounds(mText, 0, mText.length(), mTextBounds); } } @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 mWidth = 0; int mHeight = 0; String widthModeStr; switch (widthMode) { case MeasureSpec.AT_MOST: widthModeStr = "AT_MOST"; mWidth = getPaddingLeft() + getPaddingRight() + mTextBounds.width(); break; case MeasureSpec.EXACTLY: widthModeStr = "EXACTLY"; mWidth = getPaddingLeft() + getPaddingRight() + widthSize; break; default: throw new IllegalStateException("Unexpected value: " + widthMode); } String heightModeStr; switch (heightMode) { case MeasureSpec.AT_MOST: heightModeStr = "AT_MOST"; mHeight = getPaddingTop() + getPaddingBottom() + mTextBounds.height(); break; case MeasureSpec.EXACTLY: heightModeStr = "EXACTLY"; mHeight = getPaddingTop() + getPaddingBottom() + heightSize; break; default: throw new IllegalStateException("Unexpected value: " + heightMode); } setMeasuredDimension(mWidth, mHeight); String str = "@widthMode#" + widthModeStr + ":" + widthSize + "@heightMode#" + heightModeStr + ":" + heightSize + "###" + getSuggestedMinimumHeight() + "##$" + getSuggestedMinimumWidth(); Log.d("尺寸", str); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (!TextUtils.isEmpty(mText)) { Paint.FontMetrics fontMetrics = mPaint.getFontMetrics(); canvas.drawText(mText, getPaddingLeft(), Math.abs(fontMetrics.top)+(Integer)(getPaddingTop()/2), mPaint); } }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/110508095

（完）