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

欢迎各位访问的博客，博客地址

一、继承关系：

1.FloatingActionButton

java.lang.Object
   ↳    android.view.View
       ↳    android.widget.ImageView
           ↳    android.widget.ImageButton
               ↳    android.support.design.widget.FloatingActionButton

2.TextInputLayout

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.LinearLayout
               ↳    android.support.design.widget.TextInputLayout

3.TextInputEditText

java.lang.Object
   ↳    android.view.View
       ↳    android.widget.TextView
           ↳    android.widget.EditText
               ↳    android.support.v7.widget.AppCompatEditText
                   ↳    android.support.design.widget.TextInputEditText

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

二、使用方法：

1. 导包

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

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

2. FloatingActionButton

<android.support.design.widget.FloatingActionButton
        android:id="@+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"/>

属性含义（可选）

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：

                <FrameLayout
                    android:layout_width="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">

                    <ImageView
                        android:layout_width="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" />

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

                    <android.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="请输入您的手机号码">
                        <android.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"/>
                    </android.support.design.widget.TextInputLayout>

                </FrameLayout>

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

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

                    <ImageView
                        android:layout_width="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" />

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

                    <android.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="请输入您的密码">
                        <android.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" />
                    </android.support.design.widget.TextInputLayout>

                    <CheckBox
                        android:id="@+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" />

                </FrameLayout>

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

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

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

三、总结

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

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