如何在Android中用TextInputLayouts代替EditTexts

DebugUsery
537 阅读5分钟

在Android中用TextInputLayouts取代EditTexts

在Android应用程序中使用EditText时，开发人员可能发现它的定制很麻烦。为了解决这个问题，开发人员想出了TextInputLayout ，与普通的EditText 相比，它有更多更好的功能。在本教程中，我们将讨论TextInputLayout ，并重点讨论它与EditText 的不同之处。

前提条件

要完成本教程，读者应该。

  • 安装有[Android Studio]。
  • 对XML 有充分的了解。
  • 熟悉Android Studio。

目标

在本教程结束时，读者应该。

  • 对什么是TextInputLayout 有一个概述。
  • 知道TextInputLayout 和EditText 之间的区别。
  • 能够创建和处理不同的文本字段。

什么是TextInputLayout？

TextInputLayout是一个视图容器，用来为EditText添加更多的功能。它作为EditText的一个封装器，有一些功能，如。

  • 浮动提示。
  • 可以禁用或启用的动画。
  • 错误标签，当错误发生时显示错误信息。
  • 字符计数器，显示用户输入的字符数。
  • 密码可见性切换。
  • 它还扩展了LinearLayout。

简而言之，TextInputLayout是对现有EditText的改进。

TextInputLayout与EditText有什么不同

TextInputLayout和EditText的主要区别在于，TextInputLayout扩展了LinearLayout，并且它必须包含TextInputEditText，后者扩展了EditText。

之所以如此，是因为TextInputEditText在TextInputLayout的包围中工作。如果你用一个EditText代替TextInputEditText，它可以工作，但你会得到一个警告。

这是因为TextInputEditText为文本字段提供了可访问性支持，并允许TextInputLayout对输入文本的视觉方面有更大的控制。

文本字段

文本字段是一个标准的输入部件（单行），当点击它时，光标会被放在上面，并弹出一个键盘，允许用户在字段中输入文本。为了给你的布局添加一个文本字段，我们使用EditText元素。

使用文本字段

要在你的应用程序中使用文本字段，首先，添加新的材料组件依赖。

填充的文本字段

根据官方文档，填充的文本字段比轮廓的文本字段有更多的视觉强调，因此当被其他内容和组件包围时，它们就会变得很突出。

它有两种高度的变体，也就是说，它包括标准和密集的文本字段。如果没有设置样式，填充的文本字段是默认的样式。

勾勒文本字段

在一个轮廓文本字段中，我们在TextInputLayout上应用样式。结果，我们得到了一个轮廓鲜明的文本字段。

像填充文本字段一样，轮廓文本字段有两种高度的变体。我们有一些属性可以用来设置一个文本字段的轮廓外观（如角半径轮廓和笔画颜色轮廓）。

为文本字段设计主题

在主题设计中，我们在文本字段中使用一个材料主题。你可以在颜色、地形和形状方面对文本字段进行自定义。

像FilledTextField和OutlinedTextField一样，主题文本字段有两种高度的变体，也就是说，它由标准和密集的文本字段组成。

在Android应用程序中添加TextInputLayout

在这一点上，我们将创建一个新的项目来实际学习如何在一个Android应用程序中使用TextInputLayout。我们将使用一个单一的活动项目，我们将使用activity_main.xml 文件。

第1步：创建一个项目

首先，你必须在Android Studio中打开一个新项目。然后打开你的应用程序级别的build.gradle 文件，添加材质依赖，并点击sync now 。

第2步：添加材料依赖性

// Material dependency 
implementation 'com.google.android.material:material:1.4.0'

第3步：在你的'activity_main'文件中添加'TextInputLayout'。

删除默认的TextView ，在ConstraintLayout ，添加TextInputLayout作为子布局，并将其对齐，如下图。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

第4步：将TextInputEditText添加到TextInputLayout中

在TextInputLayout里面，创建TextInputEditText - 用户可以在这里输入和编辑数据。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

第5步：将提示属性添加到TextInputEditText中

在TextInputEditText中添加提示属性android:hint="Enter your name" ，如下图所示。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:boxBackgroundMode="outline"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your name" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

第6步：将boxBackgroundMode添加到TextInputLayout中

由于我们有一个FilledTextField，我们可以在TextInputLayout中添加boxBackgroundMode属性app:boxBackgroundMode="outline" ，它就会有一个盒子的轮廓外观。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:boxBackgroundMode="outline"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your name" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

第7步：为FilledTextField设置样式（将FilledTextField改为OutlinedTextField）。

你可以使用style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" ，将你的FilledTextField的外观改变为OutlinedTextField。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:boxBackgroundMode="outline"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your name" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

第8步：在TextInputLayout中添加boxCornerRadius属性（这是可选的）。

你也可以在你的TextInputLayout中添加boxCornerRadius属性来改变方框轮廓的角半径。

<com.google.android.material.textfield.TextInputLayout
app:boxCornerRadiusTopEnd="16dp"
app:boxCornerRadiusTopStart="16dp"
app:boxCornerRadiusBottomStart="16dp"
app:boxCornerRadiusBottomEnd="16dp" />

以上是可用的boxCornerRadius属性。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:boxBackgroundMode="outline"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:boxCornerRadiusTopEnd="16dp"
        app:boxCornerRadiusTopStart="16dp"
        app:boxCornerRadiusBottomStart="16dp"
        app:boxCornerRadiusBottomEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your name" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

第9步：在TextInputLayout中添加HelperText（这是可选的）。

辅助文本提供了关于一个字段的输入的额外信息，比如它将如何被利用。

你可以使用属性app:helperText="This is an helper-text" ，启用或禁用帮助文本。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:boxBackgroundMode="outline"
        app:helperText="This is an helper text"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:boxCornerRadiusTopEnd="16dp"
        app:boxCornerRadiusTopStart="16dp"
        app:boxCornerRadiusBottomStart="16dp"
        app:boxCornerRadiusBottomEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your name" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

第10步：在TextInputLayout中添加文本计数器，在TextInputEditText中添加最大长度（这是可选的）。

你可以通过启用计数器，使用属性app:counterEnabled="true" ，并使用 counterMaxLength 属性app:counterMaxLength="20" 设置用户输入的最大长度。

添加MaxLength属性android:maxLength="20" ，是为了防止用户超过counterMaxLength值中指定的最大输入（字符）数。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:boxBackgroundMode="outline"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:boxCornerRadiusTopEnd="16dp"
        app:boxCornerRadiusTopStart="16dp"
        app:boxCornerRadiusBottomStart="16dp"
        app:boxCornerRadiusBottomEnd="16dp"
        app:counterEnabled="true"
        app:counterMaxLength="20"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLength="20"
            android:hint="Enter your name" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

结论

TextInputLayout是一个强大的布局，它很容易使用，并且有很棒的功能，比如浮动提示动画、错误标签、字符计数器、密码可见性切换等，这些都是普通EditTexts所不具备的。

作为一个开发者，TextInputLayout的功能允许你创建或设计漂亮的TextFields，它既可以是一个填充的文本字段，也可以是一个概述的文本字段或主题的文本字段。

avatar
文章
阅读
粉丝