重写button实现文字图片居中显示

最近项目中需要做像单条微博下方的评论、转发、点赞按钮一样效果的几个小按钮，就是图片在文字的左边，并且都居中显示。一开始我尝试的方法是使用android:drawableLeft 和 paddingleft
来进行一个微调，发现可以做到想要的效果，但是新的问题也随之而来了。我的项目中底部并不是固定的三个按钮，当满足一定条件的时候，左侧的按钮会隐藏掉，那么之前调的paddingleft 基本算是作废了，效果如下图所示





很明显的可以看到当按钮减少一个之后，图片和文字的间距又拉大了，于是在网上查找了一些资料，无外乎两种方法，第一种，用LinearLayout 设置水平，里面包一层ImageView和一层TextView来达到效果，这种方法代码冗余高，果断舍弃不看。第二种方法就是我现在使用的方法，就是重写button来实现这个功能，我们先来看看代码

public class DrawableButton extends Button {

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

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

private Canvas getTopCanvas(Canvas canvas) {
Drawable[] drawables = getCompoundDrawables();
if (drawables == null) {
return canvas;
}
Drawable drawable = drawables[0];// 判断左面的drawable是否存在
if (drawable == null) {
drawable = drawables[2];// 判断右面的drawable是否存在
}

float textSize = getPaint().measureText(getText().toString());
<span style="white-space:pre"> </span>int ImgWidth = drawable.getIntrinsicWidth();
<span style="white-space:pre"> </span>int buttonPadding = getCompoundDrawablePadding();
<span style="white-space:pre"> </span>float contentWidth = textSize + ImgWidth + buttonPadding;//获取当前所占宽
<span style="white-space:pre"> </span>int rightPadding = (int) (getWidth() - contentWidth);//计算右边应该保留的宽度
<span style="white-space:pre"> </span>setPadding(0, 0, rightPadding , 0); // 直接贴到左边
<span style="white-space:pre"> </span>float dx = (getWidth() - contentWidth) / 2;//获取中心位置
<span style="white-space:pre"> </span>canvas.translate(dx, 0);// 整体右移
<span style="white-space:pre"> </span>return canvas;
}
}

在布局中调用
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="5dp"
android:paddingTop="5dp" >

<com.youdi.jzb.framework.view.DrawableHorizontalButton
android:id="@+id/bt_review"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_weight="1"
android:background="@color/white"
android:drawableLeft="@drawable/review"
android:gravity="center"
android:focusable="false"
android:text="@string/review"
android:textSize="14sp" />

<View
android:id="@+id/line_one"
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@color/line_gray_white_color" />

<com.youdi.jzb.framework.view.DrawableHorizontalButton
android:id="@+id/tv_security_update"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_weight="1"
android:background="@color/white"
android:drawableLeft="@drawable/check_modification"
android:gravity="center"
android:focusable="false"
android:text="@string/modify"
android:textSize="14sp" />

<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@color/line_gray_white_color" />

<com.youdi.jzb.framework.view.DrawableHorizontalButton
android:id="@+id/tv_security_dele"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_weight="1"
android:background="@color/white"
android:drawableLeft="@drawable/check_delete"
android:gravity="center"
android:focusable="false"
android:text="@string/delete"
android:textSize="14sp" />
</LinearLayout>

效果如下：





完美解决问题，该方法我是参考网上前人写的，思路很好理解，就是把当前button里的图片和文字全部靠左，然后再往右偏移计算好的宽度达到预期效果，至于上下居中的话，用同样的思路，只需要将水平左右有关的变量换位垂直上下的就行了。