Android 强大的输入框（TextFieldBoxes）

最新推荐文章于 2023-02-26 09:44:02 发布

我的头上没有犄角

最新推荐文章于 2023-02-26 09:44:02 发布

阅读量2.4k

点赞数 3

原文链接：https://www.jianshu.com/p/bc867ebca3ca

版权

作者：I_Gisvity
链接：https://www.jianshu.com/p/bc867ebca3ca
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

安装

在你的项目中加入以下依赖：

Gradle:

allprojects {
    repositories {
      ...
      maven { url 'https://jitpack.io' }
    }
}

dependencies {
    compile 'com.github.HITGIF:TextFieldBoxes:1.3.7'
}

Maven:

<repositories>
    <repository>
         <id>jitpack.io</id>
         <url>https://jitpack.io</url>
    </repository>
</repositories>

<dependency>
    <groupId>com.github.HITGIF</groupId>
    <artifactId>TextFieldBoxes</artifactId>
    <version>1.3.7</version>
</dependency>

SBT:

resolvers += "jitpack" at "https://jitpack.io"

libraryDependencies += "com.github.HITGIF" % "TextFieldBoxes" % "1.3.7"

Leiningen:

:repositories [["jitpack" "https://jitpack.io"]]

:dependencies [[com.github.hitgif/textfieldboxes "1.3.7"]]

使用

1. 基础

将包含studio.carbonylgroup.textfieldboxes.ExtendedEditText 的 studio.carbonylgroup.textfieldboxes.TextFieldBoxes 加入你的布局文件:

...
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    android:id="@+id/text_field_boxes"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:labelText="Label">

    <studio.carbonylgroup.textfieldboxes.ExtendedEditText
        android:id="@+id/extended_edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</studio.carbonylgroup.textfieldboxes.TextFieldBoxes>
...

注意：自 release 1.3.6 起，app:labelText 是可选项。

image

2. 启用 / 禁用

在 xml 中加入 app:enabled 或在 Java 代码中使用 setEnabled(boolean enabled)。

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    ...
    app:enabled="false">

image

3. 帮助和错误信息

注意: 将帮助或错误信息设置为任何不为空的字符将会使底部 View (包含了帮助标签) 可见并增加 TextFieldBoxes 的高度。所以如果你想让底部 View 始终可见 (保持增加后的高度)，则可在帮助标签应为空时将其设为 " " 。

帮助信息:

在 xml 中加入 app:helperText 或在 Java 代码中使用 setHelperText(String helperText)。

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    ...
    app:helperText="Helper is here">

image

错误信息:

在 Java 代码中使用 setError(String errorText, boolean giveFocus)。

giveFocus 参数决定被设置错误的文本域是否获得焦点。如果为 true，则该文本域立即获得焦点。

注意: 文本改动 (输入或删除) 时会自动清除错误信息。

setError("Error message");

image

4. 前缀 & 后缀

！注意: 前缀与后缀应在 ExtendedEditText 中设置。

在 xml 中加入 app:prefix 或在 Java 代码中使用 setPrefix(String prefix) 以设置文本域前端的前缀。

在 xml 中加入 app:suffix 或在 Java 代码中使用 setSuffix(String suffix) 以设置文本域末端的后缀。

<studio.carbonylgroup.textfieldboxes.ExtendedEditText
    ...
    app:prefix="$ ">

image

<studio.carbonylgroup.textfieldboxes.ExtendedEditText
    ...
    app:suffix="\@gmail.com">

image

5. 最大和最小字符数

注意: 设置最大或最小字符数将会使底部 View (包含了计数标签) 可见并增加 TextFieldBoxes 的高度。

在 xml 中加入 app:maxCharacters 或在 Java 代码中使用 setMaxCharacters(int maxCharacters) 以设置最大字符数。在 Java 代码中使用 removeMaxCharacters() 以移除限制。

在 xml 中加入 app:minCharacters 或在 Java 代码中使用 setMinCharacters(int minCharacters) 以设置最小字符数。在 Java 代码中使用 removeMinCharacters() 以移除限制。

当超出字符数限制时底部的线会变成 errorColor（默认为红色）。默认值是 0, 表示没有限制。

注意: 空格和换行不计入字符数。

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    ...
    app:maxCharacters="10"
    app:minCharacters="5">

image

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    ...
    app:maxCharacters="5">

image

6. 首图标

在 xml 中加入 app:iconSignifier 或在 Java 代码中使用 setIconSignifier(Int resourceID) 以设置 TextFieldBoxes 前边的图标（如果你想要有）。

你可以在 Java 代码中使用 setIsResponsiveIconColor(boolean isrResponsiveIconColor) 以设置首图标是否会和标签文本与底部的线一样在获得或失去焦点时改变颜色。
注意：如果值为 true，图标颜色将始终为 HighlightColor (与底部的线一样)，即在失去焦点时将会变灰。如果为 false，图标颜色将始终为 primaryColor。

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    ...
    app:iconSignifier="@drawable/ic_vpn_key_black_24dp">

image

7. 末图标

