TextInputLayout 使用中遇到的问题

最新推荐文章于 2023-12-23 11:56:18 发布

DragonFangQy

最新推荐文章于 2023-12-23 11:56:18 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.youkuaiyun.com/f704084109/article/details/79270763

版权

序：
今天准备写一个登陆Demo，用到了TextInputLayout ，心血来潮用了一下counter、passwordToggle，记录一下使用过程中遇到的问题。
开发环境： win7 + AS 3.0.1

TextInputLayout 使用前准备

添加库依赖

要使用这个控件，需要引入appcompat-v7以及Design Support Library两个库，
根据需要在app的build.gradle 中引入。

dependencies {
    compile 'com.android.support:appcompat-v7:xx.xx.xx'
    compile 'com.android.support:design:xx.xx.xx'
}

Counter 部分

问题一 counter 开启

counter 默认是关闭的，counterEnabled 可以在xml中控制开启

<android.support.design.widget.TextInputLayout
        android:id="@+id/login_user_text_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_logo_iv"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:textColorHint="@android:color/white"

        app:counterEnabled="true"         
        app:counterMaxLength="11"         
        app:counterTextAppearance="@style/CounterStyle"   
        app:counterOverflowTextAppearance="@style/CounterOverflowStyle" 
        >

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/select_bg_line"
            android:inputType="number"
            android:hint="手机号"
            android:padding="5dp"
            android:textColor="@android:color/white" />

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

        <!-- counterEnabled ="true" 表示开启
        app:counterEnabled="true"

        计数器的最大长度  
        app:counterMaxLength="11"

        计数器正常状态样式 
        app:counterTextAppearance="@style/CounterStyle"  

        计数器越位状态样式 
        app:counterOverflowTextAppearance="@style/CounterOverflowStyle"
        -->

问题二 counter 的样式

counter 正常状态的样式、越位状态的样式分别使用counterTextAppearance、counterOverflowTextAppearance 表示，

app:counterTextAppearance="@style/CounterStyle"
app:counterOverflowTextAppearance="@style/CounterOverflowStyle"

可以设置字体颜色和字体大小

CounterStyle

    <style name="CounterStyle" >
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">12sp</item> 
    </style>

passwordToggle

问题三 passwordToggle 自定义图标

感慨一下，这个地方可是费了一番功夫，因为用了一张图片的不同颜色，我以为是drawable select 没起作用，各种查，结果并不是，是因为passwordToggle 图标和颜色分离（猜测，没看源码）

 <android.support.design.widget.TextInputLayout
        android:id="@+id/login_pwd_text_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_user_text_input"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:textColorHint="@android:color/white"

        app:passwordToggleEnabled="true" 
        app:passwordToggleDrawable="@drawable/select_pwd_visible" 
        app:passwordToggleTint="@color/select_pwd_visible" 
        >

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/select_bg_line"
            android:inputType="textPassword"
            android:hint="密码"
            android:padding="5dp"
            android:textColor="@android:color/white" />

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

        <!--  
        开启 passwordToggle
        app:passwordToggleEnabled="true"

        Drawable select  
        app:passwordToggleDrawable="@drawable/select_pwd_visible"

        Color select 
        app:passwordToggleTint="@color/select_pwd_visible"
         -->

如上，

替换图标需要 passwordToggleDrawable 和 passwordToggleTint 配合使用

select_pwd_visible.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pwd_visible_yes" android:state_checked="true"></item>
    <item android:drawable="@drawable/pwd_visible_no" android:state_checked="false"></item>
</selector>

select_pwd_visible.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="true"></item>
    <item android:color="@color/colorAccent" android:state_checked="false"></item>
</selector>