Material Design之FloatingActionButton的使用
FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的全部属性。
CoordinatorLayout能够用来配合FloatingActionButton浮动button。设置app:layout_anchor和app:layout_anchorGravity构建出特定的位置与效果的FloatingActionButton。
我们来看看怎么使用FloatingActionButton吧:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@mipmap/icon"
app:backgroundTint="#30469b"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:layout_anchor="@id/coordinator_layout"
app:layout_anchorGravity="bottom|right"
app:pressedTranslationZ="12dp"
app:rippleColor="#a6a6a6" />
各个属性的意思:
- app:backgroundTint - 设置FAB的背景颜色。
- app:rippleColor - 设置FAB点击时的背景颜色。
- app:borderWidth -
该属性尤为重要。假设不设置0dp。那么在4.1的sdk上FAB会显示为正方形。并且在5.0以后的sdk没有阴影效果。所以设置为borderWidth="0dp"。 - app:elevation - 默认状态下FAB的阴影大小。
- app:pressedTranslationZ - 点击时候FAB的阴影大小。
- app:fabSize - 设置FAB的大小,该属性有两个值,分别为normal和mini,相应的FAB大小分别为56dp和40dp。
- src - 设置FAB的图标,Google建议符合Design设计的该图标大小为24dp。
- app:layout_anchor - 设置FAB的锚点,即以哪个控件为參照点设置位置。
- app:layout_anchorGravity - 设置FAB相对锚点的位置,值有 bottom、center、right、left、top等。
这样设置后,就能够在屏幕右下角创建出一个FloatingActionButton了。
如:
普通情况下。FAB与Snackbar配合使用时候会出现Snackbar遮住FAB:如:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
为了解决问题,我们把Snackbar.make(View view,,).show();的第一个參数View设置为CoordinatorLayout,即:
//把mCoordinatorLayout传给Snackbar
Snackbar.make(mCoordinatorLayout, "Snackbar", Snackbar.LENGTH_SHORT).show();
这样CoordinatorLayout就能够协调各个View之间的动画效果。效果就变为了:
即Snackbar不会遮挡FAB的显示了,当Snackbar出现时FAB会自己主动上移。
当然FAB的点击事件也是通过setOnClickListener()设置就可以。
我们再看一个效果:
这个效果事实上就是通过改变FAB的Layout_anchor和layout_anchorGravity来实现的,看看布局就明确了:
<android.support.design.widget.CoordinatorLayout
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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#30469b"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/bg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/icon"
app:backgroundTint="#30469b"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:layout_anchor="@id/collapsingToolbarLayout"
app:layout_anchorGravity="bottom|center"
app:pressedTranslationZ="12dp"
app:rippleColor="#a6a6a6" />
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
源代码地址:http://download.csdn.net/detail/u010687392/8913513
Material Design之FloatingActionButton的使用的更多相关文章
- Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout
如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...
- Material Design学习-----FloatingActionButton
FloatingActionButton是悬浮操作按钮,它继承自imageview,所以说它具备有imageview所有的方法和属性.与其他按钮不同的是,FloatingActionButton默认就 ...
- Material Design 组件之 FloatingActionButton
Material Design 设计规范在 Google I/O 2014 推出,这种设计理念一经推出就受到广大开发者的喜爱,主要侧重于纸墨化创作和突出设计的实体感,使得设计更接近于真实世界,力求平滑 ...
- Android Material Design 兼容库的使用
Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...
- 【Android】进入Material Design时代
由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...
- 官方 Material Design App
[转]MaterialDesignCenter 发表回复 转: https://github.com/lightSky/MaterialDesignCenter MaterialDesignCente ...
- Android Material Design简单使用
吐槽 作为一个 Android developer,没有什么比拿着 UI 设计的一堆 iOS 风格的设计 来做需求更恶心的了,基本所有空间都要照着 iOS 来画一遍,Material Design 辣 ...
- Android Material Design NavigationView 及 Palette 颜色提取器
DrawerLayout + NavigationView DrawerLayout布局,通常在里面添加两个子控件,程序主界面添加到NavitagionView前面. <android.supp ...
- Material Design 开发利器:Android Design Support Library 介绍
转自:https://blog.leancloud.cn/3306/ Android 5.0 Lollipop 是迄今为止最重大的一次发布,很大程度上是因为 material design —— 这是 ...
随机推荐
- CreateThread简单那多线程编程
CreateThread简单那多线程编程 作者:vpoet mail:vpoet_sir@163.com 在进行多任务处理的时候我们往往会用到多线程技术,多线程理论上是多个线程同事处理不同的工作,但是 ...
- ZOJ3414Trail Walk(计算几何)
Trail Walk Time Limit: 2 Seconds Memory Limit: 65536 KB FatMouse is busy organizing the coming ...
- #include<string.h>
#include<string.h> 1 strcpy #include <string.h> char *strcpy(char *str1, const char *str ...
- RequireJs运行原理
在require中,根据AMD(Asynchronous Module Definition)的思想,即异步模块加载机制,其思想就是把代码分为一个一个的模块来分块加载,这样无疑可以提高代码的重用. 在 ...
- 小谈@override
@override是jdk1.5增加的注解,主要是用来声明子类的某方法覆盖了父类的某方法.非常简单的注解,但是有个小问题: 项目最开始使用的是jdk1.6,mvc模式:接口 ----> 实现类. ...
- 沃通tomcat jks 安装配置
废话不多说上代码: <Connector port="443" protocol="org.apache.coyote.http11.Http11NioProtoc ...
- jdbc select
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- 关于jquery对象和DOM对象的区别
这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所 ...
- Android系统信息
前提:获取的都是AndroidMainfest.xml下的信息 一.PackageManager 负责管理所有已安装的App 二.ActivityInfo 封装了Mainifest中的<acti ...
- HTML中发送方式(method)中get和post的比较
get的方式是将表单控件的控件名name和取值value信息经过编码后,通过URL发送(可以在地址栏里看到).而post则将表单的内容通过http发送.一个 get通过URL传送变量,能传送的数据总量 ...