在 xml 中使用 app:endIcon 或在 Java 代码中使用 setEndIcon(Int resourceID) 以设置文本域末端的 ImageButton 的图标（如果你想要有）。

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    ...
    app:endIcon="@drawable/ic_mic_black_24dp">

image

为了让它有点用（触发语音输入、下拉事件）, 你需要在 Java 代码中使用 getEndIconImageButton() 以设置, 举个例子, 点击时的事件（.setOnClickListener()）, 或者其他的需求。

final TextFieldBoxes textFieldBoxes = findViewById(R.id.text_field_boxes);
textFieldBoxes.getEndIconImageButton().setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // 点击时的事件
    }
});

8. 清除按钮

在 xml 中使用 app:hasClearButton 或在 Java 代码中使用 setHasClearButton(boolean hasClearButton) 以设置是否显示清除按钮。

如果为 true, 每当文本域中有字符输入时（任何字符）末端将会显示清除按钮。

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    ...
    app:hasClearButton="true">

image

9. 自定义颜色

Primary Color 是底部的线、标签文字和首图标在获得焦点时的颜色。在 xml 中加入 app:primaryColor 或在 Java 代码中使用 setPrimaryColor(int colorRes) 以设置。默认值为目前主题的 Primary Color。

Secondary Color 是底部的线、标签文字和首图标在失去焦点时的颜色。在 xml 中加入 app:secondaryColor 或在 Java 代码中使用 setSecondaryColor(int colorRes) 以设置。默认值为目前主题的 textColorTertiary。

Error Color 是出现错误时显示的颜色 (e.g. 超出字符数限制, setError())。在 xml 中加入 app:errorColor 或在 Java 代码中使用 setErrorColor(int colorRes) 以设置。默认值是 A400 red。

Helper Text Color 是帮助文本的颜色。在 xml 中加入 app:helperTextColor 或在 Java 代码中使用 setHelperTextColor(int colorRes) 以设置。默认值是 54% black。

Panel Background Color 是文本框背板的颜色。在 xml 中加入 app:panelBackgroundColor 或在 Java 代码中使用 setPanelBackgroundColor(int colorRes) 以设置。默认值是 6% black。需要注意的是根据规范，默认的颜色是 6% 透明度的黑色 (#000000)，所以如果你要自定义颜色并且仍需让其保持透明，则应同样设置一个带透明度的颜色。

<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    ...
    app:primaryColor="#1B5E20"
    app:errorColor="#ddaa00"
    app:helperTextColor="#795548"
    app:panelBackgroundColor="#ffe8e8">

image

10. 自定义 EditText

自 release 1.3.0 起，可以直接自定义 TextFieldBoxes 中的 ExtendedEditText。

final TextFieldBoxes textFieldBoxes = findViewById(R.id.text_field_boxes);
final ExtendedEditText extendedEditText = findViewById(R.id.extended_edit_text);
extendedEditText.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) {
    }

    @Override
    public void afterTextChanged(Editable editable) {
        if (editable.toString().equals("wrong"))
            textFieldBoxes.setError("It's wrong");
    }
});

image

11. 暗主题

TextFieldBoxes 用目前主题中的颜色属性因此将自动改变颜色以适应暗主题而不需其他设置。

image

全部属性

ExtendedEditText

文本

属性	描述
`app:prefix`	前缀文本
`app:suffix`	后缀文本

颜色

属性	描述	默认值
`app:prefixTextColor`	前缀文本颜色	目前主题 `textColorTertiary`
`app:suffixTextColor`	后缀文本颜色	目前主题 `textColorTertiary`

TextFieldBoxes

文本

属性	描述
`app:label`	顶部的标签文本
`app:helperText`	底部的帮助文本

颜色

属性	描述	默认值
`app:helperTextColor`	帮助文本颜色	目前主题 `textColorTertiary`
`app:counterTextColor`	计数文本颜色	目前主题 `textColorTertiary`
`app:errorColor`	错误时的显示颜色 (e.g. 超出字符限制, `setError()`)	`A400 red`
`app:primaryColor`	底部的线、标签文字和首图标在获得焦点时的颜色	目前主题 `colorPrimary`
`app:secondaryColor`	底部的线、标签文字和首图标在失去焦点时的颜色	目前主题 `textColorTertiary`
`app:panelBackgroundColor`	文本框背板的颜色	6% 目前主题 `colorForeground`

图标

属性	描述	默认值
`app:iconSignifier`	TextFieldBoxes 前边的图标的资源 ID	`0`
`app:endIcon`	文本域末端的图标的资源 ID	`0`
`app:isResponsiveIconColor`	首图标是否会和标签文本与底部的线一样在获得或失去焦点时改变颜色	`True`

字符统计

属性	描述	默认值
`app:maxCharacters`	最大字符数。`0` 表示没有限制	`0`
`app:minCharacters`	最小字符数。`0` 表示没有限制	`0`

我的头上没有犄角

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Android 强大的输入框（TextFieldBoxes）

作者：I_Gisvity链接：https://www.jianshu.com/p/bc867ebca3ca来源：简书简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。安装在你的项目中加入以下依赖：Gradle:allprojects { repositories { ... maven { url 'https:...
复制链接

扫一扫