Question

我有浮动操作菜单，我使用此库来制作它'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
如果你有一些想法，请告诉我）

Answer 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);
    }
});

Answer 2

有一个更好的解决方案，包括图标drawables之间的交叉淡入淡出动画。它可以在示例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);

FABM：浮动操作按钮菜单

2 个答案: