通过本文你可以了解到自定义View的知识，同时你可以学会如何写一个属于自己的View。同时希望能够通过这个例子重新学习下自定义View的知识。
Android 开发到一定程度的时候，可以独立开发一款App，一些基本的知识都有使用。这时候必须进行自我提高，深入的研究下Android的各个方面，不然也只能停留在初级程序员的层次，只能是一个码农啦！
自定义View是我们需要掌握的基本知识，在开发中一些需求使用系统内置的View不好实现，我们经常会自定义我们自己的View，同时在面试中经常被问到。下面我们就通过一个带有底部标题的自定义ImageView来学习下自定义View。
先看看效果图(效果就类似于有标题轮播图片的效果)：
屏幕快照 2017-02-18 上午10.24.26.png
1.View的生命周期。
View的生命周期（来自网络）
1）从图中我们View的整个生命周期，主要由三部分操作完成分别是measure()、layout()、draw()，作用如下：
- measure：计算视图的大小。
- layout：设置视图在屏幕中显示的位置。
- draw：绘制视图。其中onDraw()方法会花费大量时间，布局变化会重绘视图，所以在onDraw()中要避免对象分配。
2）invalidate() 和requsetLaytout()作用如下：
- invalidate():重新绘制view，执行draw()操作。
- requsetLaytout():重新请求绘制view，执行measure()和layout()过程，但不执行draw()操作。
2. 定义和加载自定义属性。
1）在values文件夹中定义属性文件attrs_wcircle_view.xml。
<resources>
<declare-styleable name="WBottomTitleView">
<attr name="textString" format="string" />
<attr name="textDimension" format="dimension" />
<attr name="textColor" format="color" />
<attr name="mAlpha" format="integer" />
<attr name="mTextBgColor" format="color" />
<attr name="textDrawable" format="color|reference" />
</declare-styleable>
</resources>
- 在自定义布局的构造方法中加载自定义属性，根据属性更新画笔。
public WBottomTitleView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}
private void init(AttributeSet attrs, int defStyle) {
//加载 attributes
final TypedArray typedArray = getContext().obtainStyledAttributes(
attrs, R.styleable.WBottomTitleView, defStyle, 0);
mTextString = typedArray.getString(
R.styleable.WBottomTitleView_textString);
mTextColor = typedArray.getColor(
R.styleable.WBottomTitleView_textColor,
mTextColor);
mTextDimension = typedArray.getDimension(
R.styleable.WBottomTitleView_textDimension,
mTextDimension);
mAlpha = typedArray.getInt(R.styleable.WBottomTitleView_mAlpha, mAlpha);
mTextBgColor = typedArray.getInt(R.styleable.WBottomTitleView_mTextBgColor, mTextBgColor);
if (typedArray.hasValue(R.styleable.WBottomTitleView_textDrawable)) {
mTextDrawable = typedArray.getDrawable(
R.styleable.WBottomTitleView_textDrawable);
mTextDrawable.setCallback(this);
}
typedArray.recycle();
mTextPaint = new TextPaint();
mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setTextAlign(Paint.Align.LEFT);
p = new Paint();
invalidateTextPaintAndMeasurements();
}
//根据attributes更新TextPaint
private void invalidateTextPaintAndMeasurements() {
mTextPaint.setTextSize(mTextDimension);
mTextPaint.setColor(mTextColor);
if (TextUtils.isEmpty(mTextString)) {
mTextString = "";
}
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
mTextHeight = fontMetrics.bottom;
}
TypedArray是一个数组容器，用于存储加载的属性。记住：用完必须recycle()，不然会发生内存泄漏。
Paint.FontMetrics解析：
图片来自网络
1）top是一行文字的上边界
2）ascent是文字可视区域的上边界
3）descent是文字可视区域的下边界
4）bottom是一行文字的下边界
5）leading是行与行之间的间距(通常为0,bottom与descent及top与ascent之间的间距足够间隔行行)
从上图中可以发现文字的可视区域在ascent与descent之间，top与bottom见的距离是整个文字所占空间的高度。
3. onDraw()绘制视图。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int paddingLeft = getPaddingLeft();
int paddingTop = getPaddingTop();
int paddingRight = getPaddingRight();
int paddingBottom = getPaddingBottom();
int contentWidth = getWidth() - paddingLeft - paddingRight;
int contentHeight = getHeight() - paddingTop - paddingBottom;
mTextPaintfontMetrics = mTextPaint.getFontMetrics();
p.setColor(mTextBgColor);// 设置灰色
p.setAlpha(mAlpha);
p.setStyle(Paint.Style.FILL);//设置填满
canvas.drawRect(paddingLeft, contentHeight - (mTextPaintfontMetrics.bottom - mTextPaintfontMetrics.top), contentWidth, contentHeight, p);// 矩形
// Draw the text.
canvas.drawText(mTextString,
paddingLeft,
paddingTop + (contentHeight - mTextHeight),
mTextPaint);
// Draw the text drawable on top of the text.
if (mTextDrawable != null) {
mTextDrawable.setBounds(paddingLeft, paddingTop,
paddingLeft + contentWidth, paddingTop + contentHeight);
mTextDrawable.draw(canvas);
}
}
4. 完整代码
package cn.studyou.myviewdeep.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.text.TextPaint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.widget.ImageView;
import cn.studyou.myviewdeep.R;
/**
* 基本功能：带有底部标题的ImageView
* 创建：王杰
* 创建时间：2017-02-18
*/
public class WBottomTitleView extends ImageView {
private String mTextString;
private int mTextColor = Color.RED;
private int mAlpha = 150;
private float mTextDimension = 0;
private Drawable mTextDrawable;
private Paint p;
private TextPaint mTextPaint;
private float mTextHeight;
private int mTextBgColor = Color.DKGRAY;
private Paint.FontMetrics mTextPaintfontMetrics;
public WBottomTitleView(Context context) {
super(context);
init(null, 0);
}
public WBottomTitleView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}
public WBottomTitleView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}
private void init(AttributeSet attrs, int defStyle) {
//加载 attributes
final TypedArray typedArray = getContext().obtainStyledAttributes(
attrs, R.styleable.WBottomTitleView, defStyle, 0);
mTextString = typedArray.getString(
R.styleable.WBottomTitleView_textString);
mTextColor = typedArray.getColor(
R.styleable.WBottomTitleView_textColor,
mTextColor);
mTextDimension = typedArray.getDimension(
R.styleable.WBottomTitleView_textDimension,
mTextDimension);
mAlpha = typedArray.getInt(R.styleable.WBottomTitleView_mAlpha, mAlpha);
mTextBgColor = typedArray.getInt(R.styleable.WBottomTitleView_mTextBgColor, mTextBgColor);
if (typedArray.hasValue(R.styleable.WBottomTitleView_textDrawable)) {
mTextDrawable = typedArray.getDrawable(
R.styleable.WBottomTitleView_textDrawable);
mTextDrawable.setCallback(this);
}
typedArray.recycle();
mTextPaint = new TextPaint();
mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setTextAlign(Paint.Align.LEFT);
p = new Paint();
invalidateTextPaintAndMeasurements();
}
//根据attributes更新TextPaint
private void invalidateTextPaintAndMeasurements() {
mTextPaint.setTextSize(mTextDimension);
mTextPaint.setColor(mTextColor);
if (TextUtils.isEmpty(mTextString)) {
mTextString = "";
}
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
mTextHeight = fontMetrics.bottom;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int paddingLeft = getPaddingLeft();
int paddingTop = getPaddingTop();
int paddingRight = getPaddingRight();
int paddingBottom = getPaddingBottom();
int contentWidth = getWidth() - paddingLeft - paddingRight;
int contentHeight = getHeight() - paddingTop - paddingBottom;
mTextPaintfontMetrics = mTextPaint.getFontMetrics();
p.setColor(mTextBgColor);// 设置灰色
p.setAlpha(mAlpha);
p.setStyle(Paint.Style.FILL);//设置填满
canvas.drawRect(paddingLeft, contentHeight - (mTextPaintfontMetrics.bottom - mTextPaintfontMetrics.top), contentWidth, contentHeight, p);// 矩形
// Draw the text.
canvas.drawText(mTextString,
paddingLeft,
paddingTop + (contentHeight - mTextHeight),
mTextPaint);
// Draw the text drawable on top of the text.
if (mTextDrawable != null) {
mTextDrawable.setBounds(paddingLeft, paddingTop,
paddingLeft + contentWidth, paddingTop + contentHeight);
mTextDrawable.draw(canvas);
}
}
public String gettextString() {
return mTextString;
}
public void setTextString(String textString) {
mTextString = textString;
invalidateTextPaintAndMeasurements();
}
public int getTextColor() {
return mTextColor;
}
public void setTextColor(int textColor) {
mTextColor = textColor;
invalidateTextPaintAndMeasurements();
}
public float getTextDimension() {
return mTextDimension;
}
public void setTextDimension(float textDimension) {
mTextDimension = textDimension;
invalidateTextPaintAndMeasurements();
}
public Drawable getTextDrawable() {
return mTextDrawable;
}
public void setTextDrawable(Drawable textDrawable) {
mTextDrawable = textDrawable;
}
public int getmTextBgColor() {
return mTextBgColor;
}
public void setmTextBgColor(int mTextBgColor) {
this.mTextBgColor = mTextBgColor;
}
public int getmAlpha() {
return mAlpha;
}
public void setmAlpha(int mAlpha) {
this.mAlpha = mAlpha;
}
}
5. 开始使用自定义的View
1）在布局文件中引入View
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
>
<cn.studyou.myviewdeep.view.WBottomTitleView
android:layout_width="match_parent"
android:layout_height="170dp"
android:id="@+id/wCircleView"
android:scaleType="fitXY"
app:textDimension="18sp"
app:textColor="#ffffff"
/>
</RelativeLayout>
- Activity中设置图片和标题
package cn.studyou.myviewdeep;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.bumptech.glide.Glide;
import butterknife.BindView;
import butterknife.ButterKnife;
import cn.studyou.myviewdeep.view.WBottomTitleView;
public class MainActivity extends AppCompatActivity {
@BindView(R.id.wCircleView)
WBottomTitleView wCircleView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
wCircleView.setTextString(" 今天天气不错，感觉挺好的。 ");
Glide.with(this).load("http://img06.tooopen.com/images/20170214/tooopen_sy_198645593736.jpg").into(wCircleView);
}
}
