您的位置:首页 > 其它

遵循MD的Demo实现(TextInputLayout和FloatingActionButton)

2015-12-14 23:31 295 查看
最近在做的一个Demo,主要是希望通过Android Design Support Library中所提供的控件来实现一个基本遵循Material Design的小Demo。本文先介绍Splash界面和登录界面的实现。

首先是需要导入的包。在Gradle中添加支持

dependencies {
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
}

#TextView的阴影#

在SplashActivity中需要对标题的TextView设置阴影。

给TextView设置阴影可以通过两种方式。

第一种是在.xml布局文件中设置

<TextView
android:textColor="@android:color/white"
android:shadowColor="@color/colorSecondaryText"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Hello Phone!"
android:textSize="25sp" />

第二种是通过代码设置

mTextView.setShadowLayer(10F, 11F,5F, Color.YELLOW);


设置的四个参数对应shadowRadius:阴影半径

第二、三个参数对应shadowDx和shadowDy:阴影离开文字的x轴、y轴距离

第四个参数对应shadowColor:阴影的颜色

#TextInputLayout的使用#

在SignActivity中设置输入的帐号密码通过TextInputLayout来实现。

TextInputLayout是Design Support Library中提供的控件。官方对TextInputLayout的解释是:

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text. Also supports showing an error via setErrorEnabled(boolean) and setError(CharSequence).

TextInputLayout是包裹一个EditText(或其子类)的一种Layout,用于在用户在EditText中输入内容时,将hint作为一个浮动的标签展示出来。同时可以通过setErrorEnabled(boolean)和setError(CharSequence)展示错误信息。

##布局文件##

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:paddingEnd="@dimen/title_padding"
android:paddingStart="@dimen/title_padding">

<EditText
android:id="@+id/etSignPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type Password"
android:inputType="textPassword"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>

TextInputLayout提供的参数

app:hintTextAppearance:设置floating的字体的样式

app:errorEnabled:设置是否可以显示错误信息,如果设置了会给错误信息预留空间

app:errorTextAppearance:设置错误信息的字体样式

#FloatingActionButton#

在SignActivity的确认按钮通过FloatingActionButton实现。

官方对FloatingActionButton的介绍:

Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.

简单的说,FloatingActionButton是一个浮动的按钮,并且因为继承了ImageView,所以可以通过setImageDrawable(Drawable)来设置图片。

##布局文件##

<android.support.design.widget.FloatingActionButton
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/fabDone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="@dimen/fba_margin"
android:layout_marginEnd="@dimen/fba_margin"
android:layout_marginRight="@dimen/fba_margin"
dio:backgroundTint="@color/colorAccent"
dio:fabSize="normal"
tools:src="@drawable/ic_action_done" />


app:backgroundTint决定fab的背景颜色。
app:fabSize设置fab的大小,'normal'和'mini'
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: