用上面的圖像創建一個按鈕文本不能用drawableTop（）

Question

我想創建一個自定義按鈕，其文本和圖像就像下面的圖像一樣。我不想使用drawableTop，因爲我無法設置圖像的大小。我也不想使用Imageview和TextView的佈局。

經過大量的嘗試和搜索，我創建了一個相同的實用程序文件，但問題在於它顯示左側的圖像。通過這個文件，我可以控制圖像的大小。所以我的問題是我需要在代碼中更改什麼，以便圖像將轉移到頂端。

我的代碼是

<com.kliff.digitaldwarka.utils.IconButton 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:iconSrc="@drawable/services_video" 
    app:iconSize="50dp" 
    app:iconPadding="1dp" 
    android:text="hello" 
    android:background="@null" /> 

IconButton.java

public class IconButton extends AppCompatButton { 
    private Bitmap mIcon; 
    private Paint mPaint; 
    private Rect mSrcRect; 
    private int mIconPadding; 
    private int mIconSize; 

    public IconButton(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 
     init(context, attrs); 
    } 

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

    public IconButton(Context context) { 
     super(context); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     int shift = (mIconSize + mIconPadding)/2; 

     canvas.save(); 
     canvas.translate(shift, 0); 

     super.onDraw(canvas); 

     if (mIcon != null) { 
      float textWidth = getPaint().measureText((String)getText()); 
      int left = (int)((getWidth()/2f) - (textWidth/2f) - mIconSize - mIconPadding); 
      int top = getHeight()/2 - mIconSize/2; 

      Rect destRect = new Rect(left, top, left + mIconSize, top + mIconSize); 
      canvas.drawBitmap(mIcon, mSrcRect, destRect, mPaint); 
     } 

     canvas.restore(); 
    } 

    private void init(Context context, AttributeSet attrs) { 
     TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.IconButton); 

     for (int i = 0; i < array.getIndexCount(); ++i) { 
      int attr = array.getIndex(i); 
      switch (attr) { 
       case R.styleable.IconButton_iconSrc: 
        mIcon = drawableToBitmap(array.getDrawable(attr)); 
        break; 
       case R.styleable.IconButton_iconPadding: 
        mIconPadding = array.getDimensionPixelSize(attr, 0); 
        break; 
       case R.styleable.IconButton_iconSize: 
        mIconSize = array.getDimensionPixelSize(attr, 0); 
        break; 
       default: 
        break; 
      } 
     } 

     array.recycle(); 

     //If we didn't supply an icon in the XML 
     if(mIcon != null){ 
      mPaint = new Paint(); 
      mSrcRect = new Rect(0, 0, mIcon.getWidth(), mIcon.getHeight()); 
     } 
    } 
    public void setmIcon(Context mContext,int drawableRes){ 
     Drawable drawable= ContextCompat.getDrawable(mContext,drawableRes); 
     mIcon = drawableToBitmap(drawable); 
     if(mIcon != null){ 
      mPaint = new Paint(); 
      mSrcRect = new Rect(0, 0, mIcon.getWidth(), mIcon.getHeight()); 
     } 
    } 

    public static Bitmap drawableToBitmap (Drawable drawable) { 
     if (drawable instanceof BitmapDrawable) { 
      return ((BitmapDrawable)drawable).getBitmap(); 
     } 

     Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); 
     Canvas canvas = new Canvas(bitmap); 
     drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); 
     drawable.draw(canvas); 

     return bitmap; 
    } 
} 

attrs.xml

<declare-styleable name="IconButton"> 
    <attr name="iconSrc" format="reference" /> 
    <attr name="iconSize" format="dimension" /> 
    <attr name="iconPadding" format="dimension" /> 
</declare-styleable> 

輸出

預期

注：另外如果該代碼可以操縱在任何一側再增加一個屬性來設置圖像。任何幫助將appriciated

Answer 1

我會用FrameLayout，但如果你沒得選擇，走在下面的代碼看看： 我改變了onDraw() +我改變了一下文字的Paint對象，並添加Paint對象爲圖標。

public class IconButton extends AppCompatButton { 
    private Bitmap mIcon; 
    private Paint mPaint; 
    private Paint mIconPaint; 
    private int mIconPadding; 

    public IconButton(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 
     init(context, attrs); 
    } 

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

    public IconButton(Context context) { 
     super(context); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 

     if (mIcon != null) { 
      float xPos = (canvas.getWidth() - mIconPadding - mIcon.getScaledWidth(canvas))/2; 
      canvas.drawBitmap(mIcon, xPos, mIconPadding, mIconPaint); 
     } 

     final CharSequence text = "Movie tickets"; 
     float textWidth = getTextWidth(mPaint, text.toString()); 
     float xPos = ((canvas.getWidth() - textWidth)/2); 
     canvas.drawText(text, 0, text.length(), xPos, mIcon.getScaledWidth(canvas) + (mIconPadding * 2), mPaint); 
    } 

    private void init(Context context, AttributeSet attrs) { 
     TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.IconButton); 

     for (int i = 0; i < array.getIndexCount(); ++i) { 
      int attr = array.getIndex(i); 
      switch (attr) { 
       case R.styleable.IconButton_iconSrc: 
        mIcon = drawableToBitmap(array.getDrawable(attr)); 
        break; 
       case R.styleable.IconButton_iconPadding: 
        mIconPadding = array.getDimensionPixelSize(attr, 0); 
        break; 
       case R.styleable.IconButton_iconSize: 
        mIconSize = array.getDimensionPixelSize(attr, 0); 
        break; 
       default: 
        break; 
      } 
     } 

     array.recycle(); 

     //If we didn't supply an icon in the XML 
     if (mIcon != null) { 
      mPaint = new Paint(); 
      mSrcRect = new Rect(0, 0, mIcon.getWidth(), mIcon.getHeight()); 
     } 

     mIconPaint = new Paint(TextPaint.ANTI_ALIAS_FLAG); 
     mIconPaint.setStyle(Paint.Style.FILL); 
    } 

    /** 
    * @param paint the paint you are going to paint the text with 
    * @param str String to check its width 
    * @return the width of string in PX 
    */ 
    public static float getTextWidth(Paint paint, String str) { 
     return paint.measureText(str); 
    } 
} 

編輯： 我添加了功能getTextWidth的代碼