从筹码组中顺利移除 android 个筹码
Remove an android Chip from a Chip Group smoothly
在我正在开发的应用程序片段之一中,我让用户创建各种 筹码,每个筹码代表一个选项。我能够 动画化 芯片创建。
现在,当用户点击一个筹码时,我将其从组中删除。我能够将自定义动画与删除相关联(参见 gif)但是当 "middle chip" 被删除时,右边的筹码 突然向左移动 ,当动画结束
布局:
<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" />
我想要一个 流畅的动画 ,当 "middle chip" 被删除时,碎片会平滑地向左移动。我尝试了几件事,但没有成功。
如果你的意思是这样的
我已经将它添加到一个 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)
并且每个 chip.inside 上都有一个 onClickListener
它我开始淡入淡出动画并在 onAnimationEnd
上 removeView
chip_group
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)
}
在我正在开发的应用程序片段之一中,我让用户创建各种 筹码,每个筹码代表一个选项。我能够 动画化 芯片创建。
现在,当用户点击一个筹码时,我将其从组中删除。我能够将自定义动画与删除相关联(参见 gif)但是当 "middle chip" 被删除时,右边的筹码 突然向左移动 ,当动画结束
布局:
<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" />
我想要一个 流畅的动画 ,当 "middle chip" 被删除时,碎片会平滑地向左移动。我尝试了几件事,但没有成功。
如果你的意思是这样的
我已经将它添加到一个 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)
并且每个 chip.inside 上都有一个 onClickListener
它我开始淡入淡出动画并在 onAnimationEnd
上 removeView
chip_group
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)
}