使用TextInputLayout创建一个登陆界面
扫描二维码
随时随地手机看文章
稀土掘金，这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎，想成为全栈工程师的朋友不要错过！
英文教程：Creating a Login Screen Using TextInputLayout
本教程中，我将再次讨论Material Design。Google I/O 2015对于每一个开发者来说都是一个重大的事件，设计当然也是谈资之一。
谷歌意识到向后兼容是实现material design的重要部分。当然supportlibrary，比如appcompat-v4和 appcompat-v7是解决方案的一部分。
但是Theme.AppCompat 并没有实现谷歌官方应用中用到的每个material组建。其中一个重要的特性就是AppCompattheme没有提供一个显示在EditText上方的浮动标签。你可以从下方的途中知晓我说的是什么。
在Google I/O 2015期间，安卓团队发布了一个崭新的兼容库，Design Support Library。它简直就是为解决这个问题而生的。本教程将演示如何使用Design Support Library中的TextInputLayout控件。
1. 实现 TextInputLayout 第一步: 创建一个新的项目
在Android Studio中 选择New > New project 。填入所需的信息然后创建项目。我的例子的target api是17，这是Design Support Library支持的最小api版本。这个级别的api基本上已经支持绝大多数设备了。我把主activity命名为LoginActivity，它的布局文件命名为activity_login.xml。
创建完项目之后，在主activity中把Android Studio自动产生的onCreateOptionsMenu 和onOptionsItemSelected方法删掉。我们要创建的登陆界面不需要菜单所以删掉这些方法是ok的。记得也删掉res/menu目录中的XML 菜单文件。
第二步 :导入SupportLibrary
要使用TextInputLayout控件，你需要导入两个Library。第一个是appcompat-v7,它确保materialstyle可以向后兼容。第二个是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没有自动询问同步项目，选择build菜单中的Make module 'app' ，或者按F9。这样Android Studio 编译系统会自动获取必要的资源，然后你就能够使用需要的类了。
第三步 :设计用户界面
这个项目的用户界面非常简单。它显示了一个“欢迎”文字（可以很容易替换成logo什么的）与两个EditText元素，一个是为用户名准备的，一个是为密码准备的。布局中还包含了一个触发登陆流程的按钮。背景颜色是扁平风格的灰色。
另一个重要的细节是记得正确设置EditText的inputType属性。第一个EditText的inputType应该设置成textEmail，而第二个应该设置成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
下载文档
