Android 深入（一）- 自定义View之BottomTitleImageView

通过本文你可以了解到自定义View的知识，同时你可以学会如何写一个属于自己的View。同时希望能够通过这个例子重新学习下自定义View的知识。

Android 开发到一定程度的时候，可以独立开发一款App，一些基本的知识都有使用。这时候必须进行自我提高，深入的研究下Android的各个方面，不然也只能停留在初级程序员的层次，只能是一个码农啦！

自定义View是我们需要掌握的基本知识，在开发中一些需求使用系统内置的View不好实现，我们经常会自定义我们自己的View，同时在面试中经常被问到。下面我们就通过一个带有底部标题的自定义ImageView来学习下自定义View。

先看看效果图(效果就类似于有标题轮播图片的效果)：

1.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>

2) 在自定义布局的构造方法中加载自定义属性，根据属性更新画笔。

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>

2) 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);
}
}

6. 项目地址：https://github.com/wjie2014/MyViewDeep

简书地址：http://www.jianshu.com/p/cc0c1e9a836b