最近優化項目代碼時，發現一個比較詭異的現象：每當界面進入ActivityA時，cpu在不斷的消耗，內存在不斷的緩慢增長（雖然每次增長的量非常小）。如下圖：
屏幕快照 2016-07-24 12.26.07.png
最后經過仔細排查發現是由別的組成員自定義view造成的，這個自定義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);
}
}
相信看完代碼大家應該知道代碼想要實現的效果了：
讓button的文本和drawableRight居中對齊。
實現的效果如下圖：
屏幕快照 2016-07-24 16.31.46.png
有些朋友可能會認為：實現這個效果直接用button和drawableRight在XML中定義不就可以了么？大家可以自己試試喲
核心思想：
- 獲取文本和drawable的總寬度bodyWidth
- 移動canvas的坐標系到按鈕的正中間
canvas.translate((getWidth() - bodyWidth) / 2, 0);
OK，最終效果是實現了，可是效率有極大的問題。問題就出在getCompoundDrawables()這行代碼中，進入源碼發現其實現為：
@NonNull
public Drawable[] getCompoundDrawables() {
final Drawables dr = mDrawables;
if (dr != null) {
return dr.mShowing.clone();
} else {
return new Drawable[] { null, null, null, null };
}
}
很明顯，此方法要不創建新的Drawable數組，要不就clone() mDrawables數組。無論是克隆還是新建都將創建新的數組，這里雖然Java使用淺拷貝來拷貝數組，但是數組本身會重新創建（只是數組成員引用被拷貝的數組成員）。
onDraw方法中由于使用了setPadding而導致button會調用invalide()來進行重繪，這就導致了onDraw在不斷的被調用。
大家可以想想，作者為什么將這些代碼放到onDraw中執行：我想是為了如果button的文本發生變化時需要重新計算bodyWidth的緣故
解決方案
經過上面的分析，我們可以進行優化如下：
1，不要在onDraw中調用getCompoundDrawables，畢竟在運行過程中修改drawable的需求不多
2，計算bodyWidth放在onLayout中進行
最終代碼實現如下：
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);
}
}
得到運行結果如下(世界清靜了)：
屏幕快照 2016-07-24 16.57.26.png
感觸：
如果你的代碼是直接從網上扒的，請一定做好測試。
將問題提早暴露比后來再優化代碼更加重要，如果個人能力有限請和同事們溝通解決方案，問題一定不能無限拖延下去（遲早要還的）
其它方案
單就“讓button的文本和drawableRight居中對齊”的問題其實完全有很多其它方法可以做到，不用非自己定義button來實現，比如：
- 用button實現，讓其寬度為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>
- 用TextView實現
<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>
- 自定義Button，自己實現drawableLeft和drawableRight，核心代碼如下：
LGDrawableButton.java
//在構造函數中調用
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
//計算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);
//設置drawable的繪圖坐標為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坐標
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類似
}
}
由于涉及到自定義屬性，請在res的values目錄下新建attrs.xml文件內容如下：
<?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="中國你好"
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="中國你好"
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="中國你好"
app:drawableRight="@android:drawable/ic_delete"
app:drawableLeft="@mipmap/ic_launcher"/>
實現效果如下：
屏幕快照 2016-07-24 20.12.10.png
寫在最后
盡量不要做個“拿來主義”的人，我個人認為網上的一些代碼不是不能使用，只是我們要有自己的衡量：這些代碼是不是能直接使用，還是說經過簡單修改就能直接使用，還是根本就不能用。請做個有自己想法的“拿來主義”者，能顯著提高你的工作效率。
如果你在項目中也有這方面的需求并且也犯了同樣的錯誤，請在評論中加以評論，說說你的感想。
如果你有更好的解決方案也可以在評論中加以評論，謝謝！
