Question

我有一个计算器应用程序，并希望创建一个按钮，其中包含用于点击功能的白色正常大小的文本，以及用于辅助保留功能的较小，灰色，超级脚本文本。理想情况下，此按钮与Android的默认键盘顶行键非常相似，其中数字是qwerty键的辅助功能。

我是否需要使用自定义图片按钮或黑客入侵按钮的文本视图，或者是否有更简洁的方法来执行此操作？

感谢。

Answer 1

您可以尝试使用设置为TextView的{{1}}。以下是一个使用示例：

SpannableString

“slogan”是一个带有点的字符串。此代码将自定义SpannableString spannedSlogan = new SpannableString(slogan); spannedSlogan.setSpan(new CustomTypefaceSpan(mLightTypeface), 0, slogan.length(), S pannable.SPAN_INCLUSIVE_EXCLUSIVE); spannedSlogan.setSpan(new ForegroundColorSpan(getResources() .getColor(android.R.color.black)), 0, slogan.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE); spannedSlogan.setSpan(new ForegroundColorSpan(getResources() .getColor(R.color.green)), slogan.length() - 1, slogan .length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE); spannedSlogan.setSpan(new CustomTypefaceSpan(mExtraBoldTypeface), slogan.length() - 1, slogan.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE); mSloganView.setText(spannedSlogan);应用于整个字符串，将黑色应用于除最后点之外的所有内容，将绿色应用于点，将粗体样式应用于点。您可以使用Typeface

类似地处理字体大小

第二种解决方案是使用html属性来设置文本大小。例如，来自here：

RelativeSizeSpan

Answer 2

我最后通过编写自己的自定义类来绘制主文本和辅助文本。该类还有一些代码，如果它不适合按钮，它会自动缩小字体大小。

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.Button;

import com.llamacorp.equate.R;

class SecondaryTextButton extends Button {
    protected static final int SECONDARY_FONT_PERCENTAGE = 70;

    protected float mTextX;
    protected float mTextY;
    protected float mTextSize = 0f;

    protected Paint mSecondaryPaint;
    protected String mSecondaryText;
    protected int mSecondaryTextColor;
    protected float mSecondaryTextSize;

    //the following are used to determine where to place the secondary text
    protected float mButtonHeight;
    protected float mButtonWidth;
    protected float mSecTextWidth;
    protected float mSecAdditionalXOffset;
    protected float mSecTextHeight;
    protected float mSecAdditionalYOffset;

    //x and y coordinates for the secondary text
    protected float mSecXCoord;
    protected float mSecYCoord;


    public SecondaryTextButton(Context context, AttributeSet attrs) {
        super(context, attrs);

        int secTextPerc = SECONDARY_FONT_PERCENTAGE;
        //grab custom resource variable
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SecondaryTextButton, 0, 0);
        try {
            mSecondaryText = ta.getString(R.styleable.SecondaryTextButton_secondary_text);
            secTextPerc = ta.getInteger(R.styleable.SecondaryTextButton_secondary_text_font_size_percentage,
                    SECONDARY_FONT_PERCENTAGE);
         mSecondaryTextColor = ta.getColor(R.styleable.SecondaryTextButton_secondary_text_color,
                getResources().getColor(R.color.button_secondary_text));
        } finally { ta.recycle();}

        mSecondaryTextSize = getPaint().getTextSize() * secTextPerc / 100f;

        mSecondaryPaint = new Paint(getPaint());
    }


    /** Set secondary text string */
    public void setSecondaryText(String text){
        mSecondaryText = text;
    }


    @Override
    protected void onTextChanged(CharSequence text, int start, int before, int after) {
        super.onTextChanged(text, start, before, after);
        layoutText();
    }


    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (changed) layoutText();
    } 


    /** Helper method to size text */
    protected void layoutText() {
        Paint paint = getPaint();
        if (mTextSize != 0f) paint.setTextSize(mTextSize);
        float textWidth = paint.measureText(getText().toString());
        float boxWidth = getWidth() - getPaddingLeft() - getPaddingRight();
        float textSize = getTextSize();
        if (textWidth > boxWidth) {
            paint.setTextSize(textSize * boxWidth / textWidth);
            mTextX = getPaddingLeft();
            mTextSize = textSize;
        } else {
            mTextX = (getWidth() - textWidth) / 2;
        }
        mTextY = (getHeight() - paint.ascent() - paint.descent()) / 2;

        if (mSecondaryPaint != null)
            mSecondaryPaint.setTextSize(mSecondaryTextSize);
    }



    @Override
    protected void onDraw(Canvas canvas) {
        if(mSecondaryText != null){
            //draw the text in the upper corner
            mSecondaryPaint.setColor(mSecondaryTextColor);

            mButtonHeight = getHeight(); // - getPaddingTop() - getPaddingBottom();
            mButtonWidth = getWidth(); // - getPaddingLeft() - getPaddingRight();

            mSecTextWidth = mSecondaryPaint.measureText(mSecondaryText);
            mSecAdditionalXOffset = getContext().getResources()
                    .getDimensionPixelSize(R.dimen.button_ellipses_additional_offset_x);

            mSecTextHeight = mSecondaryPaint.getTextSize();
            mSecAdditionalYOffset = getContext().getResources()
                    .getDimensionPixelSize(R.dimen.button_ellipses_additional_offset_y);

            findSecondaryTextCoord();

            canvas.drawText(mSecondaryText, 0, mSecondaryText.length(), 
                    mSecXCoord, mSecYCoord, mSecondaryPaint);
        }

        drawMainText(canvas);
    }


    /**
     * Helper function to draw secondary text
     */
    protected void drawMainText(Canvas canvas){
        getPaint().setColor(getCurrentTextColor());
        canvas.drawText(getPrimaryText(), 0, getPrimaryText().length(), mTextX, mTextY, 
                getPaint());
    }


    protected String getPrimaryText(){
        if(getText().toString()==null)
            return "";
        return getText().toString();
    }


    /** Calculate where to put secondary text
     * This method should get overriden to change text location */
    protected void findSecondaryTextCoord(){
        mSecXCoord = mButtonWidth - mSecTextWidth - mSecAdditionalXOffset;
        mSecYCoord = mButtonHeight - 0 - mSecAdditionalYOffset;
    }
}

您还需要为attrs.xml文件添加一些属性，因此它看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="SecondaryTextButton">
      <attr name="secondary_text" format="string" />
      <attr name="secondary_text_color" format="color" />
      <attr name="secondary_text_font_size_percentage" format="integer" />
   </declare-styleable>

   <declare-styleable name="AnimatedHoldButton">
      <attr name="primary_text" format="string" />
      <attr name="pressed_color" format="color" />
   </declare-styleable>

   <declare-styleable name="EditTextCursorWatcher">
      <attr name="minimumTextSize" format="dimension" />
   </declare-styleable>
</resources>

以下是XML中自定义按钮的使用（请注意，您必须将llamacorp.equate.view替换为您的软件包名称）

    <com.llamacorp.equate.view.AnimatedHoldButton
        xmlns:customNS="http://schemas.android.com/apk/res/com.llamacorp.equate"
        customNS:primary_text="@string/divide_button"
        customNS:secondary_text="@string/invert_button"
        customNS:secondary_text_font_size_percentage="50" />

这是我写的应用程序中的代码示例： https://github.com/evanre/equate

具有多个字体的Android按钮（用于备用键）

2 个答案: