在Android中的列表视图和网格视图之间高效切换，平滑过渡

Question

我正在尝试实现一个视图切换，使用户能够在Android中的“列表视图”和“网格视图”之间切换。然而，我已经实现了这一点，但我对结果不满意，因为用户很可能会觉得它很烦人。

请找到下面的代码以及预期和实际结果：

fragment_dashboard.xml：

<com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@+id/toggleButtonViewGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:singleSelection="true"
            android:padding="5dp"
            app:checkedButton="@id/buttonGridView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0">

            <com.google.android.material.button.MaterialButton
                android:id="@+id/buttonListView"
                style="?attr/materialButtonOutlinedStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/list_view" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/buttonGridView"
                style="?attr/materialButtonOutlinedStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/grid_view" />
        </com.google.android.material.button.MaterialButtonToggleGroup>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewNotes"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="5dp"
            android:adapter="@{adapter}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/toggleButtonViewGroup"
            tools:itemCount="5"
            tools:listitem="@layout/item_note" />

NotesListViewModel.kt

fun addOnButtonCheckedListener(toggleGroup: MaterialButtonToggleGroup,recyclerView: RecyclerView,mContext: Context){
        recyclerView.layoutManager = StaggeredGridLayoutManager(2,LinearLayoutManager.VERTICAL)
        toggleGroup.addOnButtonCheckedListener { group, checkedId, isChecked ->
            if (isChecked){
                when(checkedId){
                    R.id.buttonListView ->{
                        recyclerView.layoutManager = LinearLayoutManager(mContext,LinearLayoutManager.VERTICAL,false)
                    }
                    R.id.buttonGridView ->{
                        recyclerView.layoutManager = StaggeredGridLayoutManager(2,LinearLayoutManager.VERTICAL)
                    }
                }
            }
        }
    }

DashboardFragment.kt

@AndroidEntryPoint
class DashboardFragment: Fragment() {
    private lateinit var binding: FragmentDashboardBinding
    private val viewModel: NotesListViewModel by viewModels()
    private lateinit var adapter: NotesListAdapter

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?): View {
        binding = FragmentDashboardBinding.inflate(inflater,container,false)
        binding.navController = findNavController()
        binding.viewModel = viewModel
        adapter = NotesListAdapter(viewModel.getNotes(),findNavController())
        binding.adapter = adapter
        viewModel.addOnButtonCheckedListener(binding.toggleButtonViewGroup,binding.recyclerViewNotes,requireActivity())
        return binding.root
    }

    override fun onResume() {
        super.onResume()
        adapter.notifyItemRangeChanged(0,viewModel.getNotes().size)
    }
}

1。实际效果：

2。预期结果：

Answer 1

在你的适配器类中尝试这个

@Override
public void onBindViewHolder(YourViewHolder holder, int position) {
    // ... your binding logic here

    // Create an AnimatorSet for the animation
    AnimatorSet animatorSet = new AnimatorSet();

    // Scale up animation
    ScaleAnimation scaleUp = new ScaleAnimation(0f, 1f, 0f, 1f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    scaleUp.setDuration(300);

    // Translate animation (modify these values for the cascading effect)
    TranslateAnimation translate = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.5f,
            Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f,
            Animation.RELATIVE_TO_SELF, -0.3f);
    translate.setDuration(200);
    translate.setStartDelay(100); // Adjust for cascading effect

    // Add animations to the set
    animatorSet.playSequentially(scaleUp, translate);

    // Start the animation on the item view
    animatorSet.start();
}

onBindViewHolder()

方法被用在适配器中，随后在

RecyclerView

中实现。与列表不同，向量不保存列表的数据。然后，将开发视图动画的方法以及将其应用于更新视图列表的方法。

对于秋季规模，项目将具有与处理上一节中的

RecyclerView

时所涵盖的方式完全不同的组件。这意味着，被视为

Scrollviewer

的图像会向左提供拉伸（或翻转）效果，并且需要时间调整为以下图像。

相反，随着时间的推移，以前被欣赏或框定的图像开始变得模糊。水平方向上，运动变成所谓的“瀑布效应”。

更多动画可以参考

https://github.com/wasabeef/recyclerview-animators