Material Design 组件之 FloatingActionButton
Material Design 设计规范在 Google I/O 2014 推出,这种设计理念一经推出就受到广大开发者的喜爱,主要侧重于纸墨化创作和突出设计的实体感,使得设计更接近于真实世界,力求平滑、连续的交互方式与用户体验,这种设计规范更能促进 Android 生态系统的发展,为此,Google 提供了一系列的符合 Material Design 风格的控件,如 FloatingActionButton、Snackbar、TabLayout 等。虽然经常在开发中用到,但是没有做记录,打算从头开始记录一下这些组件的使用,今天说一下 CoordinatorLayout 和 FloatingActionButton 相关的知识。
CoordinatorLayout
CoordinatorLayout 是一个加强版的 FramLayout,意味着如果不加任何限制,在 CoordinatorLayout 里面的子 View 都会默认出现在左上角,CoordinatorLayout 有两个主要的使用方式:
- 作为应用的顶层布局
- 作为与一个或多个子 View 交互的容器
可为 CoordinatorLayout 里面的子 View 指定 Behavior,就在单个父布局中提供许多不同的交互效果,子 View 之间也可以相互交互,CoordinatorLayout 可以使用 CoordinatorLayout.DefaultBehavior 注解来指定子 View 的默认行为,总之,可以借助 CoordinatorLayout 实现不同的滚动效果。
FloatingActionButton
FloatingActionButton 是 Material Design 类型的按钮控件,一般表现是浮动在 UI 上层的圆形图标,有自己的 behavior 并可以设置锚点。
FloatingActionButton 有两种大小,分别是 normal(56dp) 和 mini(40dp) ,默认是 mini(40dp),其大小可以通过属性 fabSize 来指定需要的大小,当然也可以设置 fabSize 为 auto,系统会根据不同的屏幕选择合适的大小。
FloatingActionButton 间接继承 ImageView,可以使用如下方式在代码中设置图标:
//设置图标
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);
FloatingActionButton 的背景颜色默认是主题的 colorAccent 表示的值,在代码中可以通过如下方式修改 FloatingActionButton 的背景颜色,具体如下:
//设置背景颜色
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));
可以通过如下方式设置 FloatingActionButton 的大小,具体如下:
//设置大小
fab.setSize(FloatingActionButton.SIZE_MINI);
那么,如何自定义 FloatingActionButton 的大小呢,可以从 FloatingActionButton 部分源码中看到决定其大小的尺寸是定义到 dimens 文件中的,具体由 design_fab_size_mini 和 design_fab_size_normal 来决定,部分代码如下:
//源码
private int getSizeDimension(@Size final int size) {
final Resources res = getResources();
switch (size) {
case SIZE_AUTO:
// If we're set to auto, grab the size from resources and refresh
final int width = res.getConfiguration().screenWidthDp;
final int height = res.getConfiguration().screenHeightDp;
return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
? getSizeDimension(SIZE_MINI)
: getSizeDimension(SIZE_NORMAL);
case SIZE_MINI:
return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
case SIZE_NORMAL:
default:
return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
}
}
所以只需要创建 dimens 文件夹,在里面重新设置 design_fab_size_mini 和 design_fab_size_normal 的值即可自定义 FloatingActionButton 的大小了,具体如下:
/**dimens.xml**/
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_fab_size_mini" tools:override="true">20dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">100dp</dimen>
</resources>
当然 FloatingActionButton 间接继承 ImageView,ImageView 的一些属性肯定可以使用,这里就不在说了。
FloatingActionButton 的属性
下面是一些常用的属性,具体如下:
android:src //设置图标(24dp)
app:backgroundTint //设置图标背景颜色。
app:rippleColor //设置点击时水波纹颜色
app:elevation //设置阴影大小
app:fabSize //设置大小
app:pressedTranslationZ //按下时距离Z轴的距离
app:layout_anchor //设置锚点
app:layout_anchorGravity//设置相对锚点的位置
关于属性,了解一下,具体使用时设置后观察效果不失为一种直观的学习方式。
简单使用
总觉得做笔记还是有效果图比较好,那就简单使用 CoordinatorLayout 和 FloatingActionButton 看一下具体效果,布局如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.manu.materialdesignsamples.samples.SampleActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:visibility="visible"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:layout_gravity="bottom|end"
android:src="@drawable/fab"
android:scaleType="center"
app:backgroundTint="@color/colorAccent"
app:backgroundTintMode="src_in"
app:elevation="5dp"
app:rippleColor="#000000"
app:fabSize="auto"
app:pressedTranslationZ="10dp"/>
</android.support.design.widget.CoordinatorLayout>
然后在设置 FloatingActionButton 的点击事件,具体如下:
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v,"我是Snackbar...",Snackbar.LENGTH_SHORT)
.setAction("取消", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(SampleActivity.this, "取消", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
先来一张效果图,具体如下:
可知 FloatingActionButton 会自动给 Snackbar 留出位置,避免 Snackbar 弹出时遮挡 FloatingActionButton,因为在 FloatingActionButton 内部已经实现了使用 Snackbar 对应的 Behavior,CoordinatorLayout 会根据对应的 Behavior 的具体表现自动调整子 View 的位置,这里当然是 FloatingActionButton 的位置,可以试一试将根布局设置为 RelativeLayout 等,当然,此时 Snackbar 弹出时会遮挡 FloatingActionButton,顾名思义 CoordinatorLayout 就是协调布局,关于 Behavior 这部分留到后面整理。
可以选择关注微信公众号:jzman-blog 获取最新更新,一起交流学习!
Material Design 组件之 FloatingActionButton的更多相关文章
- Material Design 组件之 CollapsingToolbarLayout
CollapsingToolbarLayout 主要用于实现一个可折叠的标题栏,一般作为 AppBarLayout 的子 View 来使用,下面总结一下 CollapsingToolbarLayout ...
- Material Design 组件之NavigationView
今天来看一下 NavigationView 的使用,NavigationView 是一个标准的导航菜单,其菜单内容由菜单资源文件来填充,NavigationView 一般和 DrawerLayout ...
- Material Design 组件之 AppBarLayout
AppBarLayout 是一个垂直方向的 LinearLayout,它实现了许多符合 Material Design 设计规范的状态栏应该具有的功能,比如滚动手势. AppBarLayout 一般直 ...
- Material Design with the Android Design Support Library
Material Design with the Android Design Support Library 原文http://www.sitepoint.com/material-design-a ...
- Jquery之家5个顶级Material Design框架
谷歌Material Design在如今的前端页面设计中非常流行.Material Design的设计风格向我们展示了一个简单而有内涵的现代UI设计方案. Material Design是如此的简洁美 ...
- Top 15 - Material Design框架和类库(译)
_Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...
- Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout
如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...
- Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...
- 基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
随机推荐
- Yoshino: 一个基于React的可定制化的PC组件库
Github: https://github.com/Yoshino-UI... Docs: https://yoshino-ui.github.io/#/ Cli-Tool: https://git ...
- 高性能内存队列Disruptor--原理分析
1.起源 Disruptor最初由lmax.com开发,2010年在Qcon公开发表,并于2011年开源,其官网定义为:"High Performance Inter-Thread ...
- Yuchuan_Linux_C 编程之三 静态库的制作和使用
一.整体大纲 二.静态库的制作 1)命名规则 lib + 库的名字 + .a 例如:libyuchuan.a2)制作步骤: 1). 生成对应的.o文件 -- ...
- 汇编语言-[bx]和loop指令和多个段
5.1 [BX]和内存单元的描述 要完成描述一个内存单元,需要两种信息: 内存单元的地址: 可以用 [0] 表示一个内存单元, 0 表示单元的偏移地址,段地址默认在 ds 中: 同样也可以用 [bx] ...
- 关于vue-cli3打包时遇到Cannot assign to read only property 'exports' of object '#<Object>'问题的解决方法。
vue-cli3打包时遇到Cannot assign to read only property 'exports' of object '#<Object>'问题的解决方法. 大致是说, ...
- var, let ,const区别
ES6中加入了let,const字符,先说说新的区别: 作用域:let 声明的变量只在它所在的代码块内有效,而且不存在变量提升,即变量可以在声明之前使用,值为undefined.let未声明变量前会报 ...
- python学习-练习题兔子生长问题巩固
有一对兔子,一个月之后成熟,成熟之后每个月会生出一对兔子,理想状态下兔子不会死,请问n个月后有多少兔子? 分析:第一个月:1 第二个月:1 第三个月:2 第四个月:3 第五个月:5 第六个月:8 从前 ...
- PHP的for循环
For循环执行代码块指定的次数,或者当指定的条件为真时循环执行代码块.for循环用于您预先知道脚本需要运行的次数的情况 for(初始值:条件:增量) { 要执行的代码: } <html> ...
- Simulink仿真入门到精通(十四) Simulink自定义环境
14.1 Simulink环境自定义功能 sl_sustomization.m函数是Simulink提供给用户使用MATLAB语言自定义Simulink标准人机界面的函数机制.若sl_sustomiz ...
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...