FloatingActionsMenu使用
主要实现：
- FloatingActionMenu点击FAB弹出子菜单
- 滑动时自动隐藏FAB
效果图：
small.gif
这里用到一个第三方FAB库，主要实现步骤如下:
1. 在build.gradle中导入依赖:
compile 'com.getbase:floatingactionbutton:1.10.1'
2. 接下来使用该第三方库的FloatingActionsMenu来代替之前布局文件中的FloatingActionButton。FloatingActionsMenu可以说是一个FAB集合，其本身包含一个add按钮，点击该按钮后便展开子菜单，从而实现弹出特效。布局文件activity_main.xml如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sychan.shaka.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:visibility="gone"
app:elevation="4dp"
app:fabSize="normal"
app:layout_behavior="com.sychan.shaka.support.behavior.FabScrollBehavior"
app:srcCompat="@android:drawable/ic_menu_edit" />
<!--重点在这下面-->
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/fab_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/bottom_navigation"
android:layout_gravity="end|bottom"
android:layout_marginBottom="56dp"
android:layout_marginLeft="@dimen/fab_margin"
android:layout_marginRight="@dimen/fab_margin"
android:layout_marginTop="@dimen/fab_margin"
android:visibility="visible"
app:elevation="4dp"
app:fabSize="normal"
app:layout_behavior="com.sychan.shaka.support.behavior.ScrollAwareFABBehavior"
fab:fab_addButtonColorNormal="@color/colorAccent"
fab:fab_icon="@drawable/ic_add_black_24dp"
fab:fab_labelStyle="@style/menu_labels_style"
fab:fab_labelsPosition="left">
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/colorAccent"
fab:fab_icon="@drawable/ic_assignment_late_black_24dp"
fab:fab_size="mini"
fab:fab_title="第1个FAB" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/colorAccent"
fab:fab_icon="@drawable/ic_assignment_late_black_24dp"
fab:fab_size="mini"
fab:fab_title="第2个FAB" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/colorAccent"
fab:fab_icon="@drawable/ic_assignment_turned_in_black_24dp"
fab:fab_size="mini"
fab:fab_title="第3个FAB" />
</com.getbase.floatingactionbutton.FloatingActionsMenu>
<!--重点在这上面-->
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:itemIconTint="@color/selector_item_color"
app:itemTextColor="@color/selector_item_color"
app:layout_behavior="com.sychan.shaka.support.behavior.BottomNavigationViewBehavior"
app:layout_insetEdge="bottom"
app:menu="@menu/menu_navigation_with_view_pager" />
</android.support.design.widget.CoordinatorLayout>
针对上面用到的一些资源，可以查看以下注意事项。
注意事项：
- 命名空间
xmlns:fab="http://schemas.android.com/apk/res-auto" - 设置labelStyle
<style name="menu_labels_style">
<item name="android:background">@drawable/fab_label_background</item>
<item name="android:textColor">@color/text</item>
</style> - drawable下的fab_label_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/black_semi_transparent"/>
<padding
android:left="16dp"
android:top="4dp"
android:right="16dp"
android:bottom="4dp"/>
<corners
android:radius="2dp"/>
</shape>
布局文件中的ic_add_black_24dp、ic_assignment_late_black_24dp、ic_assignment_late_black_24dp和ic_assignment_turned_in_black_24dp都可以通过右键drawable文件夹--New--Vector asset来选择，在material icon下点choose即可进行图标的挑选。
3.对FloatingActionButton滚动隐藏，CoordinatorLayout布局下设置app:layout_behavior属性
新建一个ScrollAwareFABBehavior类，继承自CoordinatorLayout.Behavior<FloatingActionsMenu>，代码如下：
public class ScrollAwareFABBehavior extends CoordinatorLayout.Behavior<FloatingActionsMenu> {
private static final android.view.animation.Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
private boolean mIsAnimatingOut = false;
public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
super();
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionsMenu child, View directTargetChild, View target, int nestedScrollAxes) {
//处理垂直方向上的滚动事件
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
}
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionsMenu child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
// //向上滚动进入，向下滚动隐藏
// if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
// //如果是展开的话就先收回去
// if (child.isExpanded()) {
// child.collapse();
// }
// //animateOut()和animateIn()都是私有方法，需要重新实现
// animateOut(child);
// } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
// animateIn(child);
// }
if (dyConsumed > 0) { // 向下滑动
//如果是展开的话就先收回去
if (child.isExpanded()) {
child.collapse();
}
animateOut(child);
} else if (dyConsumed < 0) { // 向上滑动
animateIn(child);
}
}
private void animateOut(final FloatingActionsMenu button) {
// CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) button.getLayoutParams();
// int fabBottomMargin = lp.bottomMargin;
// int distanceToScroll = button.getHeight() + fabBottomMargin;
// ViewCompat.animate(button).translationY(distanceToScroll)
// .setInterpolator(INTERPOLATOR).withLayer()
// .setListener(new ViewPropertyAnimatorListener() {
// @Override
// public void onAnimationStart(View view) {
// ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
// }
//
// @Override
// public void onAnimationEnd(View view) {
// ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
// view.setVisibility(View.GONE);
// }
//
// @Override
// public void onAnimationCancel(View view) {
// ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
//
// }
// }).start();
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) button.getLayoutParams();
int bottomMargin = layoutParams.bottomMargin;
button.animate().translationY(button.getHeight() + bottomMargin).setInterpolator(new LinearInterpolator()).start();
}
private void animateIn(FloatingActionsMenu button) {
button.animate().translationY(0).setInterpolator(new LinearInterpolator()).start();
}
}
最后在布局文件的FloatingActionsMenu中添加下面的属性
app:layout_behavior="com.android.shaka.support.behavior.ScrollAwareFABBehavior"
5.设置点击事件
- 直接findViewById
FloatingActionButton fab1 =(FloatingActionButton)findViewById(R.id.fab_1);
FloatingActionButton fab2=(FloatingActionButton)findViewById(R.id.fab_1);
FloatingActionButton fab3=(FloatingActionButton)findViewById(R.id.fab_1);
··· ···
··· ···
··· ···
- ButterKnife
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.fab_1:
ToastUtil.show("点击了第1个FAB");
break;
case R.id.fab_2:
ToastUtil.show("点击了第2个FAB");
break;
case R.id.fab_3:
ToastUtil.show("点击了第3个FAB");
break;
}
}
-
参考
https://material.io/guidelines/components/buttons.html#
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html
http://kahn.wang/the-way-to-hide-and-expand-floatingactionbutton/
https://github.com/w-kahn/FABDemo
网友评论