2. 程式人生 > 程式設計 >Android圖文居中顯示控制元件使用方法詳解

Android圖文居中顯示控制元件使用方法詳解

阿新 • • 發佈：2020-09-07

最近專案中用到了文字圖示的按鈕，需要居中顯示，如果用TextView實現的方式，必須同時設定padding和drawablePadding。如下：

<androidx.appcompat.widget.AppCompatTextView
  android:layout_width="200dp"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/ic_xxx"
  android:drawablePadding="-60dp"
  android:minHeight="48dp"
  android:gravity="center"
  android:padding="80dp" />

這種方式需要自己做精確計算。比較麻煩。另外還有一種方式就是用線性佈局包裹ImageView和TextView，但這樣會增加布局層級。於是自己封裝了一個控制元件DrawableCenterTextView。

attrs.xml檔案中定義屬性：

<declare-styleable name="DrawableCenterTextView">
  <attr name="android:text" />
  <attr name="android:textColor" />
  <attr name="android:textSize" />
  <attr name="android:textStyle" />
  <attr name="android:drawablePadding" />
  <attr name="android:drawableLeft" />
  <attr name="android:drawableTop" />
  <attr name="android:drawableRight" />
  <attr name="android:drawableBottom" />
</declare-styleable>

對應的Java程式碼如下：

public class DrawableCenterTextView extends View {

 static final int LEFT = 0;
 static final int TOP = 1;
 static final int RIGHT = 2;
 static final int BOTTOM = 3;

 private CharSequence mText;
 private ColorStateList mTextColor;
 private float mTextSize;
 private int mTextStyle;
 private int mDrawablePadding;
 private Drawable[] mCompoundDrawables;

 private Rect mTextBounds;
 private Rect mDrawableLeftBounds;
 private Rect mDrawableTopBounds;
 private Rect mDrawableRightBounds;
 private Rect mDrawableBottomBounds;

 private TextPaint mTextPaint;

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

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

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

  Drawable drawableLeft = null,drawableTop = null,drawableRight = null,drawableBottom = null;
  TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.DrawableCenterTextView,defStyleAttr,0);
  mText = ta.getText(R.styleable.DrawableCenterTextView_android_text);
  mTextColor = ta.getColorStateList(R.styleable.DrawableCenterTextView_android_textColor);
  mTextSize = ta.getDimensionPixelSize(R.styleable.DrawableCenterTextView_android_textSize,15);
  mTextStyle = ta.getInt(R.styleable.DrawableCenterTextView_android_textStyle,0);

  drawableLeft = ta.getDrawable(R.styleable.DrawableCenterTextView_android_drawableLeft);
  drawableTop = ta.getDrawable(R.styleable.DrawableCenterTextView_android_drawableTop);
  drawableRight = ta.getDrawable(R.styleable.DrawableCenterTextView_android_drawableRight);
  drawableBottom = ta.getDrawable(R.styleable.DrawableCenterTextView_android_drawableBottom);

  mDrawablePadding = ta.getDimensionPixelSize(R.styleable.DrawableCenterTextView_android_drawablePadding,0);
  ta.recycle();

  if (mTextColor == null) {
   mTextColor = ColorStateList.valueOf(0xFF000000);
  }

  mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
  mTextPaint.density = getResources().getDisplayMetrics().density;
  mTextPaint.setTextSize(mTextSize);
  setTypeface(Typeface.create(Typeface.DEFAULT,mTextStyle));

  setCompoundDrawablesWithIntrinsicBounds(drawableLeft,drawableTop,drawableRight,drawableBottom);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  int heightSize = MeasureSpec.getSize(heightMeasureSpec);

  int width;
  int height;

  //計算文字範圍
  calcTextBounds();

  if (widthMode == MeasureSpec.EXACTLY) {
   width = widthSize;
  } else {
   width = mTextBounds.width();

   if (mCompoundDrawables != null) {
    if (mCompoundDrawables[TOP] != null) {
     width = Math.max(width,mDrawableTopBounds.width());
    }

    if (mCompoundDrawables[BOTTOM] != null) {
     width = Math.max(width,mDrawableBottomBounds.width());
    }

    //加上左右內邊距及drawable寬度和drawable間距
    width += getCompoundPaddingLeft() + getCompoundPaddingRight();

    width = Math.max(width,getSuggestedMinimumWidth());

    if (widthMode == MeasureSpec.AT_MOST) {
     width = Math.min(widthSize,width);
    }
   }
  }

  if (heightMode == MeasureSpec.EXACTLY) {
   height = heightSize;
  } else {
   height = mTextBounds.height();

   if (mCompoundDrawables != null) {
    if (mCompoundDrawables[LEFT] != null) {
     height = Math.max(height,mDrawableLeftBounds.height());
    }

    if (mCompoundDrawables[RIGHT] != null) {
     height = Math.max(height,mDrawableRightBounds.height());
    }

    //加上上下內邊距及drawable高度和drawable間距
    height += getCompoundPaddingTop() + getCompoundPaddingBottom();

    height = Math.max(height,getSuggestedMinimumHeight());

    if (heightMode == MeasureSpec.AT_MOST) {
     height = Math.min(heightSize,height);
    }
   }
  }

  setMeasuredDimension(width,height);
 }

 public int getCompoundPaddingTop() {
  if (mCompoundDrawables == null || mCompoundDrawables[TOP] == null) {
   return getPaddingTop();
  } else {
   Rect rect = new Rect();
   mCompoundDrawables[TOP].copyBounds(rect);
   return getPaddingTop() + mDrawablePadding + rect.height();
  }
 }

 public int getCompoundPaddingBottom() {
  if (mCompoundDrawables == null || mCompoundDrawables[BOTTOM] == null) {
   return getPaddingBottom();
  } else {
   Rect rect = new Rect();
   mCompoundDrawables[BOTTOM].copyBounds(rect);
   return getPaddingBottom() + mDrawablePadding + rect.height();
  }
 }

 public int getCompoundPaddingLeft() {
  if (mCompoundDrawables == null || mCompoundDrawables[LEFT] == null) {
   return getPaddingLeft();
  } else {
   Rect rect = new Rect();
   mCompoundDrawables[LEFT].copyBounds(rect);
   return getPaddingLeft() + mDrawablePadding + rect.width();
  }
 }

 public int getCompoundPaddingRight() {
  if (mCompoundDrawables == null || mCompoundDrawables[RIGHT] == null) {
   return getPaddingRight();
  } else {
   Rect rect = new Rect();
   mCompoundDrawables[RIGHT].copyBounds(rect);
   return getPaddingRight() + mDrawablePadding + rect.width();
  }
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);

  int vspace = getBottom() - getTop() - getCompoundPaddingBottom() - getCompoundPaddingTop(); //剩餘垂直可繪製文字空間大小
  int hspace = getRight() - getLeft() - getCompoundPaddingRight() - getCompoundPaddingLeft(); //剩餘水平可繪製文字空間大小

  if (mCompoundDrawables != null) {
   if (mCompoundDrawables[LEFT] != null) {
    canvas.save();
    canvas.translate((hspace - mTextBounds.width()) / 2.0f + getPaddingLeft(),getCompoundPaddingTop() + (vspace - mDrawableLeftBounds.height()) / 2.0f);
    mCompoundDrawables[LEFT].draw(canvas);
    canvas.restore();
   }

   if (mCompoundDrawables[RIGHT] != null) {
    canvas.save();
    canvas.translate(getRight() - getLeft() - getPaddingRight() - (hspace - mTextBounds.width()) / 2.0f - mDrawableRightBounds.width(),getCompoundPaddingTop() + (vspace - mDrawableRightBounds.height()) / 2.0f);
    mCompoundDrawables[RIGHT].draw(canvas);
    canvas.restore();
   }

   if (mCompoundDrawables[TOP] != null) {
    canvas.save();
    canvas.translate(getCompoundPaddingLeft()
      + (hspace - mDrawableTopBounds.width()) / 2.0f,(vspace - mTextBounds.height()) / 2.0f + getPaddingTop());
    mCompoundDrawables[TOP].draw(canvas);
    canvas.restore();
   }

   if (mCompoundDrawables[BOTTOM] != null) {
    canvas.save();
    canvas.translate(getCompoundPaddingLeft()
        + (hspace - mDrawableBottomBounds.width()) / 2.0f,getBottom() - getTop() - getPaddingBottom() - (vspace - mTextBounds.height()) / 2.0f - mDrawableBottomBounds.height());
    mCompoundDrawables[BOTTOM].draw(canvas);
    canvas.restore();
   }
  }

  if (!TextUtils.isEmpty(mText)) {
   float startX = (hspace - mTextBounds.width()) / 2.0f + getCompoundPaddingLeft();
   //因為drawText以baseline為基準，因此需要向下移ascent
   float startY = (vspace - mTextBounds.height()) / 2.0f + getCompoundPaddingTop() - mTextPaint.getFontMetrics().ascent;
   mTextPaint.setColor(mTextColor.getColorForState(getDrawableState(),0));
   canvas.drawText(mText,mText.length(),startX,startY,mTextPaint);
  }
 }

 @Override
 protected void drawableStateChanged() {
  super.drawableStateChanged();

  if (mTextColor != null && mTextColor.isStateful()) {
   mTextPaint.setColor(mTextColor.getColorForState(getDrawableState(),0));
  }

  if (mCompoundDrawables != null) {
   final int[] state = getDrawableState();
   for (Drawable dr : mCompoundDrawables) {
    if (dr != null && dr.isStateful() && dr.setState(state)) {
     invalidateDrawable(dr);
    }
   }
  }
 }

 public void setCompoundDrawablesWithIntrinsicBounds(@Nullable Drawable left,@Nullable Drawable top,@Nullable Drawable right,@Nullable Drawable bottom) {
  if (left != null) {
   left.setBounds(0,left.getIntrinsicWidth(),left.getIntrinsicHeight());
  }
  if (right != null) {
   right.setBounds(0,right.getIntrinsicWidth(),right.getIntrinsicHeight());
  }
  if (top != null) {
   top.setBounds(0,top.getIntrinsicWidth(),top.getIntrinsicHeight());
  }
  if (bottom != null) {
   bottom.setBounds(0,bottom.getIntrinsicWidth(),bottom.getIntrinsicHeight());
  }
  setCompoundDrawables(left,top,right,bottom);
 }

 public void setCompoundDrawables(@Nullable Drawable left,@Nullable Drawable bottom) {

  if (mCompoundDrawables == null) {
   mCompoundDrawables = new Drawable[4];
  } else {
   if (mCompoundDrawables[LEFT] != null && mCompoundDrawables[LEFT] != left) {
    mCompoundDrawables[LEFT].setCallback(null);
   }

   if (mCompoundDrawables[TOP] != null && mCompoundDrawables[TOP] != top) {
    mCompoundDrawables[TOP].setCallback(null);
   }

   if (mCompoundDrawables[RIGHT] != null && mCompoundDrawables[RIGHT] != right) {
    mCompoundDrawables[RIGHT].setCallback(null);
   }

   if (mCompoundDrawables[BOTTOM] != null && mCompoundDrawables[BOTTOM] != bottom) {
    mCompoundDrawables[BOTTOM].setCallback(null);
   }
  }

  if (left != null) {
   mDrawableLeftBounds = new Rect();
   left.copyBounds(mDrawableLeftBounds);
   left.setCallback(this);
   mCompoundDrawables[LEFT] = left;
  } else {
   mCompoundDrawables[LEFT] = null;
  }

  if (top != null) {
   mDrawableTopBounds = new Rect();
   top.copyBounds(mDrawableTopBounds);
   top.setCallback(this);
   mCompoundDrawables[TOP] = top;
  } else {
   mCompoundDrawables[TOP] = null;
  }

  if (right != null) {
   mDrawableRightBounds = new Rect();
   right.copyBounds(mDrawableRightBounds);
   right.setCallback(this);
   mCompoundDrawables[RIGHT] = right;
  } else {
   mCompoundDrawables[RIGHT] = null;
  }

  if (bottom != null) {
   mDrawableBottomBounds = new Rect();
   bottom.copyBounds(mDrawableBottomBounds);
   bottom.setCallback(this);
   mCompoundDrawables[BOTTOM] = bottom;
  } else {
   mCompoundDrawables[BOTTOM] = null;
  }

  invalidate();
  requestLayout();
 }

 public void setText(CharSequence text) {
  this.mText = text;

  invalidate();
  requestLayout();
 }

 public void setTextSize(float textSize) {
  this.mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,textSize,getResources().getDisplayMetrics());

  invalidate();
  requestLayout();
 }

 public void setTextColor(@ColorInt int textColor) {
  this.mTextColor = ColorStateList.valueOf(textColor);

  invalidate();
 }

 public void setTypeface(@Nullable Typeface tf) {
  if (mTextPaint.getTypeface() != tf) {
   mTextPaint.setTypeface(tf);

   requestLayout();
   invalidate();
  }
 }

 private void calcTextBounds() {
  mTextBounds = new Rect();

  if (TextUtils.isEmpty(mText)) return;

  if (Build.VERSION.SDK_INT > Build.VERSION_CODES.Q) {
   mTextPaint.getTextBounds(mText,mTextBounds);
  } else {
   int width = (int) Math.ceil(mTextPaint.measureText(mText.toString()));
   Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
   int height = (int) Math.ceil(fontMetrics.descent - fontMetrics.ascent);
   mTextBounds.set(0,width,height);
  }
 }
}

