【Android - 控件】之MD - FloatingActionButton的使用
FloatingActionButton(FAB) 是 Android 5.0 新特性——Material Design 中的一个控件,是一种悬浮的按钮。
FloatingActionButton 是 ImageView 的子类,因此它具备ImageView的全部属性。
FloatingActionButton 结合 CoordinatorLayout 使用,即可实现悬浮在任意控件的任意位置。
使用 FloatingActionButton 的难点主要是布局,其在JAVA代码中的用法和普通的 ImageView 基本相同。
跟所有MD控件一样,要使用FAB,需要在gradle文件中先注册依赖:
compile 'com.android.support:design:25.0.0'
1、FAB 基本属性:
android:src:FAB中显示的图标,最好是24dp的
app:backgroundTint:正常的背景颜色
app:rippleColor:按下时的背景颜色
app:elevation:正常的阴影大小
app:pressedTranslationZ:按下时的阴影大小
app:layout_anchor:设置FAB的锚点,即以哪个控件为参照设置位置
app:layout_anchorGravity:FAB相对于锚点的位置
app:fabSize:FAB的大小,normal或mini(对应56dp和40dp)
注意:要想让FAB显示点击后的颜色和阴影变化效果,必须设置onClick事件
实例布局代码:
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20.0dip"
android:onClick="click"
android:src="@mipmap/ic_launcher"
app:backgroundTint="#30469b"
app:borderWidth="0.0dip"
app:elevation="5.0dip"
app:fabSize="normal"
app:layout_anchor="@id/container"
app:layout_anchorGravity="right|bottom"
app:pressedTranslationZ="10.0dip"
app:rippleColor="#a6a6a6" /> </android.support.design.widget.CoordinatorLayout>
运行结果图:
2、交互事件:
FloatingActionButton 的用法和ImageView基本相同,要想设置FloatingActionButton的点击事件,直接调用setOnClickListener()方法即可。
值得一提的是,当FloatingActionButton与Snackbar一起使用的时候,有时候会发生“Snackbar将FloatingActionButton覆盖”的问题,即FloatingActionButton不会因为Snackbar的弹出而上移,这是因为Snackbar的make()方法第一个参数没有与FloatingActionButton绑定,只要Snackbar的make()方法第一个参数是FloatingActionButton对象,就不会出现上述问题,实例代码如下:
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 第一个参数设置为FAB就可以使FAB跟随Snackbar移动
Snackbar.make(v, "去下一页?", Snackbar.LENGTH_LONG).setAction("确定", new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, NextActivity.class));
}
}).show();
}
});
运行结果如下图:
3、FAB 滑动隐藏/显示:
很多应用中都有这种界面:界面中有一个FAB和一个RecyclerView,当RecyclerView向下滑动时,FAB消失;当RecyclerView向上滑动时,FAB又显示出来。这是FAB与RecyclerView、CoordinatorLayout结合使用的结果。通过设置FAB在CoordinatorLayout中的Behavior来实现这种效果。下面贴代码:
布局代码:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_next"
android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView
android:id="@+id/next_rv"
android:layout_width="match_parent"
android:layout_height="match_parent" /> <android.support.design.widget.FloatingActionButton
android:id="@+id/next_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20.0dip"
android:onClick="click"
android:src="@mipmap/ic_launcher"
app:backgroundTint="@color/colorPrimaryDark"
app:elevation="5.0dip"
app:fabSize="normal"
app:layout_anchor="@id/next_rv"
app:layout_anchorGravity="bottom|right"
app:layout_behavior="com.example.testfloatingactionbutton.ScrollAwareFABBehavior"
app:pressedTranslationZ="10.0dip"
app:rippleColor="@color/colorPrimary" /> </android.support.design.widget.CoordinatorLayout>
ScrollAwareFABBehavior类中的代码:
public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
// 动画插值器,可以控制动画的变化率
private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator(); // 是否正在执行隐藏的动画
private boolean mIsAnimatingOut = false; public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
super();
} @Override
public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
final View directTargetChild, final View target, final int nestedScrollAxes) {
// 如果是上下滑动的,则返回true
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
|| super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
} @Override
public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
final View target, final int dxConsumed, final int dyConsumed,
final int dxUnconsumed, final int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
// 用户向下滑动时判断是否正在执行隐藏动画,如果不是,而且FAB当前是可见的,则执行隐藏动画隐藏FAB
animateOut(child);
} else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
// 用户向上滑动时判断FAB是否可见,如果不可见则执行显示动画显示FAB
animateIn(child);
}
} // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits
// 执行隐藏动画隐藏FAB
private void animateOut(final FloatingActionButton button) {
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
.setListener(new ViewPropertyAnimatorListener() {
public void onAnimationStart(View view) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
} public void onAnimationCancel(View view) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
} public void onAnimationEnd(View view) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
view.setVisibility(View.GONE);
}
}).start();
} else {
Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out);
anim.setInterpolator(INTERPOLATOR);
anim.setDuration(200L);
anim.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation animation) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
} public void onAnimationEnd(Animation animation) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
button.setVisibility(View.GONE);
} @Override
public void onAnimationRepeat(final Animation animation) {
}
});
button.startAnimation(anim);
}
} // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters
// 执行显示动画显示FAB
private void animateIn(FloatingActionButton button) {
button.setVisibility(View.VISIBLE);
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
.setInterpolator(INTERPOLATOR).withLayer().setListener(null)
.start();
} else {
Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in);
anim.setDuration(200L);
anim.setInterpolator(INTERPOLATOR);
button.startAnimation(anim);
}
}
}
FAB显示的动画fab_in:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:zAdjustment="top">
<scale
android:duration="@android:integer/config_mediumAnimTime"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:toXScale=".5"
android:toYScale=".5" />
<alpha
android:duration="@android:integer/config_mediumAnimTime"
android:fromAlpha="1.0"
android:toAlpha="0" />
</set>
FAB隐藏的动画fab_out:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<scale
android:duration="@android:integer/config_mediumAnimTime"
android:fromXScale="2.0"
android:fromYScale="2.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
</set>
运行效果如下图:
以上就是对FloatingActionButton用法的简单介绍,下面贴出码云上的代码,供大家参考。
【Android - 控件】之MD - FloatingActionButton的使用的更多相关文章
- RxJava RxBinding RxView 控件事件 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- [Android Pro] android控件ListView顶部或者底部也显示分割线
reference to : http://blog.csdn.net/lovexieyuan520/article/details/50846569 在默认的Android控件ListView在 ...
- Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像
此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...
- Android 控件架构及View、ViewGroup的测量
附录:示例代码地址 控件在Android开发的过程中是必不可少的,无论是我们在使用系统控件还是自定义的控件.下面我们将讲解一下Android的控件架构,以及如何实现自定义控件. 1.Android控件 ...
- Android - 控件android:ems属性
Android - 控件android:ems属性http://blog.csdn.net/caroline_wendy/article/details/41684255?utm_source=tui ...
- Android 控件知识点,
一.Android控件具有visibility属性,可以取三个值:visible(默认值)可见,invisible(不可见,但仍然占据原有的位置和大小,可以看做是变得透明了),gone(空间不仅不可见 ...
- UIAutomator定位Android控件的方法
UIAutomator各种控件定位的方法. 1. 背景 使用SDK自带的NotePad应用,尝试去获得在NotesList那个Activity里的Menu Options上面的那个Add note菜单 ...
- 从Android系统出发,分析Android控件构架
从Android系统出发,分析Android控件构架 Android中所有的控件追溯到根源,就是View 和ViewGroup,相信这个大家都知道,但是大家也许会不太清楚它们之间的具体关系是什么,在A ...
- Android控件系列之RadioButton&RadioGroup(转)
学习目的: 1.掌握在Android中如何建立RadioGroup和RadioButton 2.掌握RadioGroup的常用属性 3.理解RadioButton和CheckBox的区别 4.掌握Ra ...
- 第三个 android控件
android控件以及控件对应的属性:
随机推荐
- Android 刷机方案
## 获取 在刷机之前,需要在电脑上下载 **Android Preview** 包,一般我都是到 [安卓中国](https://developer.android.google.cn/preview ...
- 好看的原生UI
我前端可以说是0基础,作显示页面的时候自己设置各种CSS一是麻烦,二是难看,所以找UI组件, 比较流行的组件如ELEMENT之类都需要安装或者依赖其他框架如VUE,为了省事,决定使用原生UI组件, 本 ...
- 在虚拟机上的关于FTP FTP访问模式(本地用户模式)
首先你要有vsftpd服务 可以先去yum中下载(当然你要有本地yum仓库) 输入命令: yum install vsftpd 下载完成之后打开vsftpd服务 输入命令:systemctl ...
- [git]将代码上传到github
1.右键你的项目,如果你之前安装git成功的话,右键会出现两个新选项,分别为Git Gui Here,Git Bash Here,这里我们选择Git Bash Here,进入如下界面 2.接下来输入如 ...
- 揭秘——TCP的三次握手和四次挥手
1.前言 本文以博主在某次前端面试中被问到"什么是TCP协议中的三次握手和四次挥手?"为契机,经过整理教材.百度百科以及他人博客,再结合博主自身的理解,尽可能的以通俗易懂的语言来解 ...
- day2 上午 游戏 对应关系--->判断素数---->多重背包 神题
#include<iostream> using namespace std; int n; ; ]; long long p[maxn]; long long dp[maxn][maxn ...
- 期末考试(正解:三分单峰函数 me~)
好久没有水过杂题了! 今天lsc终于刚过了三道考试题来水杂题了! 期末考试 首先一看还是一脸mb(这是正常现象,毕竟我不像一些大神可以一眼出正解)然后我就被颓了标签,知道是三分单峰函数,但是自己实在是 ...
- 1114作业 html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 7月22 Linux作业-文件管理
习题内容 解答 1.答案 [root@centos7 ~]# echo '*/1 * * * * /usr/bin/cp /etc /data/`/usr/bin/date +\%Y-\%m-\%d` ...
- 微擎签名出错 invalid signature
微擎签名出错 错误信息: config:fail,Error: 系统错误,错误码:63002,invalid signature 修改方法: PHP 端 $account_api = WeAccoun ...