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

时间:2018-11-09 01:44:28

标签: android android-recyclerview material-design shared-element-transition

我正在尝试实现这一点

enter image description here

像我之前的其他人一样。


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

  1. How to implement the "parent-to-child" navigational transition as prescribed by Material Design
  2. Material Design parent-child navigational transition recyclerview entry to detail fragment
  3. How to create Parent-child transition in which list item lifts out and become details screen
  4. Custom fragment transition parent-to-child navigation setExitTransition not showing
  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

我到目前为止:

enter image description here


父片段

@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的创建者则以相同的布局进行操作。

但是在Nick的示例中,他使用的是Activity,而我使用的是Fragments,所以不确定在这里是否用Detail Fragment替换Parent Fragment是问题?!

那么有人可以帮助我吗?

0 个答案:

没有答案