美文网首页
clans FAB library usage

clans FAB library usage

作者: 张知卓见 | 来源:发表于2017-06-07 13:25 被阅读47次

旋转 fab icon

java

    private FloatingActionMenu menuYellow; // start
    // oncreate
    menuYellow = (FloatingActionMenu) view.findViewById(R.id.menu_yellow);
        menuYellow.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() {
            @Override
            public void onMenuToggle(boolean opened) {
                String text;
                if (opened) {
                    text = "Menu opened";
                } else {
                    text = "Menu closed";
                }
                Toast.makeText(getActivity(), text, Toast.LENGTH_SHORT).show();
            }
        });

layout

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/menu_yellow"
    fab:menu_labels_style="@style/MenuLabelsStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fab:menu_shadowColor="#444"
    fab:menu_colorNormal="#FFB805"
    fab:menu_colorPressed="#F2AB00"
    fab:menu_colorRipple="#D99200">
</com.github.clans.fab.FloatingActionMenu>

styles

<style name="MenuLabelsStyle">
    <item name="android:background">@drawable/fab_label_background</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:textSize">14sp</item>
    <item name="android:maxLines">2</item>
    <item name="android:ellipsize">end</item>
</style>

fab_label_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#A6000000" />
            <padding android:left="8dp" android:top="4dp" android:right="8dp" android:bottom="4dp" />
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#99000000" />
            <padding android:left="8dp" android:top="4dp" android:right="8dp" android:bottom="4dp" />
            <corners android:radius="2dp" />
        </shape>
    </item>

</selector>

切换 icon

layout

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:menu_icon="@drawable/ic_star"
        fab:menu_animationDelayPerItem="0"
        fab:menu_colorNormal="#43A047"
        fab:menu_colorPressed="#2E7D32"
        fab:menu_colorRipple="#1B5E20">
    </com.github.clans.fab.FloatingActionMenu>

java


    private FloatingActionMenu menuGreen; // start
    // oncreate
    menuGreen = (FloatingActionMenu) view.findViewById(R.id.menu_green);
    createCustomAnimation();
    // after oncreate
    private void createCustomAnimation() {
        AnimatorSet set = new AnimatorSet();

        ObjectAnimator scaleOutX = ObjectAnimator.ofFloat(menuGreen.getMenuIconView(), "scaleX", 1.0f, 0.2f);
        ObjectAnimator scaleOutY = ObjectAnimator.ofFloat(menuGreen.getMenuIconView(), "scaleY", 1.0f, 0.2f);

        ObjectAnimator scaleInX = ObjectAnimator.ofFloat(menuGreen.getMenuIconView(), "scaleX", 0.2f, 1.0f);
        ObjectAnimator scaleInY = ObjectAnimator.ofFloat(menuGreen.getMenuIconView(), "scaleY", 0.2f, 1.0f);

        scaleOutX.setDuration(50);
        scaleOutY.setDuration(50);

        scaleInX.setDuration(150);
        scaleInY.setDuration(150);

        scaleInX.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                menuGreen.getMenuIconView().setImageResource(menuGreen.isOpened()
                        ? R.drawable.ic_close : R.drawable.ic_star);
            }
        });

        set.play(scaleOutX).with(scaleOutY);
        set.play(scaleInX).with(scaleInY).after(scaleOutX);
        set.setInterpolator(new OvershootInterpolator(2));

        menuGreen.setIconToggleAnimatorSet(set);
    }

上滑消失,下滑恢复

layout

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:src="@drawable/ic_progress"
        fab:fab_showAnimation="@anim/show_from_bottom"
        fab:fab_hideAnimation="@anim/hide_to_bottom"/>

java

        final FloatingActionButton fab = (FloatingActionButton) view.findViewById(R.id.fab);
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (Math.abs(dy) > mScrollOffset) {
                    if (dy > 0) {
                        fab.hide(true);
                    } else {
                        fab.show(true);
                    }
                }
            }
        });

相关文章

网友评论

      本文标题:clans FAB library usage

      本文链接:https://www.haomeiwen.com/subject/ckwofxtx.html