平滑地从 Chip Group 中移除 Android 芯片

Question

在我正在开发的应用程序的一个片段中，我让用户创建各种{{chips}}，每个{{chip}}代表一个选项。我能够对{{chip}}的创建进行{{animate}}。

现在，当用户点击{{chip}}时，我会将其从组中移除。我能够为移除操作关联自定义动画（请参见gif），但是当删除“中间{{chip}}”时，右侧的{{chips}}会在动画结束时突然向左移动。

布局：

       <HorizontalScrollView
           android:layout_width="match_parent"
           android:layout_height="@dimen/horizontal_scroll_height"
           android:scrollbars="none">

           <com.google.android.material.chip.ChipGroup
               android:id="@+id/rouletteChipList"
               style="@style/Widget.MaterialComponents.ChipGroup"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:paddingStart="@dimen/chip_horizontal_margin"
               android:paddingEnd="@dimen/chip_horizontal_margin"
               app:chipSpacing="@dimen/chip_spacing"
               app:singleLine="true">

           </com.google.android.material.chip.ChipGroup>
       </HorizontalScrollView> 

芯片删除：

private void removeChip(final Chip chip) {
        @SuppressWarnings("ConstantConditions") final ChipGroup optionsList = getView().findViewById(R.id.ChipList);
        // Remove the chip with an animation
        if (chip == null) return;
        final Animation animation = AnimationUtils.loadAnimation(getContext(), R.anim.chip_exit_anim);
        chip.startAnimation(animation);
        chip.postDelayed(new Runnable() {
            @Override
            public void run() {
                optionsList.removeView(chip);
            }
        }, 400);
}

芯片布局：

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.chip.Chip xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/placeholder"
    android:textAlignment="center"
    app:chipBackgroundColor="@color/grayTranslucent"
    app:rippleColor="?colorAccent" />

我希望有一个流畅的动画，在“中间芯片”被删除时，芯片平稳地向左移动。我尝试了几种方法，但没有成功。

- m.i.n.a.r.

---

使用RecyclerView代替HorizontalScrollView。 - Gabriele Mariotti

你能详细说明一下吗？很遗憾我从未使用过任何RecyclerView。 - m.i.n.a.r.

并不简单。在材料组件库的目录中，有一个包含芯片和RecyclerView的示例。虽然删除时没有动画，但是RecyclerView上有一个简单的动画。 - Gabriele Mariotti

我会试一下，谢谢。如果有进展，我会更新问题的。 - m.i.n.a.r.

Answer 1

如果您的意思是这样：

我已经将它添加到HSV中，并在chip_group上添加了android:animateLayoutChanges="true"，请参阅下面的代码。

<HorizontalScrollView
        android:scrollbars="none"
        .
        >
        <com.google.android.material.chip.ChipGroup
            android:id="@+id/chip_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true">

        </com.google.android.material.chip.ChipGroup>

    </HorizontalScrollView>

我在代码中动态地向这个chip_group添加了芯片。

val newChip = Chip(this, null, R.attr.chipStyle)
newChip.text = "text"
newChip.isClickable = true
newChip.isFocusable = true
newChip.setOnClickListener(chipClickListener)
chip_group.addView(newChip)

每个芯片上都有一个 onClickListener。我在里面开始一个淡出动画，在onAnimationEnd时对chip_group执行removeView操作。

private val chipClickListener = View.OnClickListener {

        val anim = AlphaAnimation(1f,0f)
        anim.duration = 250
        anim.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationRepeat(animation: Animation?) {}

            override fun onAnimationEnd(animation: Animation?) {
                chip_group.removeView(it)
            }

            override fun onAnimationStart(animation: Animation?) {}
        })

        it.startAnimation(anim)
    }

- Mojtaba Haddadi

---

@m.i.n.a.r.：好的，我在等你 :D - Mojtaba Haddadi

它完美地工作了！非常感谢，我在复杂的解决方案中迷失了方向，而实际上只需要一行代码 :D - m.i.n.a.r.