Android Material Design之FloatingActionButton
一、FloatingActionButton简介
FloatingActionButton是 Android design support library 中的另一个组件。
FloatingActionButtonpublic class FloatingActionButtonextends ImageButtonjava.lang.Object ↳ android.view.View ↳ android.widget.ImageView ↳ android.widget.ImageButton ↳ android.support.design.widget.FloatingActionButton 是一个有3D效果的悬浮按钮，继承ImageView，所以FloatingActionButton有ImageView的全部属性，你也可以把它当做一个ImageView使用。
二、FloatingActionButton属性
app:elevation ···························································设置FAB未按下时的阴影大小
app:pressedTranslationZ·····································设置FAB按下时的阴影大小(需要设置事件才能开的效*果*)
app:fabSize································································设置FAB的大小，有normal、mini、auto
app:borderWidth ···················································设置FAB的边框宽度
android:src·································································设置FAB的drawaber
app:rippleColor························································设置FAB按下时的背景色(需要设置事件才能开的效果)
app:backgroundTint··············································设置FAB未按下时的背景色
app:layout_anchor··················································设置FAB的锚点及所依赖的View
app:layout_anchorGravity···································设置FAB相对于锚点的位置
app:layout_behavior··············································设置FAB的Behavior行为属性
app:backgroundTintMode··································设置渲染模式有multiply、screen、src_atop、src_in、src_over
app:useCompatPadding······································使能够兼容padding
app:layout_insetEdge···········································(后面研究)
app:layout_dodgeInsetEdges···························(后面研究)
app:layout_keyline················································(后面研究)
注意：
- app:borderWidth :这个一般设置为0dp，不然的话在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果
- app:rippleColor：当我使用com.android.support:design:23.2.0 的时候这个属性会失效，建议使用最新的 com.android.support:design:23.3.0’ 或者适当的降低版本
- app:useCompatPadding:(后面研究)
- app:layout_insetEdge:(后面研究)
- app:layout_dodgeInsetEdges:(后面研究)
- app:layout_keyline:(后面研究)
三、FloatingActionButton简单使用
.support.design.widget.FloatingActionButton android:id="@+id/fab_one" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left|top" android:layout_marginLeft="16dp" android:layout_marginTop="10dp" android:src="@mipmap/ic_launcher" app:backgroundTint="@color/colorAccent" app:borderWidth="0dp" app:elevation="20dp" app:pressedTranslationZ="20dp" app:rippleColor="@color/colorPrimary" />设置不同的backgroundTint、elevation、pressedTranslationZ属性的效果图如下
四、FloatingActionButton与SnackBar
当SnackBar出现的时候FloatingActionButton会自动留出显示区域给SnackBar
实现方式一:设置FAB的点击事件
floatingActionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(v, "FloatingActionButton", Snackbar.LENGTH_SHORT).show(); } });实现方式二：Snackbar的容器使用CoordinatorLayout
Snackbar.make(coordinatorLayout, "FloatingActionButton", Snackbar.LENGTH_SHORT).show();五、FloatingActionButton与RecyclerView
就是实现向上滑动列表的时候隐藏FAB，实现向下滑动的时候显示FAB，下面的效果图可能看不出来，将就一下。。。。
看过源码就应该知道FAB有个内部类Behavior ，用来控制FAB的行为，但是系统自带只支持AppBarLayout改变的效果，所以我们需要自己重新Behavior
java.lang.Object ↳ android.support.design.widget.CoordinatorLayout.Behavior.support.design.widget.FloatingActionButton> ↳ android.support.design.widget.FloatingActionButton.Behavior 自定义的Behavior
public class ScrollBehavior extends FloatingActionButton.Behavior { private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator(); private boolean mIsAnimatingOut = false; public ScrollBehavior(Context context, AttributeSet attrs) { super(); } @Override public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child, final View directTargetChild, final View target, final int nestedScrollAxes) { // 确定是在垂直方向上滑动 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 animateOut(child); } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) { // 显示FAB animateIn(child); } } // 定义滑动时的属性动画效果 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) { ScrollBehavior.this.mIsAnimatingOut = true; } public void onAnimationCancel(View view) { ScrollBehavior.this.mIsAnimatingOut = false; } public void onAnimationEnd(View view) { ScrollBehavior.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) { ScrollBehavior.this.mIsAnimatingOut = true; } public void onAnimationEnd(Animation animation) { ScrollBehavior.this.mIsAnimatingOut = false; button.setVisibility(View.GONE); } @Override public void onAnimationRepeat(final Animation animation) { } }); button.startAnimation(anim); } } 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); } }}然后在xml中设置layout_behavior属性为我们自己写的就可以实现了
六、FloatingActionButton与AppBarLayout
借助FloatingActionButton的layout_anchor、ayout_anchorGravity属性设置FAB的位置
布局代码
.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=".SecondActivity"> .support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true"> .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"> "match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/ic_launcher" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> .support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" /> .support.design.widget.CollapsingToolbarLayout> .support.design.widget.AppBarLayout> .support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:backgroundTint="@color/colorAccent" 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" /> .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" />.support.design.widget.CoordinatorLayout> 这里用到的CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar后面文章会介绍
总结
FloatingActionButton是一个比较简单的控件，只要掌握几个常用属性就好了
项目源码
https://github.com/Yi520153/DesignFloatingActionButton
参考资料
http://www.tuicool.com/articles/u2aauiQ
http://blog.csdn.net/codenoodles/article/details/50898837
http://www.woshipm.com/ucd/166400.html
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1028/1857.html
http://blog.csdn.net/lmj623565791/article/details/46678867
http://blog.csdn.net/wei_smile/article/details/51375170
更多相关文章
- Android 导航条效果实现（三） ViewPager+PagerTabStrip
- android tv 实现颜色条滚动效果
- Android 福彩3D体彩排列（源码+算法）
- Android 属性动画详解
- android仿照ipone的弹性效果
- Android 4.0源码编译错误
- Android 源码阅读之SMS
- 【android-tips】android程序执行adb shell命令（实例源码）