如何使用recyclerview实现Material Design父子过渡
Posted
技术标签:
【中文标题】如何使用recyclerview实现Material Design父子过渡【英文标题】：How to implement Material Design parent-child transition with recyclerview 【发布时间】：2019-04-12 14:34:10 【问题描述】：我正在尝试实现这个
像我之前的其他人一样。
到目前为止我发现了什么：
-
How to implement the "parent-to-child" navigational transition as prescribed by Material Design
Material Design parent-child navigational transition recyclerview entry to detail fragment
How to create Parent-child transition in which list item lifts out and become details screen
Custom fragment transition parent-to-child navigation setExitTransition not showing
https://medium.com/@bherbst/fragment-transitions-with-shared-elements-7c7d71d31cbb
https://medium.com/@jim.zack.hu/android-inbox-material-transitions-for-recyclerview-71fc7326bcb5
https://github.com/saket/InboxRecyclerView
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_
android:layout_>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_mgmt_devices"
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_>
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_
android:layout_>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
app:title="New Item" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_
android:layout_
android:fillViewport="true"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/const_container"
android:layout_
android:layout_
android:background="@color/design_default_color_primary">
<EditText
android:id="@+id/editText2"
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
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 的创建者正在以相同的布局进行操作。
但在尼克的示例中，他使用了活动，而我使用的是片段，所以不确定用细节片段替换父片段是否是一个问题？！
那么有人可以帮助我吗？
【问题讨论】：
【参考方案1】：您必须推迟结束转换，直到 RecyclerView 准备好。幸运的是，我们有两种方便的方法可供使用： 推迟EnterTransition 和 startPostponedEnterTransition。
这些允许我们延迟转换，直到我们知道我们的共享元素已布局并且可以被转换系统找到。作为回复，我们可以推迟，直到我们确定 RecyclerView 适配器已被填充并且我们的列表项已使用以下 sn-p 与转换名称绑定：
postponeEnterTransition()
view.doOnPreDraw startPostponedEnterTransition()
【讨论】：
以上是关于如何使用recyclerview实现Material Design父子过渡的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 TabLayout 在 Fragment 中使用 CardView 行实现 RecyclerView