一. 业务背景
TextView的setCompoundDrawables()可以在其四周设置图片，但是有个众所周知的问题，即无法设置drawable大小。这就导致在实际的使用中有很大的局限性，必须用代码去控制，就略显麻烦了。
这个时候我们就需要自定义 TextView 了,这个自定义控件虽然简单，也非常不起眼，但是用处还真不少：
- 解决了主要矛盾，无法在布局里设置 TextView 图片大小问题，使用更加简单。
- 除了设置图片大小，其它的 TextView 可以的事情这个一样也都可以
- 图片加文字的简单组合非常见，原本为了适配图片大小不得不用一个 xxxLayout＋ImageView+TextView 才能搞定的事，现在用一个控件即可搞定。
- 在方便、高效使用的同时，也有效的减少了布局层。千万不要瞧不上这点苍蝇肉,这可能是你的app卡顿罪魁祸首
二. 扩展TextView原理
- 通过Drawable的setBound()设置显示区域，也就是图片大小
- 通过TextView的setCompoundDrawables()设置要显示的图片
三. 扩展TextView实现
3.1 定义一个MkDrawableTextView,继承AppCompatTextView,重写三个构造方法
public MkDrawableTextView(Context context) { super(context); } public MkDrawableTextView(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } public MkDrawableTextView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs); }
3.2 通过自定义属性定义Drawable宽高,顶点坐标;drawable左上右下的图标引用
<declare-styleable name="DrawableTextView"> <attr name="left_drawable" format="reference" /> <attr name="right_drawable" format="reference" /> <attr name="top_drawable" format="reference" /> <attr name="bottom_drawable" format="reference" /> <attr name="drawable_width" format="dimension" /> <attr name="drawable_height" format="dimension" /> <attr name="left_drawable_width" format="dimension" /> <attr name="left_drawable_height" format="dimension" /> <attr name="right_drawable_width" format="dimension" /> <attr name="right_drawable_height" format="dimension" /> <attr name="top_drawable_width" format="dimension" /> <attr name="top_drawable_height" format="dimension" /> <attr name="bottom_drawable_width" format="dimension" /> <attr name="bottom_drawable_height" format="dimension" /> </declare-styleable>
3.3 获取Drawable真实宽高
局部的大小设置均正常的情况,我们获取局部设置的宽高,局部大小没设置时，看全局的大小是否正确设置,如果正确获取全局大小宽高
public static class SizeWrap { int width; int height; /** * 检查Drawable的宽高是否符合要求 * @param globalWidth xml定义的Drawable获取真实的宽度 * @param globalHeight xml定义的Drawable获取真实的高度 * @param localWidth Drawable实际图标局部设置的宽度 * @param localHeight Drawable实际图标局部设置的高度 * @return 是否符合要求 */ public boolean checkWidthAndHeight(int globalWidth, int globalHeight, int localWidth, int localHeight) { width = 0; height = 0; // 局部的大小设置均正常的情况 if (localWidth > 0 && localHeight > 0) { width = localWidth; height = localHeight; return true; } // 局部大小没设置时，看全局的大小是否正确设置 if (localWidth == -1 && localHeight == -1) { if (globalWidth > 0 && globalHeight > 0) { width = globalWidth; height = globalHeight; return true; } } return false; } } }
3.4 将顶角图标Drawable设置到我们的TextView上
private void init(Context context, AttributeSet attrs) { // 1. 通过style.xml文件拿到所有的样式文件 TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.DrawableTextView); int width = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_drawable_width, -1); int height = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_drawable_height, -1); SizeWrap sizeWrap = new SizeWrap(); Drawable leftDrawable = ta.getDrawable(R.styleable.DrawableTextView_left_drawable); if (leftDrawable != null) { int lwidth = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_left_drawable_width, -1); int lheight = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_left_drawable_height, -1); if (sizeWrap.checkWidthAndHeight(width, height, lwidth, lheight)) { leftDrawable.setBounds(0, 0, sizeWrap.width, sizeWrap.height); } else { throw new IllegalArgumentException("error left drawable size setting"); } } Drawable rightDrawable = ta.getDrawable(R.styleable.DrawableTextView_right_drawable); if (rightDrawable != null) { int rwidth = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_right_drawable_width, -1); int rheight = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_right_drawable_height, -1); if (sizeWrap.checkWidthAndHeight(width, height, rwidth, rheight)) { rightDrawable.setBounds(0, 0, sizeWrap.width, sizeWrap.height); } else { throw new IllegalArgumentException("error right drawable size setting"); } } Drawable topDrawable = ta.getDrawable(R.styleable.DrawableTextView_top_drawable); if (topDrawable != null) { int twidth = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_top_drawable_width, -1); int theight = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_top_drawable_height, -1); if (sizeWrap.checkWidthAndHeight(width, height, twidth, theight)) { topDrawable.setBounds(0, 0, sizeWrap.width, sizeWrap.height); } else { throw new IllegalArgumentException("error top drawable size setting"); } } Drawable bottomDrawable = ta.getDrawable(R.styleable.DrawableTextView_bottom_drawable); if (bottomDrawable != null) { int bwidth = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_bottom_drawable_width, -1); int bheight = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_bottom_drawable_height, -1); if (sizeWrap.checkWidthAndHeight(width, height, bwidth, bheight)) { bottomDrawable.setBounds(0, 0, sizeWrap.width, sizeWrap.height); } else { throw new IllegalArgumentException("error bottom drawable size setting"); } } this.setCompoundDrawables(leftDrawable, topDrawable, rightDrawable, bottomDrawable); ta.recycle(); ta = null; }
四. 使用指南
<com.github.microkibaco.view.MkDrawableTextView android:id="@+id/mk_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_toEndOf="@+id/top_text" android:background="@drawable/mk_circle_rect_10_white_bg" android:drawablePadding="4dp" android:gravity="center" android:paddingStart="10dp" android:paddingTop="3dp" android:paddingEnd="10dp" android:paddingBottom="3dp" android:textColor="@color/white" android:textSize="@dimen/text_size_11" android:visibility="gone" app:right_drawable="@drawable/mk_arrow" app:right_drawable_height="10dp" app:right_drawable_width="10dp" tools:text="@string/mk_rank_no" />
五. 扩展TextView注意事项
在网上看到有一个版本，在控件的onMeasure()设置Drawable.setBound(), 在onDraw()里设置: setCompoundDrawables()。看setCompoundDrawables()源码可以知道，这个方法最终会调用invalide()和requestLayout()，会导致严重的后果就是，onMeasure()和onDraw()会无限循环的互调下去，有点浪费
改不完的 Bug，写不完的矫情。公众号 杨正友 现在专注移动基础开发 ，涵盖音视频和 APM,信息安全等各个知识领域；只做全网最 Geek 的公众号，欢迎您的关注！
