Android自动调整TextView的大小

In this tutorial, we’ll look at how we can implement TextView such that it auto resizes itself based on the available space and properties specified in our Android Application.

在本教程中，我们将研究如何实现TextView，使其能够根据Android应用程序中指定的可用空间和属性自动调整自身大小。

自动调整TextView的大小 (Auto-Sizing TextView)

Auto-sizing TextView was introduced with Android Oreo. Provided you set the required properties, the text size would automatically change inside its view. Auto-sizing TextView supports backward compatibility all the way till API 4.

Android Oreo引入了自动调整TextView大小的功能。 如果您设置了必需的属性，则文本大小将在其视图内自动更改。 自动调整TextView的大小一直支持向后兼容，直到API 4。

To use Auto-sizing TextView you must use SDK 26 dependency or above:

要使用自动调整TextView大小，您必须使用SDK 26依赖关系或更高版本：

implementation 'com.android.support:appcompat-v7:26.1.0'

Following are the core properties you must add on the TextView to enable Auto-sizing TextView:

以下是您必须在TextView上添加的核心属性才能启用自动调整TextView的大小：

• android:autoSizeTextType – This is set to the value uniform or none. Uniform sizes the text uniformly vertically and horizontally
  android:autoSizeTextType –设置为统一值或无值。 统一在垂直和水平方向上均匀调整文本大小
• android:autoSizeMaxTextSize – Maximum text size for the TextView
  android:autoSizeMaxTextSize – TextView的最大文本大小
• android:autoSizeMinTextSize – Minimum text size for the TextView
  android:autoSizeMinTextSize – TextView的最小文本大小

An Auto-sizing TextView can be defined in the xml as:

可以在xml中将自动调整大小的TextView定义为：

<TextView
        android:id="@+id/autoTextView"
        android:layout_width="match_parent"
        android:layout_height="125dp"
        android:text="Resizable TextView here."
        android:autoSizeMaxTextSize="100sp"
        android:autoSizeMinTextSize="12sp"
        android:autoSizeTextType="uniform" />

NOT use WRAP_CONTENT. 不要使用WRAP_CONTENT 。

How is the text auto-sized?

文字如何自动调整大小？

There are three ways to do it:

有三种方法可以做到：

• Default – Size changes happen by 1 px. That means granularity is 1 px
  默认值 -尺寸更改发生1像素。 这表示粒度为1像素
• Granularity – This is a dimension by which the text size increases or decreases in steps between the minimum and maximum text size. Example : android:autoSizeStepGranularity="2sp" increments/decrements the text size by 2 sp.
  粒度 –这是一个尺寸，文本大小可在最小和最大文本大小之间逐步增大或减小。 示例： android:autoSizeStepGranularity="2sp"将文本大小增加/减少2 sp。
• Presets – This is used to auto-size the text from an array of predefined text size values.
  预设 –用于从一组预定义的文本大小值中自动调整文本大小。

使用预设 (Using Presets)

We can define the predefined in an arrays.xml in the values folder.

我们可以在values文件夹的arrays.xml中定义预定义。

<resources>
  <array name="autosize">
    <item>10sp</item>
    <item>30sp</item>
    <item>20sp</item>
    <item>40sp</item>
    <item>100sp</item>
  </array>
</resources>

Set this in the TextView as:

在TextView中将此设置为：

<TextView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:autoSizeTextType="uniform"
    app:autoSizePresetSizes="@array/autosize" />

自动调整Or-Preeo设备的尺寸 (Auto-size for Pre-Oreo Devices)

The above properties work fine only on Android Oreo and above. To make it compatible with the older version we need to do two things:

以上属性仅在Android Oreo及更高版本上可以正常使用。 为了使其与旧版本兼容，我们需要做两件事：

• Use AppCompatTextView widget in place of TextView
  使用AppCompatTextView小部件代替TextView
• Use app: nomenclature
  使用app:术语

Define the Auto-size TextView in the XML as:

在XML中定义自动调整大小的TextView为：

<android.support.v7.widget.AppCompatTextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="TextView"
        app:autoSizeMaxTextSize="100sp"
        app:autoSizeMinTextSize="8sp"
        app:autoSizeStepGranularity="2sp"
        app:autoSizeTextType="uniform"
        />

以编程方式自动调整TextView的大小 (Auto-size TextView programmatically)

To set properties on the Auto-size TextView programmatically we use the TextViewCompat class.

要以编程方式在自动调整大小的TextView上设置属性，我们使用TextViewCompat类。

You need to pass the TextView instance and the respective sizes for the properties.

您需要传递TextView实例以及属性的相应大小。

