Android 优化布局（解决TextView drawable

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

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

先看一下效果图

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

第一块Xml中的代码

    <com.~~~~~~.TextDrawable
        android: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.~~~~~~.TextDrawable
        android: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.~~~~~~.TextDrawable
            android: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.TextDrawable
        android: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>

以上为全部代码