深度剖析之 TextDrawable

剖析项目名称： TextDrawable

剖析原项目地址：https://github.com/amulyakhare/TextDrawable

剖析理由：只知其然而不知其所以然，如此不好。想要快速的进阶，不走寻常路，剖析开源项目，深入理解扩展知识，仅仅这样还不够，还需要如此：左手爱哥的设计模式，右手重构改善既有设计，如此漫长打坐，回过头再看来时的路，书已成山，相信翔哥说的，量变引起质变

先看整体效果图：



这个轻量级的库提供了矩形、圆角、圆形的文本图供ImageView使用。Android Studio项目导入：

repositories{
maven {
url 'http://dl.bintray.com/amulyakhare/maven'
}
}

dependencies {
compile 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'
}

xml引用实例（指定ImageView宽度/高度和可拉的自动扩展以适应大小。）：

<ImageView android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/image_view"/>

代码调用实例和效果：

TextDrawable drawable = TextDrawable.builder()
.buildRect("A", Color.RED);

ImageView image = (ImageView) findViewById(R.id.image_view);
image.setImageDrawable(drawable);

以上实例才用的是默认图形，我们还可以选择圆角或圆形，可以设置边框，代码调用实例和效果图如下：

TextDrawable drawable1 = TextDrawable.builder()
.buildRoundRect("A", Color.RED, 10); // radius in px

TextDrawable drawable2 = TextDrawable.builder()
.buildRound("A", Color.RED);
TextDrawable drawable = TextDrawable.builder()
.beginConfig()
.withBorder(4) /* thickness in px */
.endConfig()
.buildRoundRect("A", Color.RED, 10);

修改字体样式代码调用实例:

TextDrawable drawable = TextDrawable.builder()
.beginConfig()
.textColor(Color.BLACK)
.useFont(Typeface.DEFAULT)
.fontSize(30) /* size in px */
.bold()
.toUpperCase()
.endConfig()
.buildRect("a", Color.RED)

颜色辅助类调用实例：

ColorGenerator generator = ColorGenerator.MATERIAL; // or use DEFAULT
// generate random color
int color1 = generator.getRandomColor();
// generate color based on a key (same key returns the same color), useful for list/grid views
int color2 = generator.getColor("user@gmail.com")

// declare the builder object once.
TextDrawable.IBuilder builder = TextDrawable.builder()
.beginConfig()
.withBorder(4)
.endConfig()
.rect();

// reuse the builder specs to create multiple drawables
TextDrawable ic1 = builder.build("A", color1);
TextDrawable ic2 = builder.build("B", color2);

大概聊了整个项目后，发现需要我们有两个类：ColorGenerator 和 TextDrawable ，ColorGenerator 内部预定义了一些了的色值存放到集合，然后需要用时再从里面取出，这里就不细说了，重点放在TextDrawable

，该类运用builder模式,设置相关属性，构建TextDrawable,先来看下主体结构：

/**
* @author amulya
* @datetime 14 Oct 2014, 3:53 PM
*/
public class TextDrawable extends ShapeDrawable {

private TextDrawable(Builder builder) {
//调用父类构造含shape
super(builder.shape);

// 把Builder属性引用到ShapeDrawable
shape = builder.shape;
height = builder.height;
width = builder.width;
radius = builder.radius;
//...............此处略......................

// 初始化画笔
Paint paint = getPaint();
paint.setColor(color);

}

public static interface IBuilder {...}
public static interface IShapeBuilder {...}
public interface IConfigBuilder {...}
public static class Builder implements IConfigBuilder, IShapeBuilder, IBuilder {...}
}

TextDrawable的构造函数调用的父类的含shape构造方法，而这里的传入Builder类在初始化的时候就初始化了shape的子类RectShape:

private Builder() {
//初始化基本属性
text = "";
color = Color.GRAY;
shape = new RectShape();
//..........此处略............
}

改变图形本质通过改变Shape，ondraw绘制达到目的，实例如下：

@Override
public IBuilder roundRect(int radius) {
this.radius = radius;
float[] radii = {radius, radius, radius, radius, radius, radius, radius, radius};
this.shape = new RoundRectShape(radii, null, null);
return this;
}

这里的Builder模式运用让我眼前一亮，原来还可以这样O(∩_∩)O哈哈~，一个类实现三个借口，每个借口的函数返回可以是不同的接口，这样有个好处就是当你.xx()列出来的方法只会列出接口对应的和Builder自定义的方法，而不会完全列出builder含有的方法

public static interface IShapeBuilder {
//...........此处略...........
public IConfigBuilder beginConfig();
}
public interface IConfigBuilder {
//...........此处略...........
public IShapeBuilder endConfig();
}

public static class Builder implements IConfigBuilder, IShapeBuilder, IBuilder {

//...............此处略........................

@Override
public IConfigBuilder beginConfig() {
return this;
}

@Override
public IShapeBuilder endConfig() {
return this;
}
}

接着再来看TextDrawable的onDraw绘制方法：

@Override
public void draw(Canvas canvas) {
super.draw(canvas);
Rect r = getBounds();

// 如果边框大小大于0则绘制边框
if (borderThickness > 0) {
drawBorder(canvas);
}

int count = canvas.save();
canvas.translate(r.left, r.top);

// 绘制文字
int width = this.width < 0 ? r.width() : this.width;
int height = this.height < 0 ? r.height() : this.height;
int fontSize = this.fontSize < 0 ? (Math.min(width, height) / 2) : this.fontSize;
textPaint.setTextSize(fontSize);
canvas.drawText(text, width / 2, height / 2 - ((textPaint.descent() + textPaint.ascent()) / 2), textPaint);

canvas.restoreToCount(count);

}

基本的绘制方法就不提了，这里值得一说也就文字绘制的位置计算，当你了解了Paint的一下几个属性，想必你就能更容易理解了。

1.基准点是baseline（单行）
2.Paint.ascent：是baseline之上至字符最高处的距离
3.Paint.descent：是baseline之下至字符最低处的距离
4.Paint.leading：是上一行字符的descent到下一行的ascent之间的距离,也就是相邻行间的空白距离
5.Paint.top：是指的是最高字符到baseline的值,即ascent的最大值
6.Paint.bottom：是指最低字符到baseline的值,即descent的最大值

小结：看完这个项目，学到了两点知识：builder模式的另一种优雅实现和画笔绘制计算中心点

参考资料：http://www.zybang.com/question/bd3d73c504008384be0ec0d1daa33bec.html