一天一個控件——TextInputLayout

一天一個控件——TextInputLayout

在編寫Android程序的時候，最大的悲哀不是不會編寫代碼，而是明明知道有一個官方的控件能夠實現需要的效果，但是不知道這個空的名稱，或者是都不知道Android官方提供的控件能夠實現這個效果。

想寫這個一天一控件的系統的原因是，在想寫一個登錄界面的時候，之前不知道在哪裏看見過一個碉堡的登錄頁面，而且控件使用的也是Android自帶的控件，但是我忘記了是什麼控件，幾經周折才找到這個控件——TextInputLayout。通過這個事件，我在想，我對開源的控件不熟悉，那還還能說得過去，但是對Android原生的控件都不熟悉，那就有點過分了。因此我纔想每天一個控件系列的，只是簡單的使用，讓這些控件給我一個熟悉的面孔。

效果圖

什麼都不說先上效果圖：

控件使用

引入

這個控件是隨着Google的Material Desgin而推出的，這個控件並不在Android的默認包中，要使用這個控件需要提前引入compile 'com.android.support:design:x.y.z'(x.y.z是最新的design包)。最簡單方式：

錯誤

當com.android.support:design包引入後，就可以在佈局文件中使用這個控件了，一般而言，TextInputLayout會和TextInputEditText一起使用，但是需要注意，在TextInputLayout中只能放置一個EditText控件，如果存放了兩個或兩個EditText控件，在運行的時候編譯器會給出如下錯誤提示：

在錯誤中已經已經將問題說得非常清楚了。

屬性

通過Android的API文檔說明，TextInputLayout提供了大量的自定義屬性：

1. counterEnableed
2. counterMaxLength
3. errorEnabled
4. errorText
5. passwordToggleDrawable
6. passwordToggleEnabled
7. …

比如1,2兩個屬性可以很清晰的告訴用戶已經輸入的字符數和接受的最大字符數。5.6兩個屬性就可以很簡單實現密碼的顯示和隱藏（都不用 寫自定義View了）

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        app:counterEnabled="true"
        app:counterMaxLength="11">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="賬號/手機/郵箱" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleDrawable="@drawable/eye"
        app:passwordToggleEnabled="true">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="密碼"
            android:inputType="textPassword" />

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

這樣就能實現一開始的效果了。

至於輸出錯誤信息。需要在代碼中進行設置，進行判斷之後調用setError()設置錯誤信息

public class MainActivity extends AppCompatActivity {
    private TextInputLayout textInputLayout;
    private TextInputEditText editText;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textInputLayout = (TextInputLayout) findViewById(R.id.text_username);
        editText = (TextInputEditText) findViewById(R.id.et_username);
        button = (Button) findViewById(R.id.btn);


        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String text = editText.getText().toString();
                if (!text.equals("hhhh")) {
//                    Toast.makeText(MainActivity.this, "show", Toast.LENGTH_SHORT).show();
                    textInputLayout.setError("用戶名不正確");
                }
            }
        });
    }
}

errTextAppearance後面使用的是屬性的id。基礎的使用應該就是這些，會使用這些應該就能夠滿足一般的使用了。還有什麼高級的使用的方式，到時候能夠查文檔。