感謝大家的支援，如有錯誤請指正。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

Android圖文居中顯示控制元件使用方法詳解

最近專案中用到了文字圖示的按鈕，需要居中顯示，如果用TextView實現的方式，必須同時設定padding和drawablePadding。如下：

Android評分RationBar控制元件使用詳解

Android評分RationBar控制元件，供大家參考，具體內容如下 主要是不想用太多三方的控制元件，所以決定儘可能自己寫，最近有寫一個評分的頁面，廢話不多說直接上圖

android九宮格可分頁載入控制元件使用詳解

本文例項為大家分享了android九宮格可分頁載入控制元件的具體實現程式碼，供大家參考，具體內容如下

Android日期選擇控制元件使用詳解

本文例項為大家分享了Android日期選擇控制元件的使用方法，供大家參考，具體內容如下

Android自定義View圓形圖片控制元件程式碼詳解

前言 在日常開發中，圓形的圖片效果還是很常見的。可以通過給Paint設定Xfermode來實現，這裡簡單記錄如下。

python GUI庫圖形介面開發之PyQt5拖放控制元件例項詳解

本篇，我們學習PyQt5介面中拖放（Drag 和Drop）控制元件。 拖放動作 在GUI中，拖放指的是點選一個物件，並將其拖動到另一個物件上的動作。比如百度雲PC客戶端支援的拖放檔案以快速移動檔案：

