稀土掘金，這是一個(gè)針對技術(shù)開發(fā)者的一個(gè)應(yīng)用，你可以在掘金上獲取最新最優(yōu)質(zhì)的技術(shù)干貨，不僅僅是Android知識、前端、后端以至于產(chǎn)品和設(shè)計(jì)都有涉獵，想成為全棧工程師的朋友不要錯(cuò)過！

英文教程：Creating a Login Screen Using TextInputLayout

本教程中，我將再次討論Material Design。Google I/O 2015對于每一個(gè)開發(fā)者來說都是一個(gè)重大的事件，設(shè)計(jì)當(dāng)然也是談資之一。

谷歌意識到向后兼容是實(shí)現(xiàn)material design的重要部分。當(dāng)然supportlibrary，比如appcompat-v4和 appcompat-v7是解決方案的一部分。

但是Theme.AppCompat 并沒有實(shí)現(xiàn)谷歌官方應(yīng)用中用到的每個(gè)material組建。其中一個(gè)重要的特性就是AppCompattheme沒有提供一個(gè)顯示在EditText上方的浮動(dòng)標(biāo)簽。你可以從下方的途中知曉我說的是什么。

在Google I/O 2015期間，安卓團(tuán)隊(duì)發(fā)布了一個(gè)嶄新的兼容庫，Design Support Library。它簡直就是為解決這個(gè)問題而生的。本教程將演示如何使用Design Support Library中的TextInputLayout控件。

1. 實(shí)現(xiàn) TextInputLayout 第一步: 創(chuàng)建一個(gè)新的項(xiàng)目

在Android Studio中 選擇New > New project 。填入所需的信息然后創(chuàng)建項(xiàng)目。我的例子的target api是17，這是Design Support Library支持的最小api版本。這個(gè)級別的api基本上已經(jīng)支持絕大多數(shù)設(shè)備了。我把主activity命名為LoginActivity，它的布局文件命名為activity_login.xml。

創(chuàng)建完項(xiàng)目之后，在主activity中把Android Studio自動(dòng)產(chǎn)生的onCreateOptionsMenu 和onOptionsItemSelected方法刪掉。我們要?jiǎng)?chuàng)建的登陸界面不需要菜單所以刪掉這些方法是ok的。記得也刪掉res/menu目錄中的XML 菜單文件。

第二步 :導(dǎo)入SupportLibrary

要使用TextInputLayout控件，你需要導(dǎo)入兩個(gè)Library。第一個(gè)是appcompat-v7,它確保materialstyle可以向后兼容。第二個(gè)是Design Support Library。在你的build.gradle文件中，添加如下依賴：

1 2 3 4 5 6dependencies{compilefileTree(dir:'libs',include:['*.jar'])compile'com.android.support:design:22.2.0'compile'com.android.support:appcompat-v7:22.2.0'}

如果Gradle沒有自動(dòng)詢問同步項(xiàng)目，選擇build菜單中的Make module 'app' ，或者按F9。這樣Android Studio 編譯系統(tǒng)會自動(dòng)獲取必要的資源，然后你就能夠使用需要的類了。

第三步 :設(shè)計(jì)用戶界面

這個(gè)項(xiàng)目的用戶界面非常簡單。它顯示了一個(gè)“歡迎”文字（可以很容易替換成logo什么的）與兩個(gè)EditText元素，一個(gè)是為用戶名準(zhǔn)備的，一個(gè)是為密碼準(zhǔn)備的。布局中還包含了一個(gè)觸發(fā)登陸流程的按鈕。背景顏色是扁平風(fēng)格的灰色。

另一個(gè)重要的細(xì)節(jié)是記得正確設(shè)置EditText的inputType屬性。第一個(gè)EditText的inputType應(yīng)該設(shè)置成textEmail，而第二個(gè)應(yīng)該設(shè)置成textPassword。下面是布局的樣子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:background="#e3e3e3"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="@dimen/activity_horizontal_margin"tools:context=".LoginActivity"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="0.5"<code class="js plain" style="font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace; font-size:12px; margin:0px; padding:0.2em 0px; line-height:normal; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!im