FABM：浮动操作按钮菜单答案

【问题标题】：FABM: Floating Action Button MenuFABM：浮动操作按钮菜单
【发布时间】：2015-10-07 13:31:32
【问题描述】：

我有浮动操作菜单，我使用这个库来制作它'com.github.clans:fab:1.6.1'
现在我需要在点击它时更改我的图标。我有一些图标，当我单击菜单时，我需要将其转换为另一个图标（图标加号）。可能吗？这是我的 xml：

<com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        fab:menu_icon="@drawable/ic_float_cards"
        android:layout_margin="16dp"
        fab:menu_animationDelayPerItem="0"
        fab:menu_colorNormal="@color/event_background"
        fab:menu_colorPressed="@color/fab_colorPressed"
        fab:menu_colorRipple="@color/fab_colorRipple"
        fab:menu_labels_maxLines="2"
        fab:menu_labels_ellipsize="end">

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_fill"
        fab:fab_label="Пополнить"
        style="@style/MenuButtonsSmall.Green" />

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_pay"
        fab:fab_label="Оплатить"
        style="@style/MenuButtonsSmall.Yellow" />

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_outcome"
        fab:fab_label="Перевести"
        style="@style/MenuButtonsSmall.Red" />

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_income"
        fab:fab_label="Запрос перевода"
        style="@style/MenuButtonsSmall.DarkPink" />

    <com.github.clans.fab.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dial_send"
        fab:fab_label="Сообщение"
        style="@style/MenuButtonsSmall.Purple" />

</com.github.clans.fab.FloatingActionMenu>

起初图标是ic_float_cards，但当我点击它应该是ic_float_cross
如果你有什么想法请告诉我）

【问题讨论】：

标签： android menu material-design floating

【解决方案1】：

这完成了这项工作，并且还将恢复为原始图标。

final FloatingActionMenu fab = (FloatingActionMenu) findViewById(R.id.menu3);
fab.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() {
    @Override
    public void onMenuToggle(boolean opened) {
        int drawableId;
        if (opened) {
            drawableId = R.drawable.ic_float_cross;
        } else {
            drawableId =  R.drawable.ic_float_cards;
        }
        Drawable drawable = getResources().getDrawable(drawableId);
        fab.getMenuIconView().setImageDrawable(drawable);
    }
});

【讨论】：

在我的情况下，findViewById 给出了错误。请帮助我
@14bce109 确保在视图 xml 文件中声明了浮动操作按钮，并且将正确的 id 传递给 findViewById

【解决方案2】：

有一个更好的解决方案，包括图标可绘制对象之间的交叉淡入淡出动画。它可以在示例 Clans 的应用程序here 中找到。这是完成这项工作的代码：

    final FloatingActionMenu fabMenu = ...;

    AnimatorSet set = new AnimatorSet();

    View menuIconView = fabMenu.getMenuIconView();

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

    ObjectAnimator scaleInX = ObjectAnimator.ofFloat(menuIconView, "scaleX", 0.2f, 1.0f);
    ObjectAnimator scaleInY = ObjectAnimator.ofFloat(menuIconView, "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) {
            fabMenu.getMenuIconView().setImageResource(fabMenu.isOpened()
                    ? R.drawable.ic_float_cross : R.drawable.ic_float_cards);
        }
    });

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

    fabMenu.setIconToggleAnimatorSet(set);

【讨论】：