zoukankan      html  css  js  c++  java
  • Material Design (二),TextInputLayout的使用

    前言

     一般登录注冊界面都须要EditText这个控件来让用户输入信息,同一时候我们通常会设置一个标签(使用TextView)和EditText的hint属性来提示用户输入的内容,而设计库中高级组件TextInputLayout则专门为EditText设计的。即通过使用TextInputLayout包裹EditText实现当用户開始输入时hint属性值将显示在EditText上面作为一个提示标签,这个过程还带有动画效果,这样就避免了用户输入时输入提示消失的情况,同一时候。还能够更好地向用户提示错误输入信息。

    TextInputLayout的两个功能:

    1. 给EditText加入一个带有动画效果的提示标签(利用EditText的hint属性的值作为提示标签内容);
    2. 处理错误输入。将错误输入提示信息显示在EditText附近。便于提示用户更好地完毕输入。

    1. 实现浮动标签提示效果

     TextInputLayout和FrameLayout一样都是一个ViewGroup,而TextInputLayout包裹的是EditText,而且会将EditText的android:hint属性值作为提示标签,所以。使用很easy,例如以下:

    <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_margin="20dp"
            android:id="@+id/usernameWraper"
            android:layout_height="wrap_content">
            <EditText
                android:layout_width="match_parent"
                android:hint="请输入用户名"
                android:layout_height="wrap_content"/>
    
    </android.support.design.widget.TextInputLayout>

    用TextInputLayout包裹EditText并给EditText设置了hint属性后。这个EditText就带有了浮动提示标签的效果了,为了更好地看到效果。丰富一下这个xml布局文件:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:orientation="vertical"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:background="#ff9900"
            android:layout_height="200dp">
    
            <TextView
                android:text="用户登录"
                android:layout_centerInParent="true"
                android:layout_width="wrap_content"
                android:textColor="#fff"
                android:textSize="30sp"
                android:layout_height="wrap_content"/>
        </RelativeLayout>
    
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_margin="20dp"
            android:id="@+id/usernameWraper"
            android:layout_height="wrap_content">
            <EditText
                android:layout_width="match_parent"
                android:hint="请输入用户名"
                android:layout_height="wrap_content"/>
    
        </android.support.design.widget.TextInputLayout>
    
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_margin="20dp"
            android:id="@+id/passwordWraper"
            android:layout_height="wrap_content">
            <EditText
                android:layout_width="match_parent"
                android:hint="请输入密码"
                android:layout_height="wrap_content"/>
    
        </android.support.design.widget.TextInputLayout>
    
        <Button
            android:layout_width="match_parent"
            android:layout_margin="20dp"
            android:text="登录"
            android:id="@+id/btn_login"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    2. 显示错误输入信息

     TextInputLayout使得我们在验证输入数据是能够更加方便地显示错误输入提示,这样能够使得输入更加友好。

    对于处理错误信息,TextInputLayout提供了两个方法:

    1. setError(String message):设置错误提示信息。这个信息将会显示在EditText附近。

    2. setErrorEnabled(boolean enabled):设置错误信息不能够用,也就是移除setError(String message)加入的错误提示信息。

    代码样例:

    package com.example.lt.meterialdesign;
    
    import android.support.design.widget.TextInputLayout;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.text.TextUtils;
    import android.view.View;
    import android.widget.Button;
    
    public class LoginActivity extends AppCompatActivity implements View.OnClickListener {
    
        private TextInputLayout mUsernameWraper;
        private TextInputLayout mPasswordWraper;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_login);
            mUsernameWraper = (TextInputLayout) findViewById(R.id.usernameWraper);
            mPasswordWraper = (TextInputLayout) findViewById(R.id.passwordWraper);
    
            Button btn_login = (Button) findViewById(R.id.btn_login);
            btn_login.setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v) {
            // TextInputLayout能够取得包裹的EditText
            String username = mUsernameWraper.getEditText().getText().toString().trim();
            String password = mPasswordWraper.getEditText().getText().toString().trim();
            if(TextUtils.isEmpty(username)){
                mUsernameWraper.setError("用户名不能为空");
                return;
            }else{
                // 移除错误提示信息
                mUsernameWraper.setErrorEnabled(false);
            }
            if(TextUtils.isEmpty(password)){
                mPasswordWraper.setError("密码不能为空");
                return;
            }else{
                // 移除错误提示信息
                mPasswordWraper.setErrorEnabled(false);
            }
        }
    }

    这里仅仅是对username与password是否为空进行了推断。假设要指定格式能够结合正則表達式验证数据格式。对于EditText能够给它加入文本改变监听addTextChangedListener,当用户改变输入的文本后进行数据格式的验证。然后更加情况显示输入提示。

    执行效果:

    这里写图片描写叙述

    能够看到,当我们開始在EditText中输入信息的时候,EditText的hint属性值将会显示在EditText上面,而且带有一个动画效果,显示为一个浮动标签。而且,当输入的数据格式不正确时,还会显示错误提示在EditText以下。

  • 相关阅读:
    Treap 树堆 容易实现的平衡树
    (转)Maven实战(二)构建简单Maven项目
    (转)Maven实战(一)安装与配置
    根据请求头跳转判断Android&iOS
    (转)苹果消息推送服务器 php 证书生成
    (转)How to renew your Apple Push Notification Push SSL Certificate
    (转)How to build an Apple Push Notification provider server (tutorial)
    (转)pem, cer, p12 and the pains of iOS Push Notifications encryption
    (转)Apple Push Notification Services in iOS 6 Tutorial: Part 2/2
    (转)Apple Push Notification Services in iOS 6 Tutorial: Part 1/2
  • 原文地址:https://www.cnblogs.com/gccbuaa/p/7257056.html
Copyright © 2011-2022 走看看