Android FixedTextView 字型大小自適應文字框

weixin_33976072發表於2018-07-22

心血來潮，換一種方式重寫幾年前寫的FixedTextView，不再一個字一個字計算適合的字型大小，使用StaticLayout來自動實現固定區域換行繪製文字。
效果圖：

程式碼不多：
測試佈局

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="文字寬度小於內容寬度" />

        <com.kw.ui.fixedtextview.FixedTextView
            android:layout_width="200dp"
            android:layout_height="30dp"
            android:layout_marginTop="10dp"
            android:background="#FF0000"
            android:padding="10dp"
            app:ftvMaxLine="2"
            app:ftvText="以上就是這篇文章的全部內容了"
            app:ftvTextColor="#FFFFFF" />

        <com.kw.ui.fixedtextview.FixedTextView
            android:layout_width="200dp"
            android:layout_height="30dp"
            android:layout_marginTop="10dp"
            android:background="#FF0000"
            android:padding="10dp"
            app:ftvMaxLine="2"
            app:ftvText="以上就是這篇文章的全部內容了,多了幾個字"
            app:ftvTextColor="#FFFFFF" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="不同高度，限制行數" />

        <com.kw.ui.fixedtextview.FixedTextView
            android:layout_width="200dp"
            android:layout_height="30dp"
            android:layout_marginTop="10dp"
            android:background="#FF0000"
            android:padding="10dp"
            app:ftvMaxLine="2"
            app:ftvText="以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家的支援。"
            app:ftvTextColor="#FFFFFF" />

        <com.kw.ui.fixedtextview.FixedTextView
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_marginTop="10dp"
            android:background="#FF0000"
            android:padding="10dp"
            app:ftvMaxLine="2"
            app:ftvText="以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家的支援。"
            app:ftvTextColor="#FFFFFF" />

        <com.kw.ui.fixedtextview.FixedTextView
            android:layout_width="200dp"
            android:layout_height="100dp"
            android:layout_marginTop="10dp"
            android:background="#FF0000"
            android:padding="10dp"
            app:ftvMaxLine="2"
            app:ftvText="以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家的支援。"
            app:ftvTextColor="#FFFFFF" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="相同高度，相同行數，限制字型大小" />

        <com.kw.ui.fixedtextview.FixedTextView

            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_marginTop="10dp"
            android:background="#FF0000"
            android:padding="10dp"
            app:ftvMaxLine="4"
            app:ftvText="以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家的支援。"
            app:ftvTextColor="#FFFFFF" />

        <com.kw.ui.fixedtextview.FixedTextView
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_marginTop="10dp"
            android:background="#FF0000"
            android:padding="10dp"
            app:ftvMaxLine="4"
            app:ftvMinTextSize="16dp"
            app:ftvText="以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家的支援。"
            app:ftvTextColor="#FFFFFF" />


    </LinearLayout>
</ScrollView>

FixedTextView

package com.kw.ui.fixedtextview;

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.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.text.Layout;
import android.text.StaticLayout;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;

class FixedTextView extends View {

    /**
     * 最大行數
     */
    private int mMaxLine;
    /**
     * 字型顏色
     */
    private int mTextColor;

    /**
     * 最小文字大小，預設為-1時，不做限制
     */
    private float mMinTextSize;
    /**
     * 文字內容
     */
    private String mText;

    private TextPaint mPaint;

    public FixedTextView(Context context) {
        super(context);
        init(context, null);
    }

