Android DrawableTextView图片文字居中显示

在我们开发中,TextView设置android:drawableLeft一定使用的非常多,但Drawable和Text同时居中显示可能不好控制,有没有好的办法解决呢?

我的方案是通过自定义TextView实现。

实现的效果图:

Android DrawableTextView图片文字居中显示_第1张图片

注:第一行为原生TextView添加android:drawableLeft
第二行为自定义TextView实现的效果。

实现思路:
继承TextView,覆盖onDraw(Canvas canvas),在onDraw中先将canvas进行translate平移,再调用父类onDraw进行绘制。

DrawableTextView.java:

package com.xing.drawabletextview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by Administrator on 2017/2/28.
 */

public class DrawableTextView extends TextView {

    public DrawableTextView(Context context) {
        this(context, null);
    }

    public DrawableTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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


    @Override
    protected void onDraw(Canvas canvas) {
        // getCompoundDrawables() : Returns drawables for the left, top, right, and bottom borders.
        Drawable[] drawables = getCompoundDrawables();
        // 得到drawableLeft设置的drawable对象
        Drawable leftDrawable = drawables[0];
        if (leftDrawable != null) {
            // 得到leftDrawable的宽度
            int leftDrawableWidth = leftDrawable.getIntrinsicWidth();
            // 得到drawable与text之间的间距
            int drawablePadding = getCompoundDrawablePadding();
            // 得到文本的宽度
            int textWidth = (int) getPaint().measureText(getText().toString().trim());
            int bodyWidth = leftDrawableWidth + drawablePadding + textWidth;
            canvas.save();
            canvas.translate((getWidth() - bodyWidth) / 2, 0);
        }
        super.onDraw(canvas);
    }
}

布局文件中引入:

 "match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">

        <com.xing.drawabletextview.DrawableTextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableLeft="@drawable/ic_one"
            android:drawablePadding="10dp"
            android:gravity="center_vertical"
            android:text="21" />

        <com.xing.drawabletextview.DrawableTextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableLeft="@drawable/ic_two"
            android:drawablePadding="10dp"
            android:gravity="center_vertical"
            android:text="99" />

        <com.xing.drawabletextview.DrawableTextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableLeft="@drawable/ic_three"
            android:drawablePadding="10dp"
            android:gravity="center_vertical"
            android:text="99+" />


    

你可能感兴趣的:(Android DrawableTextView图片文字居中显示)