文档章节

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

Dio_V
 Dio_V
发布于 2015/12/14 23:31
字数 696
阅读 47
收藏 0

最近在做的一个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'

© 著作权归作者所有

Dio_V
粉丝 1
博文 6
码字总数 6746
作品 0
程序员
私信 提问
Andorid - Material Design之CoordinatorLayout

老婆保佑,代码无BUG 前言 这是MD 系列的最后一篇文章,文末,会将代码上传,有兴趣的小伙伴可以一起参考 目录 与FloatingActionButton联动 与AppBarLayout layout_scrollFlags属性讲解 Coll...

Allens_Jiang
2018/01/03
0
0
MD 风格的 Android 悬浮工具栏--FloatingToolbar

FloatingToolbar,这是一个由FloatingActionButton变成一个工具栏的Android UI 控件。动画效果优雅,遵循Material Design风格。 运行效果: 使用示例代码: mFloatingToolbar.addMorphListe...

匿名
2016/09/13
739
0
Material Design 控件

只能包含一个子View,setOnRefreshListener设置下拉刷新监听 问题:以下布局会出现下拉和列表滑动冲突问题 width="matchparent"android:layoutheight="matchparent"> width="matchparent"an......

CrazyManDF
2016/03/23
0
0
Flutter进阶—实现动画效果(二)

在上一篇文章:Flutter进阶—实现动画效果(一)的最后,我们说到需要一个处理程序混乱的概念。在这一篇文章中,我们会引入补间,它是构建动画代码的一个非常简单的概念,主要作用是用面向对...

飞翔的熊blabla
2018/11/05
0
0
android开发中TextInputLayout使用方法

android开发中TextInputLayout使用方法,TextInputLayout其实是一个容器,他继承自LinearLayout,该容器是作用于TextView的,TextInputLayout只能包裹一个子节点,类似于ScrollView。 本文以...

android开发
2017/12/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何远程调试部署在CloudFoundry平台上的nodejs应用

网络上关于如何本地调试nodejs应用的教程已经很多了,工具有Chrome开发者工具,Visual Studio Code,和nodejs周边的一些小工具等等。 在实际情况中,我们可能遇到本地运行良好,但是部署到C...

JerryWang_SAP
27分钟前
3
0
微信扫码访问网站调用默认浏览器打开如何实现?

我们在微信内分享链接或二维码的时候,我们会发现我们的网站是可以在浏览器里正常打开的,但就是不能在微信里打开,提示 “ 已停止访问该网页 ”,无论是聊天框也一样。说是系统检测到您的网...

明尼苏达哈士奇
35分钟前
3
0
一份Java程序员进阶架构师的秘籍,你离架构师还差多远

一、如何定义架构师 Java架构师,首先要是一个Java程序员,熟练使用各种框架,并知道它们实现的原理。jvm虚拟机原理、调优,懂得jvm能让你写出性能更好的代码;池技术,什么对象池,怎么解决并...

我最喜欢三大框架
43分钟前
2
0
想说再见不容易,win7最新市占率依然超36%

微软正在通过努力让Windows 7用户升级至Windows 10,不过从目前的市占率来看,他们还是要加把劲了。 据最新的市场份额看,Windows 10在本月的市场份额有所提升,从43.62%增长到44.10%。另一...

linuxCool
54分钟前
4
0
SQL的优化

对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。 对查询进行优化,要尽量避免全表扫描,首先应考虑在进行条件判断的字段上创建了索引。 应尽量避...

咸鱼-李y
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部