    public FixedTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public FixedTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public FixedTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FixedTextView);
        mMaxLine = a.getInt(R.styleable.FixedTextView_ftvMaxLine, 1);
        mTextColor = a.getColor(R.styleable.FixedTextView_ftvTextColor, Color.parseColor("#333333"));
        mMinTextSize = a.getDimension(R.styleable.FixedTextView_ftvMinTextSize, -1);
        mText = a.getString(R.styleable.FixedTextView_ftvText);
        a.recycle();

        mPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(mTextColor);
        mPaint.setTextSize(mMinTextSize);
        mPaint.setStyle(Paint.Style.FILL);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int mWidth = canvas.getWidth();
        int mHeight = canvas.getHeight();
        int width = (int) Math.floor(mWidth - getPaddingLeft() - getPaddingRight());
        int height = (int) Math.floor(mHeight - getPaddingTop() - getPaddingBottom());
        // 最小字型高度
        float minTextHeight = (float) Math.floor(height / mMaxLine);
        // 最大字型高度
        float maxTextHeight = height;
        float textSize = Math.max(mMinTextSize, maxTextHeight);
        StaticLayout staticLayout = null;
        do {
            mPaint.setTextSize(textSize);
            staticLayout = new StaticLayout(mText, mPaint, width, Layout.Alignment.ALIGN_NORMAL, 1f, 0f, false);
            textSize -= 0.1f;
            if (mMinTextSize != -1 && textSize <= mMinTextSize) {
                break;
            }
        } while (staticLayout.getLineCount() > mMaxLine);
        if (mMinTextSize != -1 && textSize <= mMinTextSize && staticLayout.getLineCount() > mMaxLine) {
            int lineCount = staticLayout.getLineCount();
            int lineForVertical = staticLayout.getLineForVertical(height);//最後一行行號
            int strMaxLen = mText.length();
            do {
                strMaxLen -= 1;
                staticLayout = new StaticLayout(mText.substring(0, strMaxLen), mPaint, width, Layout.Alignment.ALIGN_NORMAL, 1f, 0f, false);
            } while (staticLayout.getLineCount() > lineForVertical);
            String substring = mText.substring(0, strMaxLen - 1) + "…";
            staticLayout = new StaticLayout(substring, mPaint, width, Layout.Alignment.ALIGN_NORMAL, 1f, 0f, false);
        }
        float dx = getPaddingLeft();
        // 修正橫向居中問題
        Rect rect = new Rect();
        String text = staticLayout.getText().toString();
        mPaint.getTextBounds(text, 0, text.length(), rect);
        if (rect.width() < width) {
            dx = (float) (getPaddingLeft() + Math.floor(width - rect.width()) / 2f);
        }
        // 修正縱向居中問題
        float dy = getPaddingTop() + (height - staticLayout.getHeight()) / 2f;
        canvas.translate(dx, dy);
        staticLayout.draw(canvas);
    }
}

fixedtextview_attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="FixedTextView">
        <attr name="ftvMaxLine" format="integer" />
        <attr name="ftvMinTextSize" format="dimension" />
        <attr name="ftvTextColor" format="reference|color" />
        <attr name="ftvText" format="string" />
    </declare-styleable>
</resources>

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家的支援。

input文字框寬度自適應
2018-11-16
【聊技術】在Android中實現自適應文字大小顯示
2020-12-08
Android
textarea文字框高度自適應程式碼例項
2018-05-22
JFrame自適應大小
2018-12-26
flutter根據給定寬度自適應縮放字型大小
2018-11-29
Flutter
文字的適應父部件的大小
2024-03-14
jQuery textarea框高度自適應
2018-07-20
jQuery
Android中TabLayout修改字型大小
2018-09-03
AndroidTabLayout
flutter 螢幕尺寸適配字型大小適配
2018-10-16
Flutter
Android 螢幕自適應
2024-07-26
Android
徹底弄懂設定根元素字型大小calc(100vw/18.75) 實現rem自適應
2020-10-31
REM
Web應用課第三講文字、字型、背景、邊框、展示格式
2024-06-06
Web
JavaScript動態設定文字字型大小
2018-05-22
JavaScript
Android 8.0 自適應圖示
2018-05-21
Android
短視訊商城系統，Android TextView自動調整字型大小
2022-07-07
AndroidTextView
auto_size_text 自動調整文字大小以適應其容器的 Flutter 外掛
2024-08-27
Flutter
CSS 自適應內容寬度的輸入框
2021-11-29
CSS
Android中自定義Toast文字大小
2024-06-12
AndroidAST
固定寬度下，CSS 實現自適應文字
2022-11-23
CSS
移動端：對高度自適應的輸入框說不~
2019-02-16
Android懸浮框的適配問題
2020-12-20
Android
css經典佈局之左側固定大小右側自動適應
2019-02-16
CSS
win10軟體文字字型怎麼設定大小_win10僅更改軟體文字大小在哪裡
2020-07-10
Win10
Android入門教程 | 使用 ConstraintLayout 構建自適應介面
2021-10-31
AndroidAI
Android 仿微信/支付寶字型大小調整控制元件
2019-05-12
Android控制元件
Android View篇之調整字型大小滑桿的實現
2019-05-11
AndroidView
ReactNative字型大小不隨系統字型大小變化而變化
2018-09-28
React
自適應案例
2021-12-22
UE富文字框RichTextBlock的內容設定不同的字型顏色
2024-07-20
BloC
Godot 字型邊框shader
2024-11-19
Go
EasyExcel 自適應列寬、隱藏列、動態列、單元格下拉框選擇資料、單元格文字格式
2024-08-29
Excel
微信小程式 – 富文字圖片寬度自適應（正則）
2019-01-16
微信小程式
H5頁面PC富文字內容自適應顯示
2018-06-26
H5
手機直播原始碼，讓div寬度自適應文字內容
2022-04-08
原始碼
Echarts自適應：當視窗大小發生變化時，重新渲染圖表
2024-09-03
Echarts
富文字框
2020-11-03
系統文字大小怎麼設定_win10電腦系統字型大小在哪裡設定
2020-01-29
Win10
vue中文字框自動獲取焦點
2020-11-20
Vue

Android FixedTextView 字型大小自適應文字框

相關文章