Android自定義View繪製居中文字

2022-06-29 18:02:08

本文範例為大家分享了Android自定義View繪製居中文字的具體程式碼，供大家參考，具體內容如下

自定義view的步驟：

1、自定義View的屬性
2、在View的構造方法中獲得我們自定義的屬性
3、重寫onMesure（非必須）
4、重寫onDraw

1、自定義View的屬性，首先在res/values/ 下建立一個attrs.xml ，在裡面定義我們的屬性，只定義三個，有文字、顏色和字型大小：

<!--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）,系統幫我們測量的結果就是我們設定的實際值；
如果是 wrap_content 或者 match_parent 系統幫我們測量的結果就是 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，紅色和綠色的是系統的TextView。因為這裡寬高設定為wrap_content，並且沒有padding，和系統原生的TextView比寬度和高度都不夠，還繪製不全。那接下來一個一個解決。

首先解決寬度：

將原來的測量方法：

float textWidth = mBound.width();//這樣寬度會不全，比系統的textView短

改為比較精確的測量文字寬度的方法：

float textWidth = mPaint.measureText(mTitleText);//比較精確的測量文字寬度的方式

執行結果：

現在寬度就和系統的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 的意思是將整個文字區域擡高至控制元件的1/2
(fm.bottom - fm.top)其實就是文字的高度，(fm.bottom - fm.top) / 2的意思就是將文字下沉文字高度的一半

執行結果：

現在基本和系統的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();//這樣寬度會不全，比系統的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();//這樣高度會不全，比系統的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);
    }

}

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

Android自定義View繪製居中文字

自定義view的步驟：

熱門文章