美文网首页
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