android按鈕圖片和文本居中的代碼－你躺槍了嗎

最近優(yōu)化項(xiàng)目代碼時(shí)，發(fā)現(xiàn)一個(gè)比較詭異的現(xiàn)象：每當(dāng)界面進(jìn)入ActivityA時(shí)，cpu在不斷的消耗，內(nèi)存在不斷的緩慢增長(zhǎng)（雖然每次增長(zhǎng)的量非常?。?。如下圖：

屏幕快照 2016-07-24 12.26.07.png

最后經(jīng)過仔細(xì)排查發(fā)現(xiàn)是由別的組成員自定義view造成的，這個(gè)自定義view代碼如下：
RightDrawableButton.java

public class RightDrawableButton extends Button {
    ....

    @Override
    protected void onDraw(Canvas canvas) {
        Drawable[] drawables = getCompoundDrawables();
        if (drawables != null) {
            Drawable drawableLeft = drawables[2];
            if (drawableLeft != null) {

                float textWidth = getPaint().measureText(getText().toString());
                int drawablePadding = getCompoundDrawablePadding();
                int drawableWidth = 0;
                drawableWidth = drawableLeft.getIntrinsicWidth();
                float bodyWidth = textWidth + drawableWidth + drawablePadding;
                setPadding(0, 0, (int)(getWidth() - bodyWidth), 0);
                canvas.translate((getWidth() - bodyWidth) / 2, 0);
            }
        }
        super.onDraw(canvas);
    }
}

相信看完代碼大家應(yīng)該知道代碼想要實(shí)現(xiàn)的效果了：
讓button的文本和drawableRight居中對(duì)齊。
實(shí)現(xiàn)的效果如下圖：

屏幕快照 2016-07-24 16.31.46.png

有些朋友可能會(huì)認(rèn)為：實(shí)現(xiàn)這個(gè)效果直接用button和drawableRight在XML中定義不就可以了么？大家可以自己試試喲

核心思想：

  1. 獲取文本和drawable的總寬度bodyWidth
  2. 移動(dòng)canvas的坐標(biāo)系到按鈕的正中間
canvas.translate((getWidth() - bodyWidth) / 2, 0);

OK，最終效果是實(shí)現(xiàn)了，可是效率有極大的問題。問題就出在getCompoundDrawables()這行代碼中，進(jìn)入源碼發(fā)現(xiàn)其實(shí)現(xiàn)為：

@NonNull
public Drawable[] getCompoundDrawables() {
    final Drawables dr = mDrawables;
    if (dr != null) {
        return dr.mShowing.clone();
    } else {
        return new Drawable[] { null, null, null, null };
    }
}

很明顯，此方法要不創(chuàng)建新的Drawable數(shù)組，要不就clone() mDrawables數(shù)組。無論是克隆還是新建都將創(chuàng)建新的數(shù)組，這里雖然Java使用淺拷貝來拷貝數(shù)組，但是數(shù)組本身會(huì)重新創(chuàng)建（只是數(shù)組成員引用被拷貝的數(shù)組成員）。
onDraw方法中由于使用了setPadding而導(dǎo)致button會(huì)調(diào)用invalide()來進(jìn)行重繪，這就導(dǎo)致了onDraw在不斷的被調(diào)用。
大家可以想想，作者為什么將這些代碼放到onDraw中執(zhí)行：我想是為了如果button的文本發(fā)生變化時(shí)需要重新計(jì)算bodyWidth的緣故

解決方案

經(jīng)過上面的分析，我們可以進(jìn)行優(yōu)化如下：
1，不要在onDraw中調(diào)用getCompoundDrawables，畢竟在運(yùn)行過程中修改drawable的需求不多
2，計(jì)算bodyWidth放在onLayout中進(jìn)行
最終代碼實(shí)現(xiàn)如下：

public class RightDrawableButton extends Button {
    private final static String TAG = "RightDrawableButton";
    private Drawable[] drawables;
    private float textWidth;
    private float bodyWidth;
    public RightDrawableButton(Context context) {
        super(context);
        init();
    }

    public RightDrawableButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public RightDrawableButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
        drawables = getCompoundDrawables();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        textWidth = getPaint().measureText(getText().toString());
        Drawable drawableRight = drawables[2];
        int totalWidth = getWidth();
        if (drawableRight != null) {
            int drawableWidth = drawableRight.getIntrinsicWidth();
            int drawablePadding = getCompoundDrawablePadding();
            bodyWidth = textWidth + drawableWidth + drawablePadding;
            setPadding(0,0,(int)(totalWidth - bodyWidth),0);
        }
    }

    public void setText(String text){
        if(text.equals(getText().toString()))
            return;
        super.setText(text);
        requestLayout();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int width = getWidth();
        canvas.translate((width - bodyWidth) / 2, 0);
        super.onDraw(canvas);
    }
}

得到運(yùn)行結(jié)果如下(世界清靜了)：

屏幕快照 2016-07-24 16.57.26.png

感觸：

如果你的代碼是直接從網(wǎng)上扒的，請(qǐng)一定做好測(cè)試。
將問題提早暴露比后來再優(yōu)化代碼更加重要，如果個(gè)人能力有限請(qǐng)和同事們溝通解決方案，問題一定不能無限拖延下去（遲早要還的）

其它方案

單就“讓button的文本和drawableRight居中對(duì)齊”的問題其實(shí)完全有很多其它方法可以做到，不用非自己定義button來實(shí)現(xiàn)，比如：

  1. 用button實(shí)現(xiàn)，讓其寬度為wrap_content
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/darker_gray"
    android:gravity="center_horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="Button"
        android:drawableRight="@android:drawable/ic_delete"/>
