Android Design Support Library（一）：FloatingActionButton、TextInputLayout、TextInputEditText简单用法

[原文](http://blog.csdn.net/zzz_zzz_z/article/details/51605321?ref=myread)

一、继承关系：

1.FloatingActionButton

java.lang.Object
   ↳    android.view.View
       ↳    android.widget.ImageView
           ↳    android.widget.ImageButton
               ↳    android.support.design.widget.FloatingActionButton
1
2
3
4
5
1
2
3
4
5

2.TextInputLayout

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.LinearLayout
               ↳    android.support.design.widget.TextInputLayout
1
2
3
4
5
1
2
3
4
5

3.TextInputEditText

java.lang.Object
   ↳    android.view.View
       ↳    android.widget.TextView
           ↳    android.widget.EditText
               ↳    android.support.v7.widget.AppCompatEditText
                   ↳    android.support.design.widget.TextInputEditText
1
2
3
4
5
6
1
2
3
4
5
6

从继承关系上看出来，FloatingActionButton就是一个ImageButton，TextInputLayout就是一个LinearLayout，TextInputEditText就是一个EditText 
效果图如下： 

二、使用方法：

1.导包

率属于design包，各自导入各自的，我用的是23.4.0

compile 'com.android.support:design:23.4.0'
1
1

2.FloatingActionButton

"@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/tab_add"
        app:backgroundTint="@color/colorPrimaryDarker"
        app:rippleColor="@color/colorAccent"
        android:elevation="6dp"
        app:pressedTranslationZ="18dp"/>
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

属性含义（可选）

app:backgroundTint - 设置FloatingActionButton背景颜色。 
app:rippleColor - 设置FloatingActionButton点击时的背景颜色。 
app:elevation - 默认状态下FloatingActionButton阴影大小。 
app:pressedTranslationZ - 点击FloatingActionButton时的阴影大小。 
app:fabSize - 设置FloatingActionButton大小，该属性有两个值，分别为normal和mini 
app:layout_anchor - 设置锚点，以哪个控件为参照点设置位置。 
app:layout_anchorGravity - 设置相对锚点的位置，值有 bottom、center、right、left、top等。

FloatingActionButton这个控件还是比较简单的继承自ImageView，可以直接当成ImageView来使用。

3.TextInputLayout与TextInputEditText

贴上我代码里的布局xml：

                "match_parent"
                    android:layout_height="50dp"
                    android:background="@android:color/white"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:paddingLeft="0dp"
                    android:paddingRight="@dimen/margin_block">

                    "24dp"
                        android:layout_height="24dp"
                        android:layout_gravity="center_vertical|start"
                        android:layout_marginEnd="5dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginRight="5dp"
                        android:layout_marginStart="5dp"
                        android:contentDescription="手机号"
                        android:scaleType="centerInside"
                        android:src="@drawable/account_phone" />

                    "2dp"
                        android:layout_height="18dp"
                        android:layout_gravity="center_vertical|start"
                        android:layout_marginLeft="34dp"
                        android:layout_marginStart="34dp"
                        android:background="@color/divider" />

                    .support.design.widget.TextInputLayout
                        android:layout_width="match_parent"
                        android:layout_height="36dp"
                        android:layout_gravity="center_vertical|start"
                        android:layout_marginLeft="48dp"
                        android:layout_marginStart="48dp"
                        android:hint="请输入您的手机号码">
                        .support.design.widget.TextInputEditText
                            android:id="@+id/user_mobile"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@android:color/transparent"
                            android:gravity="center_vertical"
                            android:imeOptions="actionNext"
                            android:inputType="phone"
                            android:singleLine="true"
                            android:textColor="@color/font_title"
                            android:textSize="@dimen/font_normal"/>
                    .support.design.widget.TextInputLayout>

                

                "34dp"
                    android:layout_height="1dp"
                    android:background="@android:color/white" />

                "match_parent"
                    android:layout_height="50dp"
                    android:background="@android:color/white"
                    android:paddingLeft="0dp"
                    android:paddingRight="@dimen/margin_block">

                    "24dp"
                        android:layout_height="24dp"
                        android:layout_gravity="center_vertical|start"
                        android:layout_marginEnd="5dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginRight="5dp"
                        android:layout_marginStart="5dp"
                        android:contentDescription="密码"
                        android:scaleType="centerInside"
                        android:src="@drawable/account_password" />

                    "1dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical|start"
                        android:layout_marginLeft="34dp"
                        android:layout_marginStart="34dp"
                        android:background="@color/divider" />

                    .support.design.widget.TextInputLayout
                        android:layout_width="match_parent"
                        android:layout_height="36dp"
                        android:layout_gravity="center_vertical|start"
                        android:gravity="center_vertical"
                        android:layout_marginLeft="48dp"
                        android:layout_marginStart="48dp"
                        android:hint="请输入您的密码">
                        .support.design.widget.TextInputEditText
                            android:id="@+id/user_password"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:inputType="textPassword"
                            android:background="@android:color/transparent"
                            android:singleLine="true"
                            android:textColor="@color/font_title"
                            android:textSize="@dimen/font_normal" />
                    .support.design.widget.TextInputLayout>

                    "@+id/check_visible"
                        style="@style/PasswordCheckboxTheme"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:minHeight="24dp"
                        android:layout_gravity="end|center_vertical"
                        android:gravity="center" />

                
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

代码里直接设置： 
TextInputEditText.setError(“密码不能为空”)；//错误提醒的文字

或者使用： 
TextInputLayout.setErrorEnabled(true); //开启错误提醒 
TextInputLayout.setError(“密码不能为空”); //错误提醒的文字 
TextInputLayout.setErrorEnabled(false); //关闭错误提醒

这里两种写法的UI显示不一样，自行尝试！

三、总结

相关使用非常简单，这三个控件都位于design包，实现的UI效果也是均为MD效果打造；

文章里的代码是我写的一个小项目中截取出来的，github地址为：https://github.com/Zzz468005600/Stone.git