android TextInputLayout使用

桃扇骨 2022-06-03 00:09 384阅读 0赞

TextInputLayout其实是一个容器，他继承自LinearLayout，该容器是作用于TextView的，TextInputLayout只能包裹一个子节点，类似于ScrollView。  
本文以EditText举例，实现的效果如上效果图，EditText输入内容以后，hint内容移动至编辑框上方。

# 实现 #

**导入依赖**

因为TextInputLayout是Android 5.0以后新加的库的控件（Android Design Support Library），所以在使用前先要将Library导入到项目中来

![这里写图片描述][SouthEast]

或者在gradle下添加依赖

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

**XML**

<android.support.design.widget.TextInputLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
    
           <EditText
               android:id="@+id/et_pwd"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:hint="密码" />
       </android.support.design.widget.TextInputLayout>

到此为止，如果你运行，会发现已经有了动画效果  
![这里写图片描述][SouthEast 1]

# 使用 #

**XML布局**

<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    
        <android.support.design.widget.TextInputLayout android:id="@+id/til_username" android:layout_width="match_parent" android:layout_height="wrap_content" app:hintAnimationEnabled="false" app:hintTextAppearance="@style/FloatingStyle">
    
            <EditText android:id="@+id/et_username" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#F00F0F" />
        </android.support.design.widget.TextInputLayout>
    
        <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content">
    
            <EditText android:id="@+id/et_pwd" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="密码" />
        </android.support.design.widget.TextInputLayout>
    
        <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="ok" android:text="确定" />
    
    </LinearLayout>

**测试类**

import android.support.design.widget.TextInputLayout;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.EditText;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity { 
    
        private EditText mUserName;
        private EditText mPassWord;
        private TextInputLayout mTextInputLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mTextInputLayout = (TextInputLayout) findViewById(R.id.til_username);
            // mUserName = (EditText) findViewById(R.id.et_username);
            mPassWord = (EditText) findViewById(R.id.et_pwd);
            // 通过TextInputLayout设置hint内容，也可以通过直接设置EditText的hint属性
            mTextInputLayout.setHint("用户名");
        }
    
        // 确认按钮123123
        public void ok(View view) {
            // 方式一：通过TextInputLayout获取到里面的子控件EditText后在获取编辑的内容
            String username = mTextInputLayout.getEditText().getText().toString();
            // 方式二：直接通过EditText获取到里面的编辑内容
            String pwd = mPassWord.getText().toString();
            Toast.makeText(this, "username = " + username + "\npwd = " + pwd, Toast.LENGTH_SHORT).show();
            // 显示错误信息
            mTextInputLayout.setError("错误提示信息");
        }
    }

那么如何修改他的样式呢，我做了如下简单的总结

# 修改样式 #

**相关属性**

1.  app:hintAnimationEnabled=”true”//设置是否可以使用动画，默认是true
2.  app:hintTextAppearance=”@style/myStyle”//设置hint的文本属性，改变hint文字的大小颜色等属性
3.  app:counterEnabled=”true”//设置是否可以开启计数器，默认是false
4.  app:counterOverflowTextAppearance=”” 计算器越位后的文字颜色和大小
5.  app:counterMaxLength=”“计算器的最大字数限制
6.  app:errorEnabled=”true” 是否允许错误提示
7.  app:errorTextAppearance=”” 错误提示的文字大小和颜色
8.  app:passwordToggleEnabled=”true”显示小眼睛
9.  app:passwordToggleTint=”@color/colorAccent” 给小眼睛上色
10. app:passwordToggleTintMode=”multiply”小眼睛的显示方式  
    需要注意的是：如果想要显示小眼睛，就需要在 TextInputEditText 或者 EditText 中设置 为密码格式。比如： android:inputType=”textPassword”

**取消动画**

可以通过TextInputLayout对象，执行setHintAnimationEnabled(boolean enabled)方法

// false 关闭动画 true 开启动画
    mTextInputLayout.setHintAnimationEnabled(false);

或者在xml里添加hintAnimationEnabled属性设置

app:hintAnimationEnabled="false"

效果 ：

![这里写图片描述][SouthEast 2]

**设置hint移动到上方以后的颜色和字体大小**

在XML里对应的TextInputLayout标签下添加hintTextAppearance属性

<android.support.design.widget.TextInputLayout
        ……
        app:hintTextAppearance="@style/FloatingStyle">
    
        <EditText
            …… />
    </android.support.design.widget.TextInputLayout>

然后在res->values->styles.xml下添加一个style

效果（\#AA00FF，20sp） ：

![这里写图片描述][SouthEast 3]

**设置编辑文字的颜色**

这个就是设置EditText的颜色

<android.support.design.widget.TextInputLayout
        ……>
    
        <EditText
            ……
            android:textColor="#FF0000" />
    </android.support.design.widget.TextInputLayout>

**hint字体颜色**

<android.support.design.widget.TextInputLayout
        ......
        android:textColorHint="@color/text_gray1">
    
        <EditText
            ...... />
    
    </android.support.design.widget.TextInputLayout>

**设置下划线的颜色**

修改res->values->styles.xml下”AppTheme”里的colorAccent属性

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  …… <item name="colorAccent">#0000FF</item> </style>

效果（\#0000FF） :  
![这里写图片描述][SouthEast 4]

[SouthEast]: /images/20220603/9ff2fc1b70774fd7a5d528ce3a55fa3a.png
[SouthEast 1]: /images/20220603/a8ad11c67869472c96081f54e8e0474c.png
[SouthEast 2]: /images/20220603/727e63e12ac24d3c8ec5d6ef5b53ecf1.png
[SouthEast 3]: /images/20220603/8a930645e5474f81991319b6aa70c46d.png
[SouthEast 4]: /images/20220603/107b33bf211c4ccf9af1da02823ebb36.png