淘先锋技术网

首页 1 2 3 4 5 6 7

Material Design之TextInputLayout

代码奉上

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:support-v4:28.0.0'
implementation 'com.android.support:design:28.0.0'

注意：版本号一定要一直，不然你懂得...相当蛋疼

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="userName"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="passWord"/>
    </android.support.design.widget.TextInputLayout>
</LinearLayout>

1，TextInputLayout包裹EditText，注意：TextInputLayout只能有一个子控件，要不然直接闪退

看看效果

 

2，如果需要更改颜色，可以通过下面的方法更改，在values里的styles查找

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

colorPrimary—导航栏颜色

colorPrimaryDark—通知栏颜色

colorAccent—控件选中后颜色

我们把colorAccent颜色改成#000000再看效果：

可以看出，下划线和提示语都变成了我们改的颜色。

3，如果需要更改上方提示字体大小和颜色，可以增加一个style

<android.support.design.widget.TextInputLayout
    app:hintTextAppearance="@style/colos"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<style name="colos">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">#007cc5</item>
</style>

4，增加数字数量提示：

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"//设置是否显示字数统计
    app:counterMaxLength="15"//最大值

    app:counterOverflowTextAppearance="@style/counterOverFlowAppearance"//设置超出最大值后的样式
    app:counterTextAppearance="@style/counterAppearance">//设置字数统计的样式

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="passWord" />
</android.support.design.widget.TextInputLayout>