美文网首页
Material Design之TextInputLayout

Material Design之TextInputLayout

作者: 谢尔顿 | 来源:发表于2018-02-12 10:32 被阅读24次

引言

TextInputLayout是Material Design的控件之一,继承自LinearLayout。
参考文章:

1.几种属性

  • app:counterEnabled:字符计数是否可用
  • app:counterMaxLength计数最大的长度
  • app:counterOverflowTextAppearance:计数超过最大长度时显示的文本样式
  • app:counterTextAppearance:显示的计数的文本样式
  • app:errorEnabled:显示错误信息是否可用
  • app:errorTextAppearance:显示错误信息的文本样式
  • android:hint 浮动标签
  • app:hintAnimationEnabled 控制是否需要浮动标签的动画
  • app:hintEnabled 控制是否显示浮动标签
  • app:hintTextAppearance 浮动标签的文本样式
  • app:passwordToggleDrawable 密码可见切换图标
  • app:passwordToggleEnabled 控制是否显示密码可见切换图标

2. 使用示例

(1)带浮动标签的文本框
效果图:

布局文件:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <android.support.design.widget.TextInputLayout

        android:id="@+id/text_input_layout_user"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:textColorHint="@color/colorHint"
        >

        <EditText
            android:id="@+id/text_input_user"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:hint="用户名"
            android:inputType="text"
            android:textColor="@color/black"
            />

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout_phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:counterOverflowTextAppearance="@style/TextOverCount"
        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:textColorHint="@color/colorHint"
        >
        <EditText
            android:id="@+id/text_input_phone"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:hint="手机号码"
            android:inputType="number"
            android:textColor="@color/black"
            />

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

(2)带字符计数的文本框
效果图:

在上面的基础上添加以下属性:

        app:counterOverflowTextAppearance="@style/TextOverCount"
        app:counterTextAppearance="@style/TextCount"
        app:counterMaxLength="10"
        app:counterEnabled="true"

用到的样式


    <style name="TextOverCount" parent="Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
          <item name="android:textColor">@color/color_red</item>
    </style>

    <style name="TextCount" parent="Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
          <item name="android:textColor">@color/color_blue</item>
    </style>

(3)修改浮动标签的字体大小
效果图:

我们可以利用上面说到的app:hintTextAppearance 属性:

app:hintTextAppearance="@style/HintTextStyle"

样式:

    <style name="HintTextStyle" parent="Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/color_blue</item>

    </style>

(4)显示密码可见和隐藏的切换按钮
效果图:

添加以下属性即可:

        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimary"

(5)显示错误信息
效果图:

代码如下:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_input_layout);
        ButterKnife.bind(this);
        setTitle("TextInputLayout的学习");
        mTextInputPassword.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) {
                mTextInputLayoutPassword.setErrorEnabled(false);
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }

    @OnClick(R.id.login)
    public void onViewClicked() {
        String password = mTextInputPassword.getText().toString();
        if(TextUtils.isEmpty(password)||password.length()<6){
            mTextInputLayoutPassword.setError("密码错误不能少于6个字符");
        }
    }

3. 完整的demo

效果图:


<?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"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:focusableInTouchMode="true"
              android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_mobile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_16"
        android:layout_marginLeft="@dimen/dp_16"
        android:layout_marginRight="@dimen/dp_16"
        app:counterEnabled="true"
        app:counterMaxLength="11"
        app:counterOverflowTextAppearance="@style/TextOverCount">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/ic_mobile"
            android:drawableStart="@mipmap/ic_mobile"
            android:drawablePadding="@dimen/dp_4"
            android:gravity="center_vertical"
            android:inputType="number"
            android:hint="请输入手机号"/>
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="@dimen/dp_16"
        android:layout_marginLeft="@dimen/dp_16"
        app:passwordToggleEnabled="true">
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/ic_password"
            android:drawableStart="@mipmap/ic_password"
            android:drawablePadding="@dimen/dp_4"
            android:gravity="center_vertical"
            android:hint="请输入密码"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp_16"
        android:onClick="onClickLogin"
        android:text="登录"
        android:textColor="@color/white"
        android:textSize="@dimen/sp_16"
        android:background="@color/color_blue"/>
</LinearLayout>

相关文章

网友评论

      本文标题:Material Design之TextInputLayout

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