自定义控件对每个android程序猿来说是一项必须掌握的一项技巧，在工作中难免遇到一些特殊的自定义控件，如果基础知识不扎实，是一件非常崩溃的一件事，一大堆的网上资料复制黏贴。。。。接下来为了巩固一下知识和大家一起进行一次愉快的自定义控件旅行……└(o)┘(老司机可以绕道哈)
</br>
一、继承View,重写onDraw()方法；
@先看一下官方文档对View的介绍：
View这个类代表用户界面组件的基本构建块。View在屏幕上占据一个矩形区域，并负责绘制和事件处理。View是用于创建交互式用户界面组件（按钮、文本等）的基础类。它的子类ViewGroup是所有布局的父类，它是一个可以包含其他view或者viewGroup并定义它们的布局属性的看不见的容器。
@了解View类中一些重要的方法的使用时机
1、Constructors： （构造方法）
一种形式的构造方法是使用代码创建的时候调用的（new View()），另一种形式是View被布局文件填充时被调用；
2、onFinishInflate()：（当View和他的所有子控件被XML布局文件填充完成时被调用。）
这个方法里面可以完成一些初始化，比如初始化子控件；
3、onMeasure(int, int)：（当决定view和他的孩子的尺寸需求时被调用）
这个方法里面可以完成一些控件的测量；
4、onLayout(boolean, int, int, int, int):（当View给他的孩子分配大小和位置的时候调用）
这个方法用于摆放控件的位置；
5、onSizeChanged(int, int, int, int)：（当view大小发生变化时调用）
这个方法用于控件的尺寸发生变化进行变化后的赋值；
6、onDraw(Canvas canvas）:（当视图应该呈现其内容时调用）
这个方法主要用于绘制控件；
7、onAttachedToWindow():（当视图被连接到一个窗口时调用）
8、onDetachedFromWindow():（当视图从窗口分离时调用）
9、onWindowVisibilityChanged(int):（当View的窗口的可见性发生改变时调用）
了解这几个方法后，，自定义view的时候就可以在相应的方法里面进行操作了
@创建第一个自定义TextView
MyTextView继承View，发现报错，因为要覆盖他的构造方法（因为View中没有参数为空的构造方法），View有四种形式的构造方法，其中四个参数的构造方法是API 21才出现，所以一般我们只需要重写其他三个构造方法即可。它们的参数不一样分别对应不同的创建方式，比如只有一个Context参数的构造方法通常是通过代码初始化控件时使用；而两个参数的构造方法通常对应布局文件中控件被映射成对象时调用（需要解析属性）；通常我们让这两个构造方法最终调用三个参数的构造方法，然后在第三个构造方法中进行一些初始化操作（this()调用本地的方法）。
/**
* Created by Dengxiao on 2016/12/23.
*/
public class MyTextView extends View {
/**
* 定义TextView相关的三个属性（文字，颜色，大小）
*/
private String mTextStr;
private int mTextColor;
private int mTextSize;
/**
*绘制控制的区域和画笔
*/
private Rect mBound;
private Paint mPaint;
public MyTextView(Context context) {
this(context,null);
}
public MyTextView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//初始化字体的相关属性
mTextStr="hello world";
mTextColor= Color.YELLOW;
mTextSize=88;
//初始化画笔
mPaint=new Paint();
mPaint.setTextSize(mTextSize);
mPaint.setColor(mTextColor);
//获取绘制文本的宽和高
mBound =new Rect();
mPaint.getTextBounds(mTextStr,0,mTextStr.length(),mBound);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制文本参数 计算x、y轴的起始坐标
int xStart = getWidth() / 2 - mBound.width() / 2;
int yStart = getHeight()/2+mBound.height()/2;
canvas.drawText(mTextStr,xStart,yStart,mPaint);
}
}
布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.dengxiao.customviewone.MainActivity">
<com.dengxiao.customviewone.MyTextView
android:layout_width="200dp"
android:layout_height="100dp"
android:background="#f00"
/>
</RelativeLayout>
运行结果：
QQ图片20161223115009.png
是不是叼炸天了，，一个View就实现了TextView，如果要绘制其他文字，比如写个happy，不想再MyTextView中修改mTextStr,为了方便想要在布局文件中直接更改文字，这时候就用到了新的知识点：自定义属性。
二、自定义属性：
在res/values/下创建一个名为attrs.xml的文件，然后定义如下属性：（属性详解看下一篇Android自定义View二（深入了解自定义属性））
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyTextView">
<attr name="mTextStr" format="string"/>
<attr name="mTextColor" format="color"/>
<attr name="mTextSize" format="dimension"/>
</declare-styleable>
</resources>
然后再布局中使用自定义属性，记得一定要添加xmlns:app="http://schemas.android.com/apk/res-auto"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.dengxiao.customviewone.MainActivity">
<com.dengxiao.customviewone.MyTextView
android:layout_width="200dp"
android:layout_height="100dp"
android:background="#f00"
app:mTextStr="happy"
app:mTextColor="@color/colorPrimaryDark"
app:mTextSize="15sp"
/>
</RelativeLayout>
在构造方法中获取自定义属性值
public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
/* //初始化字体的相关属性
mTextStr = "hello";
mTextColor = Color.YELLOW;
mTextSize = 88;*/
//获取自定义属性值
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyTextView, defStyleAttr, 0);
mTextStr= typedArray.getString(R.styleable.MyTextView_mTextStr);
mTextColor=typedArray.getColor(R.styleable.MyTextView_mTextColor,Color.BLACK);
mTextSize=typedArray.getDimension(R.styleable.MyTextView_mTextSize,88);
//初始化画笔
mPaint = new Paint();
mPaint.setTextSize(mTextSize);
mPaint.setColor(mTextColor);
//获取绘制文本的宽和高
mBound = new Rect();
mPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mBound);
}
运行结果
QQ图片20161223140603.png
完美实现MyTextView的自定义属性，，简单吧！！！！好吧，接下来让做点小变化，，多绘制一点文本app:mTextStr="Immediately to Christmas"运行结果
QQ图片20161223141540.png
什么鬼？？？？没有像TextView控件那样自动换行!控件太小，不足以显示辣么长的文本，我们将宽高改为wrap_content试试：
QQ图片20161223141949.png
这又是什么鬼？？？不是wrap_content包裹控件么？？怎么就填充了屏幕？？感觉很奇葩吧！不着急，，下面介绍这个方法onMeasuer(),,了解了它，你就会明白其中的原理
三、onMeasure()方法：
在学习onMasure方法之前，我们要先了解他的参数中的一个类MeasureSpec，知己知彼才能百战百胜 。 跟踪一下源码，发现它是View中的一个静态内部类，是由尺寸和模式组合而成的一个值，用来描述父控件对子控件尺寸的约束，看看他的部分源码，一共有三种模式，然后提供了合成和分解的方法：
1、MeasureSpec:
/**
* measurespec封装了父控件对他的孩子的布局要求。
* 一个measurespec由大小和模式。有三种可能的模式：
*/
public static class MeasureSpec {
private static final int MODE_SHIFT = 30;
private static final int MODE_MASK = 0x3 << MODE_SHIFT;
//父控件不强加任何约束给子控件，它可以是它想要任何大小。
public static final int UNSPECIFIED = 0 << MODE_SHIFT; //0
//父控件决定给孩子一个精确的尺寸
public static final int EXACTLY = 1 << MODE_SHIFT; //1073741824
//父控件会给子控件尽可能大的尺寸
public static final int AT_MOST = 2 << MODE_SHIFT; //-2147483648
/**
* 根据给定的尺寸和模式创建一个约束规范
*/
public static int makeMeasureSpec(int size, int mode) {
if (sUseZeroUnspecifiedMeasureSpec && mode == UNSPECIFIED) {
return 0;
}
return makeMeasureSpec(size, mode);
}
/**
* 从约束规范中获取模式
*/
public static int getMode(int measureSpec) {
return (measureSpec & MODE_MASK);
}
/**
* 从约束规范中获取尺寸
*/
public static int getSize(int measureSpec) {
return (measureSpec & ~MODE_MASK);
}
}
这样说起来还是有点抽象，举一个小栗子大家就知道这三种约束到底是什么意思。重写自定义View的onMeasure方法中打印一下他的参数（int widthMeasureSpec, int heightMeasureSpec）到底是个什么鬼**onMeasure方法会走多次，主要还是看第一次的测量效果
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);//获取宽的模式
int heightMode = MeasureSpec.getMode(heightMeasureSpec);//获取高的模式
int widthSize = MeasureSpec.getSize(widthMeasureSpec);//获取宽的尺寸
int heightSize = MeasureSpec.getSize(heightMeasureSpec);//获取高的尺寸
Log.d("DX", "UNSPECIFIED== 0(控件不强加任何约束给子控件，它可以是它想要任何大小)");
Log.d("DX", "EXACTLY == 1073741824(父控件决定给孩子一个精确的尺寸)");
Log.d("DX", "AT_MOST == -2147483648(父控件会给子控件尽可能大的尺寸)");
Log.d("DX", "宽的模式：" + widthMode);
Log.d("DX", "高的模式：" + heightMode);
Log.d("DX", "宽的尺寸：" + widthSize);
Log.d("DX", "高的尺寸：" + heightSize);
}
情形1，让按钮包裹内容:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.dengxiao.customviewone.MainActivity">
<com.dengxiao.customviewone.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f00"
app:mTextStr="Immediately to Christmas"
app:mTextColor="@color/colorPrimaryDark"
app:mTextSize="20sp"
/>
</RelativeLayout>
Log打印(会进行多次测量，看第一次测量内容就可以了)
DX: UNSPECIFIED== 0(控件不强加任何约束给子控件，它可以是它想要任何大小)
DX: EXACTLY == 1073741824(父控件决定给孩子一个精确的尺寸)
DX: AT_MOST == -2147483648(父控件会给子控件尽可能大的尺寸)
DX: 宽的模式：-2147483648
DX: 高的模式：-2147483648
DX: 宽的尺寸：1080
DX: 高的尺寸：1458
以上可以看出在包裹内容的时候高和宽的模式是（父控件会给子控件尽可能大的尺寸）
可以理解上面（不是wrap_content包裹控件么？？怎么就填充了屏幕？？）
情形2，让按钮充满父控件:
<com.dengxiao.customviewone.MyTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f00"
app:mTextStr="Immediately to Christmas"
app:mTextColor="@color/colorPrimaryDark"
app:mTextSize="20sp"
/>
Log打印(会进行多次测量，看第一次测量内容就可以了)
DX: UNSPECIFIED== 0(控件不强加任何约束给子控件，它可以是它想要任何大小)
DX: EXACTLY == 1073741824(父控件决定给孩子一个精确的尺寸)
DX: AT_MOST == -2147483648(父控件会给子控件尽可能大的尺寸)
DX: 宽的模式：1073741824
DX: 高的模式：1073741824
DX: 宽的尺寸：1080
DX: 高的尺寸：1458
以上可以看出在充满内容的时候高和宽的模式是（父控件决定给孩子一个精确的尺寸）
情形3，给按钮的宽设置具体值：
<com.dengxiao.customviewone.MyTextView
android:layout_width="200dip"
android:layout_height="wrap_content"
android:background="#f00"
app:mTextStr="Immediately to Christmas"
app:mTextColor="@color/colorPrimaryDark"
app:mTextSize="20sp"
/>
Log打印(会进行多次测量，看第一次测量内容就可以了)
DX: UNSPECIFIED== 0(控件不强加任何约束给子控件，它可以是它想要任何大小)
DX: EXACTLY == 1073741824(父控件决定给孩子一个精确的尺寸)
DX: AT_MOST == -2147483648(父控件会给子控件尽可能大的尺寸)
DX: 宽的模式：1073741824
DX: 高的模式：-2147483648
DX: 宽的尺寸：525
DX: 高的尺寸：1458
以上可以看出在给控件一个固定宽度的时候宽的模式是（父控件决定给孩子一个精确的尺寸）
通过分析以上三次Log日志，，可以看出在控件包裹的时候的模式是AT_MOST （父控件会给子控件尽可能大的尺寸） ，控件充满的时候调用的模式是EXACTLY（父控件决定给孩子一个精确的尺寸）最后得到宽的尺寸是一样的，，有点难以理解，，看下面
通过上面对MeasureSpec的了解，我们现在就有能看懂View的onMeasure方法默认是怎样为控件测量大小的了 看View中onMeasure的源码：
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}
public static int getDefaultSize(int size, int measureSpec) {
int result = size;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
case MeasureSpec.UNSPECIFIED:
result = size;
break;
case MeasureSpec.AT_MOST://这里----
case MeasureSpec.EXACTLY://这里----
result = specSize;
break;
}
return result;
}
根据父控件给予的约束（看上面源码中----），发现AT_MOST （相当于wrap_content ）和EXACTLY （相当于match_parent ）两种情况返回的测量宽高都是specSize，而这个specSize正是我们上面说的父控件剩余的宽高，所以默认onMeasure方法中wrap_content 和match_parent 的效果是一样的，都是填充剩余的空间。这下就明白原理了吧！！这个怎么解决呢看下面
2、重写onMeasure()，我们先忽略掉UNSPECIFIED 的情况（使用极少），只考虑AT_MOST 和EXACTLY 这两种情况;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);//获取宽的模式
int heightMode = MeasureSpec.getMode(heightMeasureSpec);//获取高的模式
int widthSize = MeasureSpec.getSize(widthMeasureSpec);//获取宽的尺寸
int heightSize = MeasureSpec.getSize(heightMeasureSpec);//获取高的尺寸
Log.d("DX", "UNSPECIFIED== 0(控件不强加任何约束给子控件，它可以是它想要任何大小)");
Log.d("DX", "EXACTLY == 1073741824(父控件决定给孩子一个精确的尺寸)");
Log.d("DX", "AT_MOST == -2147483648(父控件会给子控件尽可能大的尺寸)");
Log.d("DX", "宽的模式：" + widthMode);
Log.d("DX", "高的模式：" + heightMode);
Log.d("DX", "宽的尺寸：" + widthSize);
Log.d("DX", "高的尺寸：" + heightSize);
int width;
int height;
//根据宽的模式进行判断并复制
if (widthMode == MeasureSpec.EXACTLY) {
//EXACTLY如果match_parent或者具体的值，直接赋值
width = widthSize;
} else {
//AT_MOST得到控件需要多大的尺寸
float viewWidth = mBound.width();//文本的宽带
//控件的宽度就是文本的宽度加上两边的内边距。内边距就是padding值，在构造方法执行完就被赋值
width = (int) (getPaddingLeft() + viewWidth + getPaddingRight());
}
//高度跟宽度的处理方式一样
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
float textHeight = mBound.height();
height = (int) (getPaddingTop() + textHeight + getPaddingBottom());
}
//保存测量宽度和测量高度
setMeasuredDimension(width, height);
}
让后将布局文件设置成wrap_content后运行结果
QQ图片20170119152122.png
问题完美解决！！！如果文字超过一行内容会怎么办？？验证一下。布局文件：
<com.dengxiao.customviewone.MyTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f00"
android:padding="10dp"
app:mTextStr="北风卷地白草折，胡天八月即飞雪.hao忽如一夜春风来，千树万树梨花开。"
app:mTextColor="@color/colorPrimaryDark"
app:mTextSize="25sp"
/>
运行结果
QQ图片20170119153748.png
真如想象中的，，显示不全，，怎么办，想想肯定是测量出现了问题，在onMeasure中高度出现了问题，既然知道的问题的来源就好办了，，只需要在测量的时候，根据文字的总长度和控件的宽度，就可以知道需要绘制几行，然后将文本分割成小段放入集合中，在onDraw方法中分别绘制；
4、自动换行（以下代码仅供参考）
/**
* Created by Dengxiao on 2016/12/23.
*/
public class MyTextView extends View {
private int textHeight;
/**
* 定义TextView相关的三个属性（文字，颜色，大小）
*/
private String mTextStr;
private int mTextColor;
private float mTextSize;
private ArrayList<String> mTextList;
/**
* 绘制控制的区域和画笔
*/
private Rect mBound;
private Paint mPaint;
public MyTextView(Context context) {
this(context, null);
}
public MyTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
/* //初始化字体的相关属性
mTextStr = "hello";
mTextColor = Color.YELLOW;
mTextSize = 88;*/
//获取自定义属性值
mTextList = new ArrayList<>();
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyTextView, defStyleAttr, 0);
mTextStr = typedArray.getString(R.styleable.MyTextView_mTextStr);
mTextColor = typedArray.getColor(R.styleable.MyTextView_mTextColor, Color.BLACK);
mTextSize = typedArray.getDimension(R.styleable.MyTextView_mTextSize, 88);
//初始化画笔
mPaint = new Paint();
mPaint.setTextSize(mTextSize);
mPaint.setColor(mTextColor);
//获取绘制文本的宽和高
mBound = new Rect();
mPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mBound);
/* Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
textHeight = (int) (Math.ceil(fontMetrics.descent -fontMetrics.ascent));*/
textHeight = mBound.height();
typedArray .recycle()
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/* //单行绘制文本参数 计算x、y轴的起始坐标
int xStart = getWidth() / 2 - mBound.width() / 2;
int yStart = getHeight() / 2 + mBound.height() / 2;
canvas.drawText(mTextStr, xStart, yStart, mPaint);*/
for (int i = 0; i < mTextList.size(); i++) {
mPaint.getTextBounds(mTextList.get(i), 0, mTextList.get(i).length(), mBound);
Log.v("DX", "mBound.h:" + mBound.height());
Log.v("DX", "在X:" + (getWidth() / 2 - mBound.width() / 2) + " Y:" + (getPaddingTop() + (textHeight * (i + 1)) + " 绘制：" + mTextList.get(i)));
canvas.drawText(mTextList.get(i), (getWidth() / 2 - mBound.width() / 2), (getPaddingTop() + (textHeight * (i + 1))), mPaint);
}
}
boolean isOneLine = true;//如果是一行为true
int lineNum;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);//获取宽的模式
int heightMode = MeasureSpec.getMode(heightMeasureSpec);//获取高的模式
int widthSize = MeasureSpec.getSize(widthMeasureSpec);//获取宽的尺寸
int heightSize = MeasureSpec.getSize(heightMeasureSpec);//获取高的尺寸
Log.d("DX", "UNSPECIFIED== 0(控件不强加任何约束给子控件，它可以是它想要任何大小)");
Log.d("DX", "EXACTLY == 1073741824(父控件决定给孩子一个精确的尺寸)");
Log.d("DX", "AT_MOST == -2147483648(父控件会给子控件尽可能大的尺寸)");
Log.d("DX", "宽的模式：" + widthMode);
Log.d("DX", "高的模式：" + heightMode);
Log.d("DX", "宽的尺寸：" + widthSize);
Log.d("DX", "高的尺寸：" + heightSize);
float viewWidth = mBound.width();//文本的宽带
int width;
int height;
if (mTextList.size() == 0) {
//计算文本的宽度
int padding = getPaddingLeft() + getPaddingRight();
int maxWidth = widthSize - padding;//文本显示的最大宽带（屏幕宽度-文本左右内边距）
if (viewWidth < maxWidth) {
lineNum = 1;
mTextList.add(mTextStr);
} else {
//文本超过了一行
isOneLine = false;
//计算行数
float lineCount = viewWidth / maxWidth;
String s1 = String.valueOf(lineCount);
if (s1.contains(".")) {
lineNum = Integer.parseInt(s1.substring(0, s1.indexOf("."))) + 1;
} else {
lineNum = Integer.parseInt(lineCount + "");
}
int lineLenght = mTextStr.length() / lineNum;
for (int i = 0; i < lineNum; i++) {
String lineStr;
if (mTextStr.length() <= lineLenght) {
lineStr = mTextStr.substring(0, mTextStr.length());
} else {
lineStr = mTextStr.substring(0, lineLenght);
}
mTextList.add(lineStr);
if (!TextUtils.isEmpty(mTextStr)) {
if (mTextStr.length() <= lineLenght) {
mTextStr = mTextStr.substring(0, mTextStr.length());
} else {
mTextStr = mTextStr.substring(lineLenght, mTextStr.length());
}
} else {
break;
}
}
}
}
//根据宽的模式进行判断并复制
if (widthMode == MeasureSpec.EXACTLY) {
//EXACTLY如果match_parent或者具体的值，直接赋值
width = widthSize;
} else {
//AT_MOST得到控件需要多大的尺寸 如果是多行，说明控件宽度应该填充父窗体
width = isOneLine ? (int) (getPaddingLeft() + viewWidth + getPaddingRight()) : widthSize;
}
//高度跟宽度的处理方式一样
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
// float textHeight = mBound.height();这样设置高度有偏差
int lineHeight = (getPaddingTop() + textHeight +4+ getPaddingBottom());
int allHeight = (getPaddingTop() +( textHeight +4)* lineNum + getPaddingBottom());
height = isOneLine ? lineHeight : allHeight;
;
}
//保存测量宽度和测量高度
setMeasuredDimension(width, height);
}
}
运行结果
QQ图片20170120143405.png
网友评论