美文网首页
Android Material Design 之 TextIn

Android Material Design 之 TextIn

作者: teletian | 来源:发表于2017-07-16 15:36 被阅读117次

    TextInputLayout 是 Material Design 风格的输入框。效果如下。

    EditText 在获取焦点的时候,hint 会作为 title 移动到上面去,这样用户输入的过程中也能看到 hint。

    TextInputLayout 自带 Error Message,当发生错误的时候,消息显示到线的下方,并且线的颜色也会变掉。

    EditText 只要用 TextInputLayout 包裹一下,就能够达到 Material Design 的效果了,XML 的代码如下

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:orientation="vertical">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="Welcome"
                android:textColor="#333333"
                android:textSize="30sp" />
    
        </RelativeLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:orientation="vertical">
    
            <android.support.design.widget.TextInputLayout
                android:id="@+id/usernameWrapper"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <EditText
                    android:id="@+id/username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Username"
                    android:inputType="textEmailAddress" />
    
            </android.support.design.widget.TextInputLayout>
    
            <android.support.design.widget.TextInputLayout
                android:id="@+id/passwordWrapper"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp">
    
                <EditText
                    android:id="@+id/password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Password"
                    android:inputType="textPassword" />
    
            </android.support.design.widget.TextInputLayout>
    
            <Button
                android:id="@+id/btn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="Login" />
    
        </LinearLayout>
    
    </LinearLayout>
    

    Activity 中的代码如下:

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
        private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            findViewById(R.id.btn).setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v) {
    
            TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
            TextInputLayout passwordWrapper = (TextInputLayout) findViewById(R.id.passwordWrapper);
    
            String username = usernameWrapper.getEditText().getText().toString();
            String password = passwordWrapper.getEditText().getText().toString();
    
            if (!TextUtils.isEmpty(username) && !validateEmail(username)) {
                usernameWrapper.setError("Not a valid email address!");
            } else {
                usernameWrapper.setErrorEnabled(false);
            }
    
            if (!TextUtils.isEmpty(password) && !validatePassword(password)) {
                passwordWrapper.setError("Not a valid password!");
            } else {
                passwordWrapper.setErrorEnabled(false);
            }
        }
    
        public boolean validateEmail(String email) {
            Matcher matcher = Pattern.compile(EMAIL_PATTERN).matcher(email);
            return matcher.matches();
        }
    
        public boolean validatePassword(String password) {
            return password.length() > 5;
        }
    }
    

    这样,一个简单的登陆画面就完成了。

    下面在进一步的介绍一些属性的使用

    app:hintEnable
    hintEnable 默认是 true 的,只有 true 的时候,获取焦点后 hint 才会移到上面去,如果设为 false,那么 hint 还会再输入框里面。

    app:hintAnimationEnabled
    hintAnimationEnabled 默认是 true 的,只有 true 的时候,获取焦点以及丢失焦点后 hint 的移动才有动画,如果设为 false,则没有动画。

    app:counterEnabled app:counterMaxLength
    如果像在输入框下面加入字数统计,可以设置这两个属性,效果如下图

    字数统计仅仅是字数统计,并不会限制字数。当超过最大字数时,仍然可以输入,只不过颜色会变成红色,如下图

    app:passwordToggleEnabled
    有些 App 在输入密码的时候,右边有个眼睛的图标,通过点击可以控制密码可不可见。
    如果要显示图标,只要设置 passwordToggleEnabled 为 true 就好了。效果如下


    app:passwordToggleTint="@color/colorAccent"
    当然 password 的图标的颜色也是可以变的。

    app:passwordToggleDrawable
    也可以自定义 password 的图标,自定义的图标的颜色也可以通过 app:passwordToggleTint 来改变颜色!

    app:hintTextAppearance
    自定义浮动标签样式

    <style name="hintAppearance" parent="TextAppearance.AppCompat">
            <item name="android:textSize">14sp</item>
            <item name="android:textColor">#ffee00</item>
    </style>
    

    app:errorTextAppearance
    自定义错误信息样式

    <style name="errorAppearance" parent="TextAppearance.AppCompat">
            <item name="android:textSize">14sp</item>
            <item name="android:textColor">@color/red</item>
    </style>
    

    相关文章

      网友评论

          本文标题:Android Material Design 之 TextIn

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