使用TextInputLayout創(chuàng)建一個(gè)登陸界面
掃描二維碼
隨時(shí)隨地手機(jī)看文章
稀土掘金，這是一個(gè)針對技術(shù)開發(fā)者的一個(gè)應(yīng)用，你可以在掘金上獲取最新最優(yōu)質(zhì)的技術(shù)干貨，不僅僅是Android知識、前端、后端以至于產(chǎn)品和設(shè)計(jì)都有涉獵，想成為全棧工程師的朋友不要錯過！
英文教程：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上方的浮動標(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自動產(chǎn)生的onCreateOptionsMenu 和onOptionsItemSelected方法刪掉。我們要創(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沒有自動詢問同步項(xiàng)目，選擇build菜單中的Make module 'app' ，或者按F9。這樣Android Studio 編譯系統(tǒ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
下載文檔
