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值，而是基于特定屏幕的转换值。

你能做的是：

如果您希望自己的默认文字大小正好为12sp，则可以使用以下内容获取：

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

用这个来获取你的价值：

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

以这种方式将其设为TextView：

buttonTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, mButtonTextSize);

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

1 个答案:

填充

文字大小