Android自定義View繪制居中文本
更新時(shí)間：2022年06月29日 14:17:21 作者：簡(jiǎn)簡(jiǎn)單單_zz
這篇文章主要為大家詳細(xì)介紹了Android自定義View繪制居中文本，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Android自定義View繪制居中文本的具體代碼，供大家參考，具體內(nèi)容如下
自定義view的步驟：
1、自定義View的屬性
2、在View的構(gòu)造方法中獲得我們自定義的屬性
3、重寫onMesure（非必須）
4、重寫onDraw
1、自定義View的屬性，首先在res/values/ 下建立一個(gè)attrs.xml ， 在里面定義我們的屬性，只定義三個(gè)，有文本、顏色和字體大小：
<!--CustomTextView--> ? ? <declare-styleable name="CustomTitleView"> ? ? ? ? <attr name="titleText" format="string"/> ? ? ? ? <attr name="titleTextColor" format="color"/> ? ? ? ? <attr name="titleTextSize" format="dimension"/> </declare-styleable>
2、自定義一個(gè)TextView繼承View，在構(gòu)造方法中獲取我們自定義的屬性：
public class CustomTextView extends View {
? ? /**
? ? ?* 文本
? ? ?*/
? ? private String mTitleText;
? ? /**
? ? ?* 文本的顏色
? ? ?*/
? ? private int mTitleTextColor;
? ? /**
? ? ?* 文本的大小
? ? ?*/
? ? private int mTitleTextSize;
? ? /**
? ? ?* 繪制時(shí)控制文本繪制的范圍
? ? ?*/
? ? 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
我們?cè)谑褂每丶臅r(shí)候一般會(huì)設(shè)置寬高。
設(shè)置類型有：wrap_content，match_parent，100dp（明確值）
自定義控件時(shí)， 如果設(shè)置了 明確的寬高（100dp）,系統(tǒng)幫我們測(cè)量的結(jié)果就是我們?cè)O(shè)置的實(shí)際值；
如果是 wrap_content 或者 match_parent 系統(tǒng)幫我們測(cè)量的結(jié)果就是 match_parent。
所以當(dāng)設(shè)置為 wrap_content 的時(shí)候我們需要 重寫onMesure 方法重新測(cè)量。
重寫之前了解 MeasureSpec 的 specMode，一共分為三種類型：
EXACTLY：一般表示設(shè)置了 明確值，或者 match_parent ；
AT_MOST：表示子控件限制在一個(gè)最大值內(nèi)，一般為 wrap_content；
UNSPECIFIED：表示子控件像多大就多大，很少使用
?/**
? ? ?* EXACTLY：一般是設(shè)置了明確的值或者是MATCH_PARENT
? ? ?AT_MOST：表示子布局限制在一個(gè)最大值內(nèi)，一般為WARP_CONTENT
? ? ?UNSPECIFIED：表示子布局想要多大就多大，很少使用
? ? ?* @param widthMeasureSpec
? ? ?* @param heightMeasureSpec
? ? ?*/
? ? @Override
? ? protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// ? ? ? ?super.onMeasure(widthMeasureSpec, heightMeasureSpec);
? ? ? ? // 獲取寬高的設(shè)置模式
? ? ? ? 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) {//當(dāng)設(shè)定了寬度，測(cè)量的寬度就等于設(shè)定的寬度
? ? ? ? ? ? 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;
? ? ? ? }
? ? ? ? //最終設(shè)置寬高
? ? ? ? setMeasuredDimension(width, height);
? ? }原理就是：獲取寬高的模式，如果是明確值，或者match_parent，直接獲取原始值返回。
如果是 wrap_content，計(jì)算寬高：控件的寬高 + 左右（上下）內(nèi)邊距。
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>
運(yùn)行結(jié)果：
紫色的是自定義的TextView，紅色和綠色的是系統(tǒng)的TextView。因?yàn)檫@里寬高設(shè)置為wrap_content，并且沒(méi)有padding，和系統(tǒng)原生的TextView比寬度和高度都不夠，還繪制不全。那接下來(lái)一個(gè)一個(gè)解決。
首先解決寬度：
將原來(lái)的測(cè)量方法：
float textWidth = mBound.width();//這樣寬度會(huì)不全，比系統(tǒng)的textView短
改為比較精確的測(cè)量文本寬度的方法：
float textWidth = mPaint.measureText(mTitleText);//比較精確的測(cè)量文本寬度的方式
運(yùn)行結(jié)果：
現(xiàn)在寬度就和系統(tǒng)的TextView一樣寬了。
然后解決高度問(wèn)題：
先了解一下Android是怎么樣繪制文字的，這里涉及到幾個(gè)概念，分別是文本的top，bottom，ascent，descent，baseline。
Baseline是基線，在android中，文字的繪制都是從Baseline處開始的，Baseline往上至字符“最高處”的距離我們稱之為ascent（上坡度），Baseline往下至字符“最低處”的距離我們稱之為descent（下坡度）；
leading（行間距）則表示上一行字符的descent到該行字符的ascent之間的距離；
top和bottom文檔描述地很模糊，其實(shí)這里我們可以借鑒一下TextView對(duì)文本的繪制，TextView在繪制文本的時(shí)候總會(huì)在文本的最外層留出一些內(nèi)邊距，因?yàn)門extView在繪制文本的時(shí)候考慮到了類似讀音符號(hào)，下圖中的A上面的符號(hào)就是一個(gè)拉丁文的類似讀音符號(hào)的東西：
Baseline是基線，Baseline以上是負(fù)值，以下是正值，因此 ascent，top是負(fù)值， descent和bottom是正值。
因此我們這樣改，將原來(lái)的測(cè)量方法：
float textHeight = mBound.height();
改為比較精確的測(cè)量文本寬度的方法：
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics(); float textHeight = Math.abs((fontMetrics.bottom - fontMetrics.top));
運(yùn)行結(jié)果：
最后就是解決文本居中的問(wèn)題：
將之前的繪制文本寬度
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 的意思是 將整個(gè)文字區(qū)域抬高至控件的1/2
(fm.bottom - fm.top)其實(shí)就是文本的高度，(fm.bottom - fm.top) / 2的意思就是將文本下沉文本高度的一半
運(yùn)行結(jié)果：
現(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;
? ? /**
? ? ?* 繪制時(shí)控制文本繪制的范圍
? ? ?*/
? ? 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：一般是設(shè)置了明確的值或者是MATCH_PARENT
? ? ?AT_MOST：表示子布局限制在一個(gè)最大值內(nèi)，一般為WARP_CONTENT
? ? ?UNSPECIFIED：表示子布局想要多大就多大，很少使用
? ? ?* @param widthMeasureSpec
? ? ?* @param heightMeasureSpec
? ? ?*/
? ? @Override
? ? protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// ? ? ? ?super.onMeasure(widthMeasureSpec, heightMeasureSpec);
? ? ? ? // 獲取寬高的設(shè)置模式
? ? ? ? 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) {//當(dāng)設(shè)定了寬度，測(cè)量的寬度就等于設(shè)定的寬度
? ? ? ? ? ? width = widthSize;
? ? ? ? } else {
? ? ? ? ? ? mPaint.setTextSize(mTitleTextSize);
? ? ? ? ? ? mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
// ? ? ? ? ? ?float textWidth = mBound.width();//這樣寬度會(huì)不全，比系統(tǒng)的textView短
? ? ? ? ? ? float textWidth = mPaint.measureText(mTitleText);//比較精確的測(cè)量文本寬度的方式
? ? ? ? ? ? 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();//這樣高度會(huì)不全，比系統(tǒng)的textView窄
? ? ? ? ? ? Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
? ? ? ? ? ? float textHeight = Math.abs((fontMetrics.bottom - fontMetrics.top));
? ? ? ? ? ? int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());
? ? ? ? ? ? height = desired;
? ? ? ? }
? ? ? ? //最終設(shè)置寬高
? ? ? ? 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);
? ? }
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
android關(guān)于按鈕點(diǎn)擊效果實(shí)現(xiàn)的方法
今天小編就為大家分享一篇關(guān)于android關(guān)于按鈕點(diǎn)擊效果實(shí)現(xiàn)的方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-03-03
Android使用DrawerLayout實(shí)現(xiàn)雙向側(cè)滑菜單
這篇文章主要為大家詳細(xì)介紹了Android使用DrawerLayout實(shí)現(xiàn)雙向側(cè)滑菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Flutter手勢(shì)密碼的實(shí)現(xiàn)示例(附demo)
本文主要介紹了Flutter手勢(shì)密碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Android組件Glide實(shí)現(xiàn)圖片平滑滾動(dòng)效果
這篇文章主要介紹了Android組件Glide實(shí)現(xiàn)圖片平滑滾動(dòng)效果的相關(guān)資料,具有一定的參考價(jià)值，需要的朋友可以參考下2016-07-07
簡(jiǎn)單實(shí)現(xiàn)Android文件上傳
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)Android文件上傳的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Android 插件化處理方案的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā)，感興趣的朋友可以了解下2021-04-04
詳解Android應(yīng)用中ListView列表選項(xiàng)欄的編寫方法
這篇文章主要介紹了Android應(yīng)用中ListView列表選項(xiàng)欄的編寫方法,講解了使用安卓自帶的ListView與自定義multiple ListView的方法,需要的朋友可以參考下2016-03-03
Android設(shè)計(jì)模式之Builder模式解析
這篇文章主要為大家詳細(xì)介紹了Android設(shè)計(jì)模式之Builder模式解析的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Android用SharedPreferences實(shí)現(xiàn)登錄注冊(cè)注銷功能
這篇文章主要為大家詳細(xì)介紹了Android用SharedPreferences實(shí)現(xiàn)登錄注冊(cè)注銷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Android中顏色選擇器和改變字體顏色的實(shí)例教程
這篇文章主要介紹了Android中顏色選擇器和改變字體顏色的實(shí)例教程,其中改變字體顏色用到了ColorPicker顏色選擇器,需要的朋友可以參考下2016-04-04