Android Text fieids

举报
帅次 发表于 2024/02/19 10:23:11 2024/02/19
【摘要】 ​一、Text fieids        允许用户在 UI 中输入文本，TextInputLayout + TextInputEditText。​        在 Text fieids 没出来(我不知道)前，想实现这个功能就需要自己自定义控件来实现这个功能。        几年前做个上面这种样式(filled 填充型)。需要多个控件组合 + 动画才能实现，而且需要处理的逻辑也很多。 了...

​

一、Text fieids

        允许用户在 UI 中输入文本，TextInputLayout + TextInputEditText。


​

        在 Text fieids 没出来(我不知道)前，想实现这个功能就需要自己自定义控件来实现这个功能。

        几年前做个上面这种样式(filled 填充型)。需要多个控件组合 + 动画才能实现，而且需要处理的逻辑也很多。 了解到 Text fieids 那么你仅需 TextInputLayout + TextInputEditText 即可实现之前的 UI 效果，是不是美滋滋？一起来研究一下，现在用不上指不定啥时候就用上了。

        「代码上一波，特别简单」

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="请输入用户名">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:inputType="phone" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/text_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="请输入密码"
        app:counterEnabled="true"
        app:counterMaxLength="10"
        app:errorEnabled="true"
        app:passwordToggleEnabled="true"
        app:passwordToggleTintMode="multiply">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:inputType="textPassword" />

    </com.google.android.material.textfield.TextInputLayout>



    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="请输入用户名">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="请输入密码">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

</LinearLayout>

1.1 特性

  1. 确保文本字段看起来具有交互性

  2. 两种类型：填充型(filled)和轮廓型(outlined)，默认填充型

  3. 文本字段的状态（空白、有输入、错误等）应该一目了然

  4. 保持标签和错误消息简短且易于采取行动

  5. 文本字段通常出现在表单和对话框中

1.2 TextInputLayout

        继承 LinearLayout ，包装 TextInputEditText、EditText 或子类的布局，以便在用户输入文本时隐藏提示时显示浮动标签。

package com.google.android.material.textfield;
public class TextInputLayout extends LinearLayout {
}

  • 显示错误文字(图标)： setErrorEnabled(boolean) + setError(CharSequence) + setErrorIconDrawable

  • 显示帮助文本：setHelperTextEnabled(boolean) + setHelperText(CharSequence)

  • setPlaceholderText(CharSequence) 显示占位符文本

  • 显示字符计数器：setCounterEnabled(boolean) + setCounterMaxLength(int)

  • 密码可见性/清除文本： setEndIconMode(int)

  • 后缀文本：setSuffixText

  • 前缀文本：setPrefixText

        binding.textInput!!.suffixText = "/100"
        binding.textInput!!.prefixText = "进度："


​

        还有不少，用到了可以自己研究研究，常用的大概就这么些，这些也可以在xml中直接设置。
错误提示(样式文案)是在 TextInputLayout 中设置而不是 TextInputEditText。

二、填充型(filled)


图片摘自官网

  1. 容器(TextInputLayout)

  2. 前导图标(可选)，例如密码的小锁子图标

  3. 标签文本(空态)

  4. 标签文本(已输入内容)

  5. 尾随图标 (可选)

  6. 光标

  7. 输入内容

  8. 提示文字 (可选)

  9. 底部横线 (未选中)

  10. 底部横线 (enabled选中)

        支持的功能比较全，如果自己写这么一个控件还是比较复杂的，需要隐藏显示控件，处理各种状态，修改文字颜色。现在有这么个控件直接使用：真香。

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="请输入用户名">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:inputType="phone" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/text_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="请输入密码"
        app:counterEnabled="true"
        app:counterMaxLength="10"
        app:errorEnabled="true"
        app:passwordToggleEnabled="true"
        app:passwordToggleTintMode="multiply">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:inputType="textPassword" />

    </com.google.android.material.textfield.TextInputLayout>

三、轮廓型(outlined)


​

        支持的点跟上面填充型(filled)差不多，可以借鉴一下。

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="请输入用户名">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>
    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="请输入密码">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

​

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Android
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入