Android开发 TextView 文字和drawableLeft居中

Android开发 TextView 文字和drawableLeft居中

我们在开发过程中经常会遇到这样的布局设计：文字左边一个图标 ,常用的做法是用一个RelativeLayout包裹一个ImageView和一个TextView，然后设置各自都垂直居中，如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/singing_like"
        android:layout_centerVertical="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:layout_toRightOf="@+id/img"
        android:text="居中处理"
        android:textColor="#000000"
        android:textSize="12sp"
        android:layout_centerVertical="true" />
</RelativeLayout>

这样我们需要用到三个控件，导致的结果是布局变得复杂，并且影响渲染效率，所以可以考虑对原本的TextView进行改造处理，实现一个控件就可以达到想要的效果，如下：

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;

import com.octvision.liuzhou.park.R;

public class TextViewDrawable extends AppCompatTextView {

    private int drawableLeftWidth, drawableTopWidth, drawableRightWidth, drawableBottomWidth;
    private int drawableLeftHeight, drawableTopHeight, drawableRightHeight, drawableBottomHeight;
    private boolean isAliganCenter = true;
    private boolean isDwMath_content = false;
    private int mWidth, mHeight;

    public TextViewDrawable(Context context) {
        this(context, null);
    }

    public TextViewDrawable(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TextViewDrawable(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs, defStyleAttr);
    }

    private void initView(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TextViewDrawable);
        drawableLeftWidth = typedArray.getDimensionPixelSize(R.styleable.TextViewDrawable_drawableLeftWidth, 0);
        drawableTopWidth = typedArray.getDimensionPixelSize(R.styleable.TextViewDrawable_drawableTopWidth, 0);
        drawableRightWidth = typedArray.getDimensionPixelSize(R.styleable.TextViewDrawable_drawableRightWidth, 0);
        drawableBottomWidth = typedArray.getDimensionPixelSize(R.styleable.TextViewDrawable_drawableBottomWidth, 0);
        drawableLeftHeight = typedArray.getDimensionPixelSize(R.styleable.TextViewDrawable_drawableLeftHeight, 0);
        drawableTopHeight = typedArray.getDimensionPixelSize(R.styleable.TextViewDrawable_drawableTopHeight, 0);
        drawableRightHeight = typedArray.getDimensionPixelSize(R.styleable.TextViewDrawable_drawableRightHeight, 0);
        drawableBottomHeight = typedArray.getDimensionPixelSize(R.styleable.TextViewDrawable_drawableBottomHeight, 0);
        isAliganCenter = typedArray.getBoolean(R.styleable.TextViewDrawable_isAliganCenter, true);
        typedArray.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        Drawable[] drawables = getCompoundDrawables();
        Drawable drawableLeft = drawables[0];
        Drawable drawableTop = drawables[1];
        Drawable drawableRight = drawables[2];
        Drawable drawableBottom = drawables[3];
        if (drawableLeft != null) {
            setDrawable(drawableLeft, 0, drawableLeftWidth, drawableLeftHeight);
        }
        if (drawableTop != null) {
            setDrawable(drawableTop, 1, drawableTopWidth, drawableTopHeight);
        }
        if (drawableRight != null) {
            setDrawable(drawableRight, 2, drawableRightWidth, drawableRightHeight);
        }
        if (drawableBottom != null) {
            setDrawable(drawableBottom, 3, drawableBottomWidth, drawableBottomHeight);
        }
        this.setCompoundDrawables(drawableLeft, drawableTop, drawableRight, drawableBottom);
    }

    private void setDrawable(Drawable drawable, int tag, int drawableWidth, int drawableHeight) {
        //获取图片实际长宽
        int width = drawableWidth == 0 ? drawable.getIntrinsicWidth() : drawableWidth;
        int height = drawableHeight == 0 ? drawable.getIntrinsicHeight() : drawableHeight;
        int left = 0, top = 0, right = 0, bottom = 0;
        int diffSize = Math.abs((int) getTextSize() - height);
        switch (tag) {
            case 0:
            case 2:
                left = 0;
                top = isAliganCenter ? -getLineCount() * getLineHeight() / 2 + getLineHeight() / 2 + diffSize / 2 : 0;
                right = width;
                bottom = top + height;
                break;
            case 1:
                left = isAliganCenter ? 0 : -mWidth / 2 + width / 2;
                top = 0;
                right = left + width;
                bottom = top + height;
                break;
        }
        drawable.setBounds(left, top, right, bottom);
    }
}

为了同时可以在布局中控制drawable的大小，所以添加了一些其它的属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TextViewDrawable">
        <attr name="drawableLeftWidth" format="dimension" />
        <attr name="drawableTopWidth" format="dimension" />
        <attr name="drawableRightWidth" format="dimension" />
        <attr name="drawableLeftHeight" format="dimension" />
        <attr name="drawableTopHeight" format="dimension" />
        <attr name="drawableRightHeight" format="dimension" />
        <attr name="drawableBottomHeight" format="dimension" />
        <attr name="drawableBottomWidth" format="dimension" />
        <attr name="isAliganCenter" format="boolean" />
    </declare-styleable>
</resources>