Android 自定义View之onMeasure、onLayout、onDraw
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>
如上布局所示,CustomTextView的父布局就是LinearLayout,那么在初始化时,CustomTextView的onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法,会收到父布局传过来的参数。每个参数都包含两部分信息,一是测量模式信息,另一部分是尺寸信息。我们通过以下方式可以分离出这两部分信息,另一个参数的信息提取也是类似的。
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
它的模式有三种:
- UNSPECIFIED:父布局没有任何限制(在自定义View不常用这个)
- EXACTLY:父布局已经确定了确切的尺寸
- AT_MOST:可以任意增长,直到指定确切的尺寸
自定义视图一般只需要关注后两种。
xml布局文件中android:layout_width
和android:layout_height
的取值情况:
- match_parent:占满整个父布局的宽或高,父布局的宽和高一定是先于子视图或子布局确定好的。
- 具体的数值,如300dp:那么这个更加不用说了,直接就指明了它的大小,这也是确定的。
- 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);
}
在自定义View中,只需要考虑padding的情况,不需要考虑margin的情况,因为margin是view与view之间的,属于外部关系,而padding是view内部,所以应当考虑在内,如:
mWidth = getPaddingLeft() + getPaddingRight() + widthSize;
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);
}
}
如上所示利用画布canvas的drawText方法将视图渲染出来。
drawText方法里有个坐标,一般来说者是取左上角的坐标,应该就会把文字显示完整,但是事实不是这样。对于drawText这个坐标来说:
- x:正在绘制的文本原点的x坐标
- y:正在绘制的文本基线(baseline)的y坐标
什么是基线呢,请看图:
从上图可以看出,基线就是文本的底部。那么如何获得这条基线的位置呢?就在这里:
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
Math.abs(fontMetrics.top);// baseline的位置
完整示例:
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>
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);
}
}
}
本文地址:https://blog.csdn.net/weixin_40763897/article/details/110508095
推荐阅读
-
Android自定义view Path 的高级用法之搜索按钮动画
-
android自定义view之模拟qq消息拖拽删除效果
-
Android自定义view Path 的高级用法之搜索按钮动画
-
Android进阶之绘制-自定义View完全掌握(二)
-
Android进阶之绘制-自定义View完全掌握(一)
-
Android进阶之绘制-自定义View完全掌握(三)
-
Android自定义View之RadioGroup实现跨多行显示
-
Android开发之自定义view实现通讯录列表A~Z字母提示效果【附demo源码下载】
-
android自定义view之模拟qq消息拖拽删除效果
-
Android自定义view之围棋动画效果的实现