</RelativeLayout>
  1. 用TextView實(shí)現(xiàn)
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="50dp"
    android:background="@android:color/darker_gray"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:id="@+id/id_text"
        android:text="textView"
        android:drawableRight="@android:drawable/ic_delete"/>
</RelativeLayout>
  1. 自定義Button，自己實(shí)現(xiàn)drawableLeft和drawableRight，核心代碼如下：
    LGDrawableButton.java 
//在構(gòu)造函數(shù)中調(diào)用
private void init(Context context, AttributeSet attrs) {
    if (attrs != null) {
        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs, R.styleable.LGDrawableButton, 0, 0);
        try {
            //textMarginRight:文本和drawableRight之間的距離
            textMarginRight = a.getDimension(R.styleable.LGDrawableButton_textMarginRight, 0);
            //textMarginLeft：文本和drawableLeft之間的距離
            textMarginLeft = a.getDimension(R.styleable.LGDrawableButton_textMarginLeft, 0);
            setDrawable(a.getDrawable(R.styleable.LGDrawableButton_drawableLeft),
                    a.getDrawable(R.styleable.LGDrawableButton_drawableRight));
        } finally {
            a.recycle();
        }
    }
    pl = getPaddingLeft();
    pr = getPaddingRight();
}

@Override
//計(jì)算button的size
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = 0;
    int height = 0;
    if (mDrawableRight != null) {
        width += mDrawableRight.getIntrinsicWidth();
        height = mDrawableRight.getIntrinsicHeight();
    }
    if (mDrawableLeft != null) {
        width += mDrawableLeft.getIntrinsicWidth();
        int drawableLeftHeight = mDrawableLeft.getIntrinsicHeight();
        height = height > drawableLeftHeight ? height : drawableLeftHeight;
    }
    setMeasuredDimension(Math.max(getMeasuredWidth(), width), Math.max(getMeasuredHeight(), height));
}
@Override
//更新文本的padding值
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    if (mDrawableRight != null) {
        textPaddingRight = mDrawableRight.getIntrinsicWidth() / 2;
    }
    if (mDrawableLeft != null) {
        textPaddingLeft = mDrawableLeft.getIntrinsicWidth() / 2;
    }
    if (mDrawableLeft != null && mDrawableRight != null) {
        textPaddingRight = 0;
        textPaddingLeft = 0;
    }
    setPadding(pl + textPaddingLeft * 2 + (int)textMarginLeft / 2, getPaddingTop(),
            pr + textPaddingRight * 2 + (int)textMarginRight / 2, getPaddingBottom());
}
public void setDrawable(final Drawable left, final Drawable right) {
    int[] state;
    state = getDrawableState();
    if (left != null) {
        left.setState(state);
        //設(shè)置drawable的繪圖坐標(biāo)為drawable圖片左上角（方便定位drawable的位置）
        left.setBounds(0, 0, left.getIntrinsicWidth(), left.getIntrinsicHeight());
        left.setCallback(this);
    }
    if (right != null) {
        ...
    }
    mDrawableRight = right;
    mDrawableLeft = left;
    requestLayout();
}
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mDrawableRight != null) {
        //更新mDrawableRight的x坐標(biāo)
        Rect rect = mDrawableRight.getBounds();
        float textWidth = getPaint().measureText(getText().toString());
        float drawableX = getWidth() / 2 + textWidth / 2 - textPaddingRight + textMarginRight / 2;
        if (drawableX + rect.width() >= getWidth()) {
            drawableX = getWidth() - rect.width();
        }
        canvas.save();
        canvas.translate(drawableX, getHeight() / 2 - rect.bottom / 2);
        mDrawableRight.draw(canvas);
        canvas.restore();
    }
    if (mDrawableLeft != null) {
       ...和mDrawableRight類似
    }
}

由于涉及到自定義屬性，請(qǐng)?jiān)趓es的values目錄下新建attrs.xml文件內(nèi)容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LGDrawableButton">
        <attr name="drawableRight" format="reference"/>
        <attr name="drawableLeft" format="reference"/>
        <attr name="textMarginRight" format="dimension"/>
        <attr name="textMarginLeft" format="dimension"/>
    </declare-styleable>
</resources>

使用方法

在布局文件中定義如下：

<com.gui.lgdrawablebutton.LGDrawableButton
    android:id="@+id/center_left"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:textMarginLeft="20dp"
    android:text="中國(guó)你好"
    app:drawableLeft="@android:drawable/ic_delete" />

<com.gui.lgdrawablebutton.LGDrawableButton
    android:id="@+id/center_right"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="中國(guó)你好"
    app:textMarginRight="20dp"
    app:drawableRight="@android:drawable/ic_delete" />

<com.gui.lgdrawablebutton.LGDrawableButton
    android:id="@+id/center_both"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="中國(guó)你好"
    app:drawableRight="@android:drawable/ic_delete"
    app:drawableLeft="@mipmap/ic_launcher"/>

實(shí)現(xiàn)效果如下：

屏幕快照 2016-07-24 20.12.10.png

寫在最后

盡量不要做個(gè)“拿來主義”的人，我個(gè)人認(rèn)為網(wǎng)上的一些代碼不是不能使用，只是我們要有自己的衡量：這些代碼是不是能直接使用，還是說經(jīng)過簡(jiǎn)單修改就能直接使用，還是根本就不能用。請(qǐng)做個(gè)有自己想法的“拿來主義”者，能顯著提高你的工作效率。

如果你在項(xiàng)目中也有這方面的需求并且也犯了同樣的錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論中加以評(píng)論，說說你的感想。
如果你有更好的解決方案也可以在評(píng)論中加以評(píng)論，謝謝！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容