Android自定義View繪制居中文本
更新時間：2022年06月29日 14:17:21 作者：簡簡單單_zz
這篇文章主要為大家詳細介紹了Android自定義View繪制居中文本，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Android自定義View繪制居中文本的具體代碼，供大家參考，具體內容如下
自定義view的步驟：
1、自定義View的屬性
2、在View的構造方法中獲得我們自定義的屬性
3、重寫onMesure（非必須）
4、重寫onDraw
1、自定義View的屬性，首先在res/values/ 下建立一個attrs.xml ， 在里面定義我們的屬性，只定義三個，有文本、顏色和字體大?。?/p>
<!--CustomTextView--> ? ? <declare-styleable name="CustomTitleView"> ? ? ? ? <attr name="titleText" format="string"/> ? ? ? ? <attr name="titleTextColor" format="color"/> ? ? ? ? <attr name="titleTextSize" format="dimension"/> </declare-styleable>
2、自定義一個TextView繼承View，在構造方法中獲取我們自定義的屬性：
public class CustomTextView extends View {
? ? /**
? ? ?* 文本
? ? ?*/
? ? private String mTitleText;
? ? /**
? ? ?* 文本的顏色
? ? ?*/
? ? private int mTitleTextColor;
? ? /**
? ? ?* 文本的大小
? ? ?*/
? ? private int mTitleTextSize;
? ? /**
? ? ?* 繪制時控制文本繪制的范圍
? ? ?*/
? ? private Rect mBound;
? ? private Paint mPaint;
? ? public CustomTextView(Context context) {
? ? ? ? this(context, null);
? ? }
? ? public CustomTextView(Context context, @Nullable AttributeSet attrs) {
? ? ? ? this(context, attrs, 0);
? ? }
? ? public CustomTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
? ? ? ? super(context, attrs, defStyleAttr);
? ? ? ? /**
? ? ? ? ?* 獲得我們所定義的自定義樣式屬性
? ? ? ? ?*/
? ? ? ? TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTitleView, defStyleAttr, 0);
? ? ? ? mTitleText = a.getString(R.styleable.CustomTitleView_titleText);
? ? ? ? mTitleTextColor = a.getColor(R.styleable.CustomTitleView_titleTextColor, Color.BLACK);
? ? ? ? mTitleTextSize = a.getDimensionPixelSize(R.styleable.CustomTitleView_titleTextSize, (int) TypedValue.applyDimension(
? ? ? ? ? ? ? ? TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
? ? ? ? a.recycle();
? ? ? ? /**
? ? ? ? ?* 獲得繪制文本的寬和高
? ? ? ? ?*/
? ? ? ? mPaint = new Paint();
? ? ? ? mPaint.setTextSize(mTitleTextSize);
? ? ? ? // mPaint.setColor(mTitleTextColor);
? ? ? ? mBound = new Rect();
? ? ? ? mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
? ? }
?}3、重寫onMesure
我們在使用控件的時候一般會設置寬高。
設置類型有：wrap_content，match_parent，100dp（明確值）
自定義控件時， 如果設置了 明確的寬高（100dp）,系統(tǒng)幫我們測量的結果就是我們設置的實際值；
如果是 wrap_content 或者 match_parent 系統(tǒng)幫我們測量的結果就是 match_parent。
所以當設置為 wrap_content 的時候我們需要 重寫onMesure 方法重新測量。
重寫之前了解 MeasureSpec 的 specMode，一共分為三種類型：
EXACTLY：一般表示設置了 明確值，或者 match_parent ；
AT_MOST：表示子控件限制在一個最大值內，一般為 wrap_content；
UNSPECIFIED：表示子控件像多大就多大，很少使用
?/**
? ? ?* EXACTLY：一般是設置了明確的值或者是MATCH_PARENT
? ? ?AT_MOST：表示子布局限制在一個最大值內，一般為WARP_CONTENT
? ? ?UNSPECIFIED：表示子布局想要多大就多大，很少使用
? ? ?* @param widthMeasureSpec
? ? ?* @param heightMeasureSpec
? ? ?*/
? ? @Override
? ? protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// ? ? ? ?super.onMeasure(widthMeasureSpec, 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;
? ? ? ? if (widthMode == MeasureSpec.EXACTLY) {//當設定了寬度，測量的寬度就等于設定的寬度
? ? ? ? ? ? width = widthSize;
? ? ? ? } else {
? ? ? ? ? ? mPaint.setTextSize(mTitleTextSize);
? ? ? ? ? ? mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
? ? ? ? ? ? float textWidth = mBound.width();
? ? ? ? ? ? int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());
? ? ? ? ? ? width = desired;
? ? ? ? }
? ? ? ? if (heightMode == MeasureSpec.EXACTLY) {
? ? ? ? ? ? height = heightSize;
? ? ? ? } else {
? ? ? ? ? ? mPaint.setTextSize(mTitleTextSize);
? ? ? ? ? ? mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
? ? ? ? ? ? float textHeight = mBound.height();
? ? ? ? ? ? int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());
? ? ? ? ? ? height = desired;
? ? ? ? }
? ? ? ? //最終設置寬高
? ? ? ? setMeasuredDimension(width, height);
? ? }原理就是：獲取寬高的模式，如果是明確值，或者match_parent，直接獲取原始值返回。
如果是 wrap_content，計算寬高：控件的寬高 + 左右（上下）內邊距。
4、重寫onDraw
@Override
? ? protected void onDraw(Canvas canvas) {
? ? ? ? mPaint.setColor(mTitleTextColor);
? ? ? ? ?/*
? ? ? ? ?* 控件寬度/2 - 文字寬度/2
? ? ? ? ?* getWidth() / 2 - mBound.width() / 2
? ? ? ? ?*/
? ? ? ? ?/*
? ? ? ? ?* 控件高度/2 + 文字高度/2,繪制文字從文字左下角開始,因此"+"
? ? ? ? ?* getHeight() / 2 + mBound.height() / 2
? ? ? ? ?*/
? ? ? ? canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);
? ? }在xml中這樣寫：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout ? ? xmlns:android="http://schemas.android.com/apk/res/android" ? ? xmlns:custom="http://schemas.android.com/apk/res-auto" ? ? xmlns:tools="http://schemas.android.com/tools" ? ? android:layout_width="match_parent" ? ? android:layout_height="match_parent" ? ? android:orientation="vertical" ? ? tools:context="com.xp.baseapp.activity.CustomTvActivity"> ? ? <LinearLayout ? ? ? ? android:layout_width="wrap_content" ? ? ? ? android:layout_height="wrap_content"> ? ? ? ? <com.xp.baseapp.widget.drawview.CustomTextView ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:background="#f0f" ? ? ? ? ? ? custom:titleText="大家好9527ing" ? ? ? ? ? ? custom:titleTextColor="#000000" ? ? ? ? ? ? custom:titleTextSize="20sp" ? ? ? ? ? ? /> ? ? ? ? <TextView ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:text="大家好9527ing" ? ? ? ? ? ? android:background="#ff0000" ? ? ? ? ? ? android:layout_marginLeft="3dp" ? ? ? ? ? ? android:textSize="20sp"/> ? ? </LinearLayout> ? ? <TextView ? ? ? ? android:layout_width="wrap_content" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:text="大家好9527ing" ? ? ? ? android:layout_marginTop="3dp" ? ? ? ? android:background="#00f000" ? ? ? ? android:textSize="20sp"/> </LinearLayout>
運行結果：
紫色的是自定義的TextView，紅色和綠色的是系統(tǒng)的TextView。因為這里寬高設置為wrap_content，并且沒有padding，和系統(tǒng)原生的TextView比寬度和高度都不夠，還繪制不全。那接下來一個一個解決。
首先解決寬度：
將原來的測量方法：
float textWidth = mBound.width();//這樣寬度會不全，比系統(tǒng)的textView短
改為比較精確的測量文本寬度的方法：
float textWidth = mPaint.measureText(mTitleText);//比較精確的測量文本寬度的方式
運行結果：
現(xiàn)在寬度就和系統(tǒng)的TextView一樣寬了。
然后解決高度問題：
先了解一下Android是怎么樣繪制文字的，這里涉及到幾個概念，分別是文本的top，bottom，ascent，descent，baseline。
Baseline是基線，在android中，文字的繪制都是從Baseline處開始的，Baseline往上至字符“最高處”的距離我們稱之為ascent（上坡度），Baseline往下至字符“最低處”的距離我們稱之為descent（下坡度）；
leading（行間距）則表示上一行字符的descent到該行字符的ascent之間的距離；
top和bottom文檔描述地很模糊，其實這里我們可以借鑒一下TextView對文本的繪制，TextView在繪制文本的時候總會在文本的最外層留出一些內邊距，因為TextView在繪制文本的時候考慮到了類似讀音符號，下圖中的A上面的符號就是一個拉丁文的類似讀音符號的東西：
Baseline是基線，Baseline以上是負值，以下是正值，因此 ascent，top是負值， descent和bottom是正值。
因此我們這樣改，將原來的測量方法：
float textHeight = mBound.height();
改為比較精確的測量文本寬度的方法：
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics(); float textHeight = Math.abs((fontMetrics.bottom - fontMetrics.top));
運行結果：
最后就是解決文本居中的問題：
將之前的繪制文本寬度
getWidth() / 2 - mBound.width() / 2
改為
int startX = (int) (getWidth() / 2 - mPaint.measureText(mTitleText) / 2);
繪制文本高度
getHeight() / 2 + mBound.height() / 2
改為
//解決高度繪制不居中 Paint.FontMetricsInt fm = mPaint.getFontMetricsInt(); int startY = getHeight() / 2 - fm.descent + (fm.bottom - fm.top) / 2;
getHeight()/2-fm.descent 的意思是 將整個文字區(qū)域抬高至控件的1/2
(fm.bottom - fm.top)其實就是文本的高度，(fm.bottom - fm.top) / 2的意思就是將文本下沉文本高度的一半
運行結果：
現(xiàn)在基本和系統(tǒng)的TextView效果差不多了。由于demo中寫的東西比較多，這里就只貼出自定義類的源碼
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import com.xp.baseapp.R;
public class CustomTextView extends View {
? ? /**
? ? ?* 文本
? ? ?*/
? ? private String mTitleText;
? ? /**
? ? ?* 文本的顏色
? ? ?*/
? ? private int mTitleTextColor;
? ? /**
? ? ?* 文本的大小
? ? ?*/
? ? private int mTitleTextSize;
? ? /**
? ? ?* 繪制時控制文本繪制的范圍
? ? ?*/
? ? private Rect mBound;
? ? private Paint mPaint;
? ? public CustomTextView(Context context) {
? ? ? ? this(context, null);
? ? }
? ? public CustomTextView(Context context, @Nullable AttributeSet attrs) {
? ? ? ? this(context, attrs, 0);
? ? }
? ? public CustomTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
? ? ? ? super(context, attrs, defStyleAttr);
? ? ? ? /**
? ? ? ? ?* 獲得我們所定義的自定義樣式屬性
? ? ? ? ?*/
? ? ? ? TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTitleView, defStyleAttr, 0);
? ? ? ? mTitleText = a.getString(R.styleable.CustomTitleView_titleText);
? ? ? ? mTitleTextColor = a.getColor(R.styleable.CustomTitleView_titleTextColor, Color.BLACK);
? ? ? ? mTitleTextSize = a.getDimensionPixelSize(R.styleable.CustomTitleView_titleTextSize, (int) TypedValue.applyDimension(
? ? ? ? ? ? ? ? TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
? ? ? ? a.recycle();
? ? ? ? /**
? ? ? ? ?* 獲得繪制文本的寬和高
? ? ? ? ?*/
? ? ? ? mPaint = new Paint();
? ? ? ? mPaint.setTextSize(mTitleTextSize);
? ? ? ? // mPaint.setColor(mTitleTextColor);
? ? ? ? mBound = new Rect();
? ? ? ? mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
? ? }
? ? /**
? ? ?* EXACTLY：一般是設置了明確的值或者是MATCH_PARENT
? ? ?AT_MOST：表示子布局限制在一個最大值內，一般為WARP_CONTENT
? ? ?UNSPECIFIED：表示子布局想要多大就多大，很少使用
? ? ?* @param widthMeasureSpec
? ? ?* @param heightMeasureSpec
? ? ?*/
? ? @Override
? ? protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// ? ? ? ?super.onMeasure(widthMeasureSpec, 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;
? ? ? ? if (widthMode == MeasureSpec.EXACTLY) {//當設定了寬度，測量的寬度就等于設定的寬度
? ? ? ? ? ? width = widthSize;
? ? ? ? } else {
? ? ? ? ? ? mPaint.setTextSize(mTitleTextSize);
? ? ? ? ? ? mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
// ? ? ? ? ? ?float textWidth = mBound.width();//這樣寬度會不全，比系統(tǒng)的textView短
? ? ? ? ? ? float textWidth = mPaint.measureText(mTitleText);//比較精確的測量文本寬度的方式
? ? ? ? ? ? int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());
? ? ? ? ? ? width = desired;
? ? ? ? }
? ? ? ? if (heightMode == MeasureSpec.EXACTLY) {
? ? ? ? ? ? height = heightSize;
? ? ? ? } else {
? ? ? ? ? ? mPaint.setTextSize(mTitleTextSize);
? ? ? ? ? ? mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
// ? ? ? ? ? ?float textHeight = mBound.height();//這樣高度會不全，比系統(tǒng)的textView窄
? ? ? ? ? ? Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
? ? ? ? ? ? float textHeight = Math.abs((fontMetrics.bottom - fontMetrics.top));
? ? ? ? ? ? int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());
? ? ? ? ? ? height = desired;
? ? ? ? }
? ? ? ? //最終設置寬高
? ? ? ? setMeasuredDimension(width, height);
? ? }
? ? @Override
? ? protected void onDraw(Canvas canvas) {
// ? ? ? ?mPaint.setColor(Color.YELLOW);
// ? ? ? ?canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
? ? ? ? mPaint.setColor(mTitleTextColor);
? ? ? ? ?/*
? ? ? ? ?* 控件寬度/2 - 文字寬度/2
? ? ? ? ?* getWidth() / 2 - mBound.width() / 2
? ? ? ? ?*/
? ? ? ? ?/*
? ? ? ? ?* 控件高度/2 + 文字高度/2,繪制文字從文字左下角開始,因此"+"
? ? ? ? ?* getHeight() / 2 + mBound.height() / 2
? ? ? ? ?*/
? ? ? ? int startX = (int) (getWidth() / 2 - mPaint.measureText(mTitleText) / 2);
? ? ? ? ?//解決高度繪制不居中
? ? ? ? Paint.FontMetricsInt fm = mPaint.getFontMetricsInt();
? ? ? ? int startY = getHeight() / 2 - fm.descent + (fm.bottom - fm.top) / 2;
// ? ? ? ?canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);
? ? ? ? canvas.drawText(mTitleText, startX, startY, mPaint);
? ? }
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了浮動AppBar中的textField焦點回滾問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
項目中發(fā)現(xiàn)在自動更新功能的時候，下載好了apk的文件后在android7.0系統(tǒng)中不能自動跳到安裝界面，后來搜索了一番解決了問題，但感覺沒有描述清楚，所以補充一下。2017-12-12
這篇文章主要給大家介紹了關于Android中對xml文件解析的3種方式，分別是 Dom 、 SAX 和 dom4j，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-02-02
本文通過實例代碼給大家介紹了android 復制圖片的實現(xiàn)方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
Android利用屬性動畫實現(xiàn)優(yōu)酷菜單
這篇文章主要為大家詳細介紹了Android利用屬性動畫實現(xiàn)優(yōu)酷菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了Android多線程,結合實例形式較為詳細的分析了Android多線程的概念、使用方法與相關注意事項,需要的朋友可以參考下2016-10-10
在做項目的過程中,使用正則表達式來匹配一段文本中的特定種類字符,是比較常用的一種方式,下面這篇文章主要給大家介紹了關于Android如何使用正則表達式只保留字母數(shù)字的相關資料,需要的朋友可以參考下2022-05-05
本篇文章主要介紹了Android 組合控件實現(xiàn)布局的復用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要給大家介紹了關于Android如何通過自定義控件實現(xiàn)溫度旋轉按鈕的效果，文中通過思路與方法一步步介紹的很詳細，相信對大家的理解和學習具有一定的參考借鑒價值，有需要的朋友們下面來一起看看吧。2016-12-12
Android build.gradle版本名打包配置的方法
這篇文章主要介紹了Android build.gradle版本名打包配置的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02