Python GUI程式設計學習筆記之tkinter中messagebox、filedialog控制元件用法詳解

本文例項講述了Python GUI程式設計學習筆記之tkinter中messagebox、filedialog控制元件用法。分享給大家供大家參考，具體如下：

Android 通過程式碼安裝 APK的方法詳解

在 APK 開發中，通過 Java 程式碼來開啟系統的安裝程式以安裝 APK 並不是什麼難事，一般的 Android 系統都有開放這一功能。

PyQt5 QDockWidget控制元件應用詳解

前言 QDockWidget是一個可以停靠在QMainWindow內的視窗控制元件，它可以保持在浮動狀態或者在指定位置作為子視窗附加到主視窗中，QMainWindow類的主視窗物件保留有一個用於停靠視窗的區域，這個區域在控制元件的中央

Flutter 常用控制元件使用詳解

技術標籤：flutter學習專欄widgetandroid 目錄 配置 Flutter常用控制元件 Text TextField元件

Python實現matplotlib顯示中文的方法詳解

文例項講述了Python實現matplotlib顯示中文的方法。分享給大家供大家參考，具體如下：

Vue自定義樹形控制元件使用詳解

本文例項為大家分享了自定義樹形控制元件的使用方法，供大家參考，具體內容如下

Android基礎控制元件RadioGroup使用方法詳解

本文為大家分享了Android基礎控制元件RadioGroup的使用，供大家參考，具體內容如下

Android開發自定義控制元件之折線圖實現方法詳解

本文例項講述了Android開發自定義控制元件之折線圖實現方法。分享給大家供大家參考，具體如下：

Vue表單控制元件資料繫結方法詳解

基礎用法 可以用 v-model 指令在表單控制元件元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。v-model本質上不過是語法糖，它負責監聽使用者的輸入事件以更新資料

python圖形介面開發之wxPython樹控制元件使用方法詳解

wxPython樹控制元件介紹 樹（tree）是一種通過層次結構展示資訊的控制元件，如下圖所示是樹控制元件示例，左視窗中是樹控制元件，在wxPython中樹控制元件類是wx.TreeCtrl。

python GUI庫圖形介面開發之PyQt5圖片顯示控制元件QPixmap詳細使用方法與例項

PyQt5圖片顯示控制元件QPixmap介紹 QPixmap類用於繪圖裝置的影象顯示，它可以作為一個QPainterDevice物件，也可以載入到一個控制元件中，通常是標籤或者按鈕，用於在標籤或按鈕上顯示影象

Python GUI程式設計學習筆記之tkinter控制元件的介紹及基本使用方法詳解

本文例項講述了Python GUI程式設計學習筆記之tkinter控制元件的介紹及基本使用方法。分享給大家供大家參考，具體如下：

OpenLayers載入縮放控制元件使用方法詳解

本文例項為大家分享了OpenLayers載入縮放控制元件使用的具體程式碼，供大家參考，具體內容如下

OpenLayers3載入常用控制元件使用方法詳解

本文例項為大家分享了OpenLayers3載入常用控制元件使用的具體程式碼，供大家參考，具體內容如下