美文网首页Android知识技巧总结项目Android知识
Material Design风格文本输入样式TextInput

Material Design风格文本输入样式TextInput

作者: 开飞机的老舒克 | 来源:发表于2017-04-22 13:45 被阅读84次

    TextInputLayout介绍

    TextInputLayout是Google基于Material Design风格出现的一个文本输入布局。主要特点在样式上,官方第一句介绍是当输入的文本显示或者隐藏的时候,EditText显示浮动标签的布局。

    先看看样式

    样式其实是有动画效果的

    屏幕快照 2017-04-22 下午12.32.49副本.png 屏幕快照 2017-04-22 下午12.33.07副本.png

    使用方法

    引入包环境

    由于这个控件在这个android.support.design.widget包下,所以要查看是否已经引入了:

    compile ‘com.android.support:design:22.2.0’

    compile ‘com.android.support:appcompat-v7:22.2.0’

    版本可根据需求自行调整

    在布局中加入代码
    <android.support.design.widget.TextInputLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content">
    
         <android.support.design.widget.TextInputEditText
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:hint="@string/form_username"/>
    
     </android.support.design.widget.TextInputLayout>
     
    

    样式修改

    将默认的AppTheme主体添加如下属性

    <item name="android:textColorHint">@colorcommonTextColorWhite</item>
    <item name="colorControlNormal">@colorcommonTextColorWhite</item>
    <item name="colorControlActivated">@colorcommonTextColorWhite</item>
    <item name="colorControlHighlight">@colorcommonTextColorWhite</item>
    

    解释:

    属性 含义
    android:textColorHint 提示字体的颜色
    colorControlNormal 下划线没有获取焦点,也就是默认的颜色
    colorControlActivated 点击时下划线的颜色

    计数器功能

    使用

    TextInputLayout还实现了输入时候记录输入字符数的功能,可以通过设置参数实现,导入如下环境

      xmlns:app="http://schemas.android.com/apk/res-auto"
    

    添加如下属性

    app:counterEnabled="true"
    app:counterMaxLength="11"
    app:counterTextAppearance="@style/text_style"
    
    属性 含义
    app:counterEnabled 是否开启此功能
    app:counterMaxLength 计数器限制的最大值
    app:counterTextAppearance 计数器的字体样式

    错误提示功能

    TextInputLayout还有个错误提示的功能,可以直接通过api使用。

    添加如下代码

    app:errorEnabled="true"
    app:errorTextAppearance="@style/error_text_style"
    

    在java代码中设置

    textInputLayout.setError("这是textInputLayout的错误提示");
    mobile.setError("这是EditText的错误提示");
    

    密码可视功能

    将inputType的类型设置为password之后,可以通过设置如下属性。而且默认效果支持Material Design效果和默认动画,也是酷酷的。

    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@color/colorAccent"
    
    属性 含义
    app: passwordToggleEnabled 是否开启密码可视的功能
    app: passwordToggleTint 修改提示图标的颜色

    总结

    google继Android5.0后出了一系列Material Design风格的控件,也引起了部分web端与Android端的的Material Design风格化。个人认为这也是一个比较好的设计语言。如果利用的好,将会对APP的交互很有利。

    相关文章

      网友评论

        本文标题:Material Design风格文本输入样式TextInput

        本文链接:https://www.haomeiwen.com/subject/xvdszttx.html