FloatingActionsMenu使用

2017-12-01 本文已影响57人 97690CE50CC872D

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

FloatingActionsMenu使用

FloatingActionsMenu使用

主要实现：

效果图：

1. 在build.gradle中导入依赖:

2. 接下来使用该第三方库的FloatingActionsMenu来代替之前布局文件中的FloatingActionButton。FloatingActionsMenu可以说是一个FAB集合，其本身包含一个add按钮，点击该按钮后便展开子菜单，从而实现弹出特效。布局文件activity_main.xml如下：

3.对FloatingActionButton滚动隐藏，CoordinatorLayout布局下设置app:layout_behavior属性

5.设置点击事件

参考

猜你喜欢

热点阅读