[Android]自定义Button之drawableLeft居

最近项目中需要做一个按钮，设计图如下所示：

设计图按钮

首先看到图的第一反应就是在xml中添加android:drawableLeft 属性，然而发现结果是这样子的：

配置完android:drawableLeft属性按钮

切图暂时还未到位一切从简。

那么当我们需要Button的drawableLeft居中显示时，Android属性不能提供给我们相对应的Api时候我们想到了自定义View。

思路很简单，通过canvas平移字体跟drawable资源文件，平移距离：计算出drawable文件和text文字的宽度以及他们之间的padding距离，通过view的长度减去这个计算的距离除于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