1. 程式人生 > >Android高階進階之 TextInputLayout用法

Android高階進階之 TextInputLayout用法

TextInputLayout見名知義與文字輸入有關係,TextInputLayout控制元件通過內嵌EditText來實現輸入文字時,根據預先設定的屬性向使用者展示相應的提醒文字並附有酷炫的動畫效果。例如,當文字框裡的字元長度大於10的時候自動給使用者提示,無需編寫額外的程式碼,同時文字框獲取或失去焦點時,EditText的hint文字會動態顯示和隱藏。下圖為TextInputLayout結合EditText控制元件所實現的動態提醒效果:

1. 佈局檔案

     activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:hintAnimationEnabled="true"
        app:errorEnabled="true"
        >
        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="請輸入賬號" />
    </android.support.design.widget.TextInputLayout>

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="請輸入密碼" />
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="登入" />

</LinearLayout>

佈局分析:TextInputLayout內嵌一個EditText來實現具有動態效果的提醒給使用者。

2. 程式碼

MainActivity.java

package com.example.administrator.textinputlayout;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;

public class Main2Activity extends AppCompatActivity {
    TextInputLayout textInputLayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    public void initView()
    {
        textInputLayout = (TextInputLayout)findViewById(R.id.textInputLayout);
        //檢測長度應該低於10位數
        textInputLayout.getEditText().addTextChangedListener(new MyTextWatcher(textInputLayout, "長度應低於10位數!"));
        //開啟計數
        textInputLayout.setCounterEnabled(true);
        textInputLayout.setCounterMaxLength(10);//最大輸入限制數
        return;
    }

    class MyTextWatcher implements TextWatcher {

        private String errorStr;
        private TextInputLayout textInputLayout;

        public MyTextWatcher(TextInputLayout textInputLayout, String errorStr) {
            // TODO Auto-generated constructor stub
            this.textInputLayout = textInputLayout;
            this.errorStr = errorStr;
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                                      int after) {
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before,
                                  int count) {
        }

        @Override
        public void afterTextChanged(Editable s) {
            // 文字改變後回撥
            if(s.toString().length()<=10){
                textInputLayout.setErrorEnabled(false);
            }else{
                textInputLayout.setErrorEnabled(true);
                textInputLayout.setError(errorStr);
            }
        }

    }
}

程式碼分析:

textInputLayout.setCounterEnabled(true);
textInputLayout.setCounterMaxLength(10);//最大輸入限制數

這兩行程式碼開啟了錯誤提醒,預設條件為輸入字元數不能大於10,一旦textInputLayout控制元件內嵌的EditText超過10個字元,textInputLayout會自動提醒使用者。

還有一種方法就是監聽textInputLayout.getEditText()的輸入字元的改變情況來判斷字元數是否超過10個,核心程式碼如下:

textInputLayout.getEditText().addTextChangedListener(new MyTextWatcher(textInputLayout, "長度應低於10位數!"));

這裡的程式碼比較簡單,相信大家都可以看懂在此就不再贅述了。DEMO程式碼下載地址: