android jni示例_Android TextInputLayout示例

最新推荐文章于 2022-04-18 18:08:04 发布

cunchi4221

最新推荐文章于 2022-04-18 18:08:04 发布

阅读量351

点赞数

文章标签： java android javascript vue xml ViewUI

原文链接：https://www.journaldev.com/14748/android-textinputlayout-example

版权

android jni示例

In this tutorial, we’ll be looking in depth at the features that Android TextInputLayout provides us. Android TextInputLayout is a design component that comes with the Material Design Support Library.

在本教程中，我们将深入研究Android TextInputLayout提供给我们的功能。 Android TextInputLayout是材料设计支持库随附的设计组件。

Android TextInputLayout (Android TextInputLayout)

Android TexInputLayout extends LinearLayout. The primary use of a TextInputLayout is to act as a wrapper for EditText(or its descendant) and enable floating hint animations.

Android TexInputLayout扩展了LinearLayout。 TextInputLayout的主要用途是充当EditText（或其后代）的包装，并启用浮动提示动画。

Rule of Thumb : TextInputLayout should wrap TextInputEditText instead of the normal EditText.

经验法则 ：TextInputLayout应该包装TextInputEditText而不是普通的EditText 。

Reason?
TextInputEditText is a sub-class of EditText and is designed for use as a child of TextInputLayout.

原因？
TextInputEditText是EditText的子类，旨在用作TextInputLayout的子级。

Furthermore, using an EditText instead would shoot us a warning : EditText added is not a TextInputEditText. Please switch to using that class instead.

此外，改用EditText会向我们发出警告： EditText added is not a TextInputEditText. Please switch to using that class instead EditText added is not a TextInputEditText. Please switch to using that class instead 。

TextInputLayout has much more to offer than just displaying floating hint labels.

TextInputLayout提供的功能不仅仅显示浮动提示标签。

Android TextInputLayout功能 (Android TextInputLayout Features)

Some of the features that we’ll be covering in this tutorial are :

我们将在本教程中介绍的一些功能包括：

Enabling/Disabling floating hints
启用/禁用浮动提示
Enabling/Disabling floating hint animation
启用/禁用浮动提示动画
Displaying Error Messages
显示错误信息
Showing Character Counter
显示字符计数器
Alarming the user when the Character Count Exceeds its limit
字符数超过限制时警告用户
Customising the Text Appearance for floating hint, error label, character counter
自定义浮动提示，错误标签，字符计数器的文本外观
Password Visibility Toggle
密码可见性切换

We’ll look at each of these features and implement them in an Android Studio Project.

我们将研究所有这些功能，并在Android Studio项目中实现它们。

Android TextInputLayout示例项目结构 (Android TextInputLayout Example Project Structure)

This is a single Activity application. We’ll be doing all the stuff inside the layout, activity and styles.xml and colors.xml files.

这是一个活动应用程序。我们将处理layout，activity和styles.xml和colors.xml文件中的所有内容。

Firstly, add the dependency for the design support library inside the build.gradle file as shown below.

首先，在build.gradle文件中添加对设计支持库的依赖关系，如下所示。

compile 'com.android.support:design:25.3.1'

启用/禁用浮动提示 (Enabling/Disabling Floating Hints)

Floating Hints are enabled by default in a TextInputLayout. To disable it we need to add the following attribute inside the tag :
app:hintEnabled="false".

默认情况下，在TextInputLayout中启用浮动提示。要禁用它，我们需要在标记内添加以下属性：
app:hintEnabled="false" 。

The below xml code is from the activity_main.xml layout and has three EditText fields.

下面的xml代码来自activity_main.xml布局，具有三个EditText字段。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            android:hint="TextInputEditText" />


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_horizontal_margin">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Floating Hint Enabled Default" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:hintEnabled="false">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Floating Hint Disabled" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

The third EditText field has the floating hint disabled. Let’s see the output the above code gives us :

第三个EditText字段禁用了浮动提示。让我们看看上面的代码给我们的输出：

启用/禁用浮动提示动画 (Enabling/Disabling Floating Hint animation)

Similar to the previous feature, floating hint animation is enabled by default. To disable it we need to add the following attribute inside TextInputLayout tag.
app:hintAnimationEnabled="false"

与以前的功能类似，默认情况下启用浮动提示动画。要禁用它，我们需要在TextInputLayout标记内添加以下属性。
app:hintAnimationEnabled="false"

The below xml code is from the activity_main.xml layout and has EditText fields for either of the cases.

下面的xml代码来自activity_main.xml布局，并且在两种情况下都具有EditText字段。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_horizontal_margin">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Floating Hint Enabled Default" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:hintAnimationEnabled="false">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Hint Animation Disabled" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

The output of the above code is shown below.

android textinputlayout hint animation output