Set the autoSize text types as: TextViewCompat.AUTO_SIZE_TEXT_TYPE_NONE or TextViewCompat.AUTO_SIZE_TEXT_TYPE_UNIFORM.

将autoSize文本类型设置为： TextViewCompat.AUTO_SIZE_TEXT_TYPE_NONE或TextViewCompat.AUTO_SIZE_TEXT_TYPE_UNIFORM 。

Setting Presets programmatically:

以编程方式设置预设：

To set the presets programmatically you need to define the arrays.xml differently.

要以编程方式设置预设，您需要不同地定义arrays.xml。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="autosize">
        <item>20</item>
        <item>40</item>
        <item>50</item>
        <item>60</item>
        <item>70</item>
    </array>
</resources>

To set it on the TextView do the following:

要在TextView上进行设置，请执行以下操作：

TextViewCompat.setAutoSizeTextTypeUniformWithPresetSizes(textView, getResources().getIntArray(R.array.autosize), TypedValue.COMPLEX_UNIT_SP);

Let’s build an android application that demonstrates the various use cases of Auto-sizing TextView.

让我们构建一个Android应用程序，演示自动调整TextView大小的各种用例。

项目结构 (Project Structure)

码 (Code)

The code for the activity_main.xml layout is given below:

下面给出了activity_main.xml布局的代码：

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="125dp"
        android:background="@android:color/black"
        android:text="Not resizable TextView. The text size is fixed here."
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/autoTextView"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextPreset" />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/autoTextView"
        android:layout_width="0dp"
        android:layout_height="125dp"
        android:background="@android:color/black"
        android:text="Resizable TextView here. This can vary the text size based on it."
        android:textColor="@android:color/white"
        app:autoSizeMaxTextSize="100sp"
        app:autoSizeMinTextSize="12sp"
        app:autoSizeStepGranularity="2sp"
        app:autoSizeTextType="uniform"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/editTextPreset" />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/autoTextViewDynamic"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:autoSizeMaxTextSize="100sp"
        app:autoSizeMinTextSize="8sp"
        app:autoSizeStepGranularity="2sp"
        app:autoSizeTextType="uniform"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:hint="Enter here"
        android:maxLines="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/autoTextViewDynamic" />


    <EditText
        android:id="@+id/editTextPreset"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:hint="Enter here for preset size changes"
        android:maxLines="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />


    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/autoTextViewEllipsize"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="16dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Auto sizing TextView with ellipsize at the end. AppCompat TextVie2"
        app:autoSizeMaxTextSize="100sp"
        app:autoSizeMinTextSize="16sp"
        app:autoSizeStepGranularity="2sp"
        app:autoSizeTextType="uniform"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

We’ve added an ellipisize property on one of the Auto-sizing TextView. This way if the content is filled at min text size the remaining Text is truncated

我们在自动调整大小的TextView之一上添加了ellipisize属性。 这样，如果内容以最小文本大小填充，则剩余文本将被截断

The code for the MainActivity.java class is given below:

MainActivity.java类的代码如下：

package com.journaldev.androidautosizingtextview;

import android.support.v4.widget.TextViewCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.TypedValue;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView txtAutoSizeTextViewDynamic = findViewById(R.id.autoTextViewDynamic);
        final TextView textView = findViewById(R.id.textView);
        EditText editText = findViewById(R.id.editText);
        EditText editTextWithPresetChanges = findViewById(R.id.editTextPreset);

        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {



            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                txtAutoSizeTextViewDynamic.setText(charSequence.toString());

            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

        editTextWithPresetChanges.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                TextViewCompat.setAutoSizeTextTypeUniformWithPresetSizes(textView, getResources().getIntArray(R.array.autosize), TypedValue.COMPLEX_UNIT_SP);
            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                textView.setText(charSequence);
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });
    }
}

We’ve added TextWatchers on two of the EditTexts which will update the Auto-sizing TextViews whenever the edit text is changed.

我们已经在两个EditText上添加了TextWatchers，它们将在更改编辑文本时更新自动调整大小的TextView。

We’ve changed the normal text view to an auto-sizing one when text is entered in the second EditText.

在第二个EditText中输入文本时，我们已将普通文本视图更改为自动调整大小的视图。

The output of the above application in action is given below:

上面应用程序的输出如下：

This brings an end to this tutorial. You can download the project from the link below:

本教程到此结束。 您可以从下面的链接下载项目：

AndroidAutoSizingTextView AndroidAutoSizingTextView

Github Project Link Github项目链接

翻译自: https://www.journaldev.com/22399/android-auto-sizing-textview