原创

Android Design Support Library(一):FloatingActionButton、TextInputLayout、TextInputEditText简单用法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://zhulei.blog.csdn.net/article/details/51605321

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

一、继承关系:

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

文章最后发布于: 2016-06-07 17:23:15
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览