上述代码的输出如下所示。

It’s noteworthy to mention that the second EditText field doesn’t animate the floating hint when focused.

值得一提的是，第二个EditText字段在聚焦时不会为浮动提示设置动画。

设置提示TextAppearance的样式 (Styling the hint TextAppearance)

To use a custom textColor and textSize for the hints the following attribute is used:
app:hintTextAppearance="@style/HintText"
The HintText style is written inside the styles.xml as shown below

要将自定义textColor和textSize用于提示，请使用以下属性：
app:hintTextAppearance="@style/HintText"
HintText样式写在styles.xml ，如下所示

<style name="HintText" parent="TextAppearance.Design.Hint">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/colorPrimary</item>
    </style>

The below xml code is from the activity_main.xml layout and has EditText fields for either of the cases(with/without hintTextAppearance).

下面的xml代码来自activity_main.xml布局，并具有针对两种情况（带有/不带有hintTextAppearance）的EditText字段。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_horizontal_margin">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Floating Hint Enabled" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Custom Hint TextAppearance" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

The output of the above code is shown below.

android textinputlayout hint text appearance output

上述代码的输出如下所示。

字符计数器 (Character Counter)

Character Counter is a feature used by quite a few applications. (Remember Twitter character limit?).
Set app:counterEnabled to true and app:counterMaxLength with the maximum number of characters you want in the TextInputLayout. Character Counter is by default displayed below the EditText (bottom-right) and while writing this tutorial, there’s no way to change the position, yet. Styling the counter is similar to styling the hint text.
app:counterTextAppearance is the attribute used this time.
We’ve added the following style inside the styles.xml file in our project.

字符计数器是许多应用程序使用的功能。（还记得Twitter字符限制吗？）。
将app:counterEnabled app:counterMaxLength设置为true，并将app:counterMaxLength设置为TextInputLayout中所需的最大字符数。默认情况下，“字符计数器”显示在EditText（右下）下方，在编写本教程时，尚无法更改位置。设置计数器的样式类似于设置提示文本的样式。
app:counterTextAppearance是这次使用的属性。
我们在项目的styles.xml文件中添加了以下样式。

<style name="CounterText" parent="TextAppearance.Design.Counter">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/my_pink</item>
    </style>

The below xml code is from the activity_main.xml layout and has EditText fields with a default character counter and a custom one.

下面的xml代码来自activity_main.xml布局，并具有带有默认字符计数器和自定义计数器的EditText字段。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Character Counter Limit 10" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterTextAppearance="@style/CounterText"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Character Counter Custom TextAppearance" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

The output of the above code is given below.

android text input layout character counter

上面代码的输出如下。

Let’s observe the above output closely.

让我们仔细观察上面的输出。

The first EditText field changes its counter textColor, hint textColor and the indicator color when the character count is exceeded.
当超出字符数时，第一个EditText字段将更改其计数器textColor ，hint textColor和指示器颜色。
The second EditText field does the same but also, it changes the counter custom textColor and custom textSize when the limit exceeds.
第二个EditText字段执行相同的操作，但是，当超出限制时，它将更改计数器的自定义textColor和自定义textSize 。

To specify the style we need when the character counter exceeds its limit, we need to use the counterFlow attribute that we’ll be seeing next.

为了指定当字符计数器超过其限制时需要的样式，我们需要使用接下来将要看到的counterFlow属性。

字符计数器溢出 (Character Counter Overflow)

As we’d seen above when the character count exceeds the limit defined, the counter text uses the attributes defined in counterFlow. If the attributes weren’t present, it’ll stick to the default ones as we saw in the above output. We need to use the following param
app:counterOverflowTextAppearance

如上所示，当字符数超过定义的限制时，计数器文本将使用counterFlow中定义的属性。如果不存在这些属性，则将坚持使用默认属性，如上面的输出所示。我们需要使用以下参数
app:counterOverflowTextAppearance

The style for CounterOverflow is present inside the styles.xml :

CounterOverflow的样式位于styles.xml中：

<style name="CounterOverFlow" parent="TextAppearance.Design.Counter.Overflow">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/my_orange</item>
    </style>

Add the below the code snippet to the previous activity_main.xml layout:

将以下代码段添加到先前的activity_main.xml布局中：

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="CounterOverflow CustomTextAppearance" />

        </android.support.design.widget.TextInputLayout>

Let’s run the application again.

让我们再次运行该应用程序。

错误标签 (Error Label)

Setting app:errorEnabled to true allows us to display an error text on condition beneath our EditText field. To style the Error Text, we’d use the attribute app:errorTextAppearance and add the following code inside our styles.xml file.

将app:errorEnabled设置为true允许我们在EditText字段下方的条件下显示错误文本。要设置错误文本的样式，我们将使用属性app:errorTextAppearance并将以下代码添加到我们的styles.xml文件中。

