自定义按钮填充和文本大小问题

Question

我通过扩展LinearLayout 创建了一个自定义视图，使其成为带有图标和文本的按钮。

这是课程 -

public class FancyButton extends LinearLayout {

    private final static float CORNER_RADIUS = 3.0f;

    private String mButtonText;
    private String mFontName;
    private float mButtonTextSize;
    private int mBackgroundColor;
    private int mSeparatorColor;
    private Drawable mIcon;

    private Typeface mButtonTextTypeface;

    private Bitmap maskBitmap;
    private Paint paint, maskPaint;
    private float cornerRadius;


    public FancyButton(Context context) {
        super(context);
        init(context, null, 0);
    }

    public FancyButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

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


    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        if (attrs != null) {

            parseSignInButtonAttrs(context, attrs, defStyleAttr, R.style.FancyButton);


            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            inflater.inflate(R.layout.fancy_button_widget, this, true);

            setOrientation(LinearLayout.HORIZONTAL);
            setGravity(Gravity.CENTER_VERTICAL);
            setPadding(20, 20, 20, 20);


            ImageView buttonIconImageView = (ImageView) getChildAt(0);
            View separator = getChildAt(1);
            TextView buttonTextView = (TextView) getChildAt(2);

            if (null != mButtonTextTypeface)
                buttonTextView.setTypeface(mButtonTextTypeface);

            setBackgroundColor(mBackgroundColor);

            buttonIconImageView.setImageDrawable(mIcon);
            separator.setBackgroundColor(mSeparatorColor);

            buttonTextView.setTextColor(Color.WHITE);
            buttonTextView.setText(mButtonText);
            buttonTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, mButtonTextSize);

            if (null != mFontName)
                mButtonTextTypeface = TypefaceLoader.get(getContext(), "fonts/" + mFontName);

            initCornerRadiusDraw(context);

        }
    }

    private void initCornerRadiusDraw(Context context) {
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        setWillNotDraw(false);
    }

    private void parseSignInButtonAttrs(Context context, AttributeSet attrs, final int defStyleAttr, final int defStyleRes) {
        final TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.FancyButton, defStyleAttr, defStyleRes);

        mFontName = a.getString(R.styleable.FancyButton_buttonFont);
        mButtonText = a.getString(R.styleable.FancyButton_buttonText);
        mBackgroundColor = a.getColor(R.styleable.FancyButton_buttonBackgroundColor, ContextCompat.getColor(context, R.color.app_blue));
        mIcon = a.getDrawable(R.styleable.FancyButton_buttonIcon);

        mButtonTextSize = a.getDimension(R.styleable.FancyButton_buttonTextSize, 12);

        mSeparatorColor = CommonUtils.getDarkerShade(mBackgroundColor);

        a.recycle();
    }

    @Override
    public void draw(Canvas canvas) {
        Bitmap offscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas offscreenCanvas = new Canvas(offscreenBitmap);

        super.draw(offscreenCanvas);

        if (maskBitmap == null) {
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }

        offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
        canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);
    }

    private Bitmap createMask(int width, int height) {
        Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
        Canvas canvas = new Canvas(mask);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

        return mask;
    }
}

现在这会创建一个如下所示的按钮 -

如您所见，文本看起来很大，并且没有添加填充。

<com.sachingutte.testapp.views.FancyButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_box"
        custom:buttonBackgroundColor="@color/app_blue"
        custom:buttonIcon="@drawable/ic_menu_gallery"
        custom:buttonText="@string/dashboard"
        custom:buttonTextColor="@android:color/white"
        custom:buttonTextSize="12sp" />

编辑布局膨胀 -

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_menu_camera" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:background="@color/app_blue" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp" />
</merge>

Answer 1

填充

从您提供的屏幕中，我可以看到实际上正在应用填充。我可以看到以某种方式显示1dp 宽View：

您只是将其设置为一个相对较小的值 (20px)。

---

文字大小

问题在于这个调用：

mButtonTextSize = a.getDimension(R.styleable.FancyButton_buttonTextSize, 12);

正如您可以从docs 中看到的那样：

单位转换基于与此 TypedArray 对象来自的资源关联的当前 DisplayMetrics。

所以当您调用getDimension 时会涉及到单位转换。因此，您不会得到sp 值，而是基于特定屏幕的转换值。

你可以做的是：

1. 如果您希望您的默认文本大小正好是 12sp，您可以通过以下方式获得：

float defaultTextSize = 12 * context.getResources().getDisplayMetrics.scaledDensity;

1. 用这个获得你的价值：

mButtonTextSize = a.getDimensionPixelSize(R.styleable.FancyButton_buttonTextSize, (int) defaultTextSize);

1. 以这种方式将其设置为您的TextView：

buttonTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, mButtonTextSize);