转载：http://www.jianshu.com/p/d3027acf475a

今天分享一个Layout布局中的一个小技巧，希望看过之后你也可以写出性能更好的布局，我个人的目的是用最少的view写出一样的效果布局

用TextView同时显示图片和文字：

先看一下效果图

图像 3.png

以上这四块区域相信大家在项目中经常遇到吧！（一般的写法ImageView与TextView的组合）现在用一个自定义的TextView就完成能达到一样的效果，并且也可以设置背景选择器、图片的尺寸大小，不需要嵌套多层布局在设置相关的属性

第一块Xml中的代码

    <com.~~~~~~.TextDrawableandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/textdrawable"android:clickable="true" android:drawablePadding="10dp" android:gravity="center_vertical" android:padding="@dimen/space_20" android:text="设置" android:textColor="@color/black_252c3d" android:textSize="@dimen/textsize_20sp_in_normal" app:leftDrawable="@drawable/tab_more_unselect" app:leftDrawableHeight="@dimen/space_60" app:leftDrawableWidth="@dimen/space_60" app:rightDrawable="@drawable/iconfont_youjiantou" app:rightDrawableHeight="20dp" app:rightDrawableWidth="10dp" /> <Space android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/gray_888888" />

下面的分割线我建议用Space这个控件，它是一个非常轻量级的控件

第二块Xml中的代码

<com.~~~~~~.TextDrawableandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/textdrawable"android:clickable="true" android:drawablePadding="10dp" android:gravity="center_vertical" android:padding="@dimen/space_20" android:text="消息" android:textColor="@color/black_252c3d" android:textSize="@dimen/textsize_20sp_in_normal" app:leftDrawable="@drawable/tab_speech_unselect" app:leftDrawableHeight="@dimen/space_60" app:leftDrawableWidth="@dimen/space_60" />

第三块Xml中的代码

 <com.~~~~~~.TextDrawableandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="wrap_content"android:background="@drawable/textdrawable" android:clickable="true" android:drawablePadding="10dp" android:gravity="center" android:padding="@dimen/space_20" android:text="首页" android:textColor="@color/colorPrimary" android:textSize="@dimen/textsize_20sp_in_normal" app:topDrawable="@drawable/tab_home_select" app:topDrawableHeight="@dimen/space_60" app:topDrawableWidth="@dimen/space_60" />

第四块Xml中的代码（图片按钮）

 <com.hightsstudent.highsstudent.ui.widget.TextDrawableandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/textdrawable"android:clickable="true" android:drawablePadding="10dp" android:gravity="center_vertical" android:padding="@dimen/space_15" android:text="退出" android:textColor="@color/black_252c3d" android:textSize="@dimen/textsize_20sp_in_normal" app:rightDrawable="@drawable/icon_backs" app:rightDrawableHeight="@dimen/space_80" app:rightDrawableWidth="@dimen/space_80" />

下面贴出TextDrawable.java代码

/*** Created by Dengxiao on 2016/11/8.*/public class TextDrawable extends TextView {private Drawable drawableLeft; private Drawable drawableRight; private Drawable drawableTop; private int leftWidth; private int rightWidth; private int topWidth; private int leftHeight; private int rightHeight; private int topHeight; private Context mContext; public TextDrawable(Context context) { this.mContext=context; this(context, null, 0); } public TextDrawable(Context context, AttributeSet attrs) { this.mContext=context; this(context, attrs, 0); } public TextDrawable(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.mContext=context; init(context, attrs); } private void init(Context context, AttributeSet attrs) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TextDrawable); drawableLeft = typedArray.getDrawable(R.styleable.TextDrawable_leftDrawable); drawableRight = typedArray.getDrawable(R.styleable.TextDrawable_rightDrawable); drawableTop = typedArray.getDrawable(R.styleable.TextDrawable_topDrawable); if (drawableLeft != null) { leftWidth = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_leftDrawableWidth, dip2px(context, 20)); leftHeight = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_leftDrawableHeight, dip2px(context, 20)); } if (drawableRight != null) { rightWidth = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_rightDrawableWidth, dip2px(context, 20)); rightHeight = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_rightDrawableHeight, dip2px(context, 20)); } if (drawableTop != null) { topWidth = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_topDrawableWidth, dip2px(context, 20)); topHeight = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_topDrawableHeight, dip2px(context, 20)); } } public int dip2px(Context context, float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if (drawableLeft != null) { drawableLeft.setBounds(0, 0, leftWidth, leftHeight); } if (drawableRight != null) { drawableRight.setBounds(0, 0, rightWidth, rightHeight); } if (drawableTop != null) { drawableTop.setBounds(0, 0, topWidth, topHeight); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); this.setCompoundDrawables(drawableLeft, drawableTop, drawableRight, null); } /** * 设置左侧图片并重绘 */ public void setDrawableLeft(Drawable drawableLeft) { this.drawableLeft = drawableLeft; invalidate(); } /** * 设置左侧图片并重绘 */ public void setDrawableLeft(int drawableLeftRes) { this.drawableLeft = mContext.getResources().getDrawable(drawableLeftRes); invalidate(); } /** * 设置右侧图片并重绘 */ public void setDrawableRight(Drawable drawableRight) { this.drawableRight = drawableLeft; invalidate(); } /** * 设置右侧图片并重绘 */ public void setDrawableRight(int drawableRightRes) { this.drawableRight = mContext.getResources().getDrawable(drawableRightRes); invalidate(); } /** * 设置上部图片并重绘 */ public void setDrawable(Drawable drawableTop) { this.drawableTop = drawableTop; invalidate(); } /** * 设置右侧图片并重绘 */ public void setDrawableTop(int drawableTopRes) { this.drawableTop = mContext.getResources().getDrawable(drawableTopRes); invalidate(); } }

附上attrs：

<declare-styleable name="TextDrawable"><attr name="leftDrawable" format="reference"/> <attr name="leftDrawableWidth" format="dimension"/> <attr name="leftDrawableHeight" format="dimension"/> <attr name="rightDrawable" format="reference"/> <attr name="rightDrawableWidth" format="dimension"/> <attr name="rightDrawableHeight" format="dimension"/> <attr name="topDrawable" format="reference"/> <attr name="topDrawableWidth" format="dimension"/> <attr name="topDrawableHeight" format="dimension"/> </declare-styleable>

以上为全部代码