<style name="ErrorText" parent="TextAppearance.Design.Error">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/my_black</item>
    </style>

The below xml code is from the activity_main.xml layout and has EditText fields for a default error label and a custom one.

以下xml代码来自activity_main.xml布局，并具有用于默认错误标签和自定义标签的EditText字段。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/errorInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:errorEnabled="true"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/errorEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Default Error Label" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:id="@+id/customErrorInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:errorEnabled="true"
            app:errorTextAppearance="@style/ErrorText"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/customErrorEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Custom Error Label" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

To display the error text, we’ll have to call the method setError(String) on an instance of TextInputLayout in our MainActivity.java class as shown below.

要显示错误文本，我们必须在MainActivity.java类的TextInputLayout实例上调用方法setError(String) ，如下所示。

package com.journaldev.featuresoftextinputlayout;

import android.support.design.widget.TextInputEditText;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;

public class MainActivity extends AppCompatActivity {


    TextInputLayout errorInputLayout, customErrorInputLayout;
    TextInputEditText errorEditText, customErrorEditText;

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

        errorEditText = (TextInputEditText) findViewById(R.id.errorEditText);
        errorInputLayout = (TextInputLayout) findViewById(R.id.errorInputLayout);

        customErrorEditText = (TextInputEditText) findViewById(R.id.customErrorEditText);
        customErrorInputLayout = (TextInputLayout) findViewById(R.id.customErrorInputLayout);

        errorEditText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {

                if (s.length() > errorInputLayout.getCounterMaxLength())
                    errorInputLayout.setError("Max character length is " + errorInputLayout.getCounterMaxLength());
                else
                    errorInputLayout.setError(null);

            }
        });

        customErrorEditText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {

                if (s.length() > customErrorInputLayout.getCounterMaxLength())
                    customErrorInputLayout.setError("Max character length is " + customErrorInputLayout.getCounterMaxLength());
                else
                    customErrorInputLayout.setError(null);

            }
        });


    }
}

In the above code, we add a TextChangedListener(which implements TextWatcher) on each instance of TextInputEditText.
We display the error label when the current character count exceeds the counter max limit.
To clear the error label we set the value inside setError() as null.

在上面的代码中，我们在每个TextInputEditText实例上添加一个TextChangedListener （实现TextWatcher ）。
当前字符数超过计数器最大限制时，我们将显示错误标签。
为了清除错误标签，我们将setError()内的值设置为null 。

The output that the above code gives us is :

上面的代码给我们的输出是：

Note: The indicator of the text field uses the same color as the error label. It overrides the color set by counterOverflow hence has the highest priority.

注意：文本字段的指示器使用与错误标签相同的颜色。它会覆盖counterOverflow设置的颜色，因此具有最高优先级。

密码可见性切换 (Password Visibilty Toggle)

Setting app:passwordToggleEnabled to true lets you show/hide the password.
To change the icon color use app:passwordToggleTint.

将app:passwordToggleEnabled设置为true可以显示/隐藏密码。
要更改图标颜色，请使用app:passwordToggleTint 。

The below xml code is from the activity_main.xml layout and has EditText fields for a password visibilty toggle (default icon and with a tint)

以下xml代码来自activity_main.xml布局，并具有用于密码可见性切换的EditText字段（默认图标，带有色调）

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:hintTextAppearance="@style/HintText"
            app:passwordToggleEnabled="true">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password Visibility Toggle"
                android:inputType="textPassword" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:hintTextAppearance="@style/HintText"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/my_orange">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password Visibility Toggle Tint"
                android:inputType="textPassword" />

        </android.support.design.widget.TextInputLayout>
</LinearLayout>
</ScrollView>

The output displayed by the above code is:

上面的代码显示的输出是：

Note: We can use our own custom icons from password visibility toggle using app:passwordToggleDrawable.

注意：我们可以使用app:passwordToggleDrawable通过密码可见性切换使用我们自己的自定义图标。

This brings an end to this tutorial. We’ve covered all the major features present in TextInputLayout.
You can download the Android TextInputLayout Example Project from the link below. It includes each of the code snippets above.

本教程到此结束。我们已经介绍了TextInputLayout中存在的所有主要功能。
您可以从下面的链接下载Android TextInputLayout示例项目 。它包括上面的每个代码段。

Download Android TextInputLayout Project 下载Android TextInputLayout项目

Reference: Android Official Doc

参考： Android官方文档

翻译自: https://www.journaldev.com/14748/android-textinputlayout-example

android jni示例

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android jni示例_Android TextInputLayout示例

android jni示例In this tutorial, we’ll be looking in depth at the features that Android TextInputLayout provides us. Android TextInputLayout is a design component that comes with the Material Design Sup...
复制链接

扫一扫