如何使用 recyclerview 实现 Material Design 父子转换

Question

我正在尝试实现这一点

就像我之前的其他人一样。

---

到目前为止我发现了什么：

1. 如何实现 Material Design 规定的“父子到子”导航转换
2. Material Design 父子导航过渡 recyclerview 入口到细节片段
3. 如何创建列表项抬起并成为详细信息屏幕的父子转换
4. 自定义片段过渡父到子导航 setExitTransition 未显示
5. https://medium.com/@bherbst/fragment-transitions-with-shared-elements-7c7d71d31cbb
6. https://medium.com/@jim.zack.hu/android-inbox-material-transitions-for-recyclerview-71fc7326bcb5
7. https://github.com/saket/InboxRecyclerView
8. https://www.youtube.com/watch?v=EjTJIDKT72M

---

我到目前为止：

---

父片段

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    initViewModel();
    setupRecyclerView();
    initViewModelSubscriptions();
}

@Override
public void onClick(View v, CustomNavigator.Extras extras) {
    Bundle bundle = new Bundle();
    bundle.putString("transitionName", v.getTransitionName());

    NavController navController = NavHostFragment.findNavController(this);
    navController.navigate(R.id.action_devicemgmt_to_deviceMgmtEditFragment,
            bundle, // Bundle of args
            null, // NavOptions
            extras);
}

细节片段

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Transition t = TransitionInflater.from(getContext()).inflateTransition(R.transition.test).setDuration(1000);
    setSharedElementEnterTransition(t);
}

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    setupToolbar();
    setTransitionName();
}

private void setTransitionName() {
    binding.coord.setTransitionName(getArguments().getString("transitionName"));
}

R.transition.test

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="together"
    android:interpolator="@android:interpolator/fast_out_slow_in">
    <changeBounds/>
    <changeTransform/>
    <changeClipBounds/>
</transitionSet>

RecyclerView Adapter 的 ViewHolder

static class BindingHolder extends RecyclerView.ViewHolder {

    private final ItemDevicemgmtBinding binding;

    BindingHolder(ItemDevicemgmtBinding binding) {
        super(binding.getRoot());
        this.binding = binding;

        binding.getRoot().setOnClickListener(v -> {
            CustomNavigator.Extras extras = new CustomNavigator.Extras.Builder()
                    .addSharedElement(v, v.getTransitionName())
                    .build();

            callback.onClick(v, extras);
        });
    }

    void bind(String deviceSn) {
        binding.getRoot().setTransitionName(String.valueOf(getItemId()));
        binding.setVariable(BR.deviceSn, deviceSn);
        binding.executePendingBindings();
    }
}

父片段布局

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_mgmt_devices"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </androidx.recyclerview.widget.RecyclerView>

    <include
        android:id="@+id/layout_mgmt_no_devices"
        layout="@layout/layout_mgmt_no_devices"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/bottomappbar_height"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

细节片段布局

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coord"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="New Item" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/const_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/design_default_color_primary">

            <EditText
                android:id="@+id/editText2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="8dp"
                android:ems="10"
                android:inputType="textPersonName"
                android:text="Serial Number"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

RecyclerView 项目布局

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:clickable="true"
    android:focusable="true"
    android:paddingStart="@dimen/single_line_item_padding_start"
    android:paddingTop="@dimen/single_line_item_padding_top"
    android:paddingEnd="@dimen/single_line_item_padding_end"
    android:paddingBottom="@dimen/single_line_item_padding_bottom">

    <TextView
        android:id="@+id/text_devicemgmtitem_sn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="@{deviceSn}"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imagebutton_devicemgmtitem_more"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="89745897696978456790456456" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

如您所见， sharedEnterTransition 正在工作，但离开 Fragment 时的反向转换不是我所期望的。项目容器被转换而不是片段容器。Nick Butcher 在我在第 8 点链接的视频中谈论了这种转变，但不幸的是，他只解释了滚动功能的崩溃。当我正确理解他时...

这个想法..以前的内容还在..新屏幕被抬起并坐在它们上面

所以至少有两个单独的屏幕InboxRecyclerView是清楚的，而它的创建者是在相同的布局中进行的。

但是在尼克的例子中，他使用活动，而我使用的是片段，所以不确定用细节片段替换父片段是否有问题？！

那么有人可以帮助我吗？

Answer 1

您必须推迟结束转换，直到 RecyclerView 准备好。幸运的是，我们有两个方便的方法可供使用：推迟EnterTransition 和startPostponedEnterTransition。

这些允许我们延迟转换，直到我们知道我们的共享元素已布局并且可以被转换系统找到。在 Reply 中，我们可以推迟，直到确定 RecyclerView 适配器已填充并且列表项已使用以下代码段与转换名称绑定：

postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }