最近項(xiàng)目中需要做一個按鈕，設(shè)計(jì)圖如下所示：

設(shè)計(jì)圖按鈕

首先看到圖的第一反應(yīng)就是在xml中添加android:drawableLeft?屬性，然而發(fā)現(xiàn)結(jié)果是這樣子的：

配置完android:drawableLeft屬性按鈕

切圖暫時還未到位一切從簡。

那么當(dāng)我們需要Button的drawableLeft居中顯示時，Android屬性不能提供給我們相對應(yīng)的Api時候我們想到了自定義View。

思路很簡單，通過canvas平移字體跟drawable資源文件，平移距離：計(jì)算出drawable文件和text文字的寬度以及他們之間的padding距離，通過view的長度減去這個計(jì)算的距離除于2。這樣的平移距離剛好居中：

下面上代碼：

@Override

protected voidonDraw(Canvas canvas) {

Drawable[] drawables = getCompoundDrawables();

if(drawables !=null) {

Drawable drawableLeft = drawables[0];

if(drawableLeft !=null) {

floattextWidth = getPaint().measureText(getText().toString());

intdrawablePadding = getCompoundDrawablePadding();

intdrawableWidth =0;

drawableWidth = drawableLeft.getIntrinsicWidth();

floatbodyWidth = textWidth + drawableWidth + drawablePadding;

canvas.translate((getWidth() - bodyWidth) /2,0);

}

}

super.onDraw(canvas);

}

主要是onDraw方法。

xml中引用：

android:layout_width="match_parent"

android:layout_height="@dimen/dp50"

android:layout_marginBottom="@dimen/dp20"

android:layout_marginLeft="@dimen/dp30"

android:layout_marginRight="@dimen/dp30"

android:layout_marginTop="@dimen/dp50"

android:background="@drawable/bg_btn_payment"

android:drawableLeft="@drawable/ic_clear"

android:drawablePadding="@dimen/dp5"

android:gravity="center_vertical"

android:text="Test Now"

android:textColor="@color/white"

android:textSize="@dimen/dp16"/>

加一個android:gravity="center_vertical"? 否則文字會垂直距離不居中。

最后我們的效果：

最終效果圖，drawableleft居中的button