TextView和工具栏标题之间的共享元素转换

Question

我有一个在recycler view中有名称的项目，还有一个带有可折叠工具栏的详细活动，它显示项的名称。我想在项的名称和工具栏/可折叠工具栏的标题之间添加共享元素转换。

请参见以下图片： 以下是item_subject.xml的代码：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <FrameLayout
        android:id="@+id/frameLayoutSubjectColor"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:minWidth="20dp" />

    <TextView
        android:id="@+id/textViewSubjectName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

activity_subject_detail.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:id="@+id/appBarLayout"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:id="@+id/subject_detail_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textViewSubjectShort"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textViewSubjectRoom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="32dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textViewTeacher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="@string/teacher"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/textViewTeacherName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textViewTeacherPhone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textViewTeacherEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|start"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_menu_edit"
    app:layout_anchor="@+id/subject_detail_container"
    app:layout_anchorGravity="top|end" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabPhone"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|start"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_menu_call"
    app:fabSize="normal" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email"
    app:fabSize="normal" />

- Johann Feser

---

你成功了吗？ - Jocky Doe

很遗憾，我已经有一段时间没有在这个项目上工作了（它只是我的一个爱好），但它仍然让我感到烦恼。 - Johann Feser

我可能已经找到了一些东西，如果它有效，我会让你知道的。 - Jocky Doe

Answer 1

嗨，我找到了一个解决方案，我用Kotlin发布它，但我相信这没什么大不了的，然而它是共享的片段转换，但思路是相同的。

// from the start fragment init your end fragment whatever it is
val endFragment = EndFragment.newInstance(/*...*/)
val sharedView = view.findViewById<TextView>(R.id.mySharedTV)
val sharedTransitionName = "myTransition"

sharedView.transitionName = sharedTransitionName

// define your transition
val transition = TransitionInflater                
                     .from(context)
                     .inflateTransition(android.R.transition.move)
// define it as shared one
endFragment.sharedElementEnterTransition = transition

// pass the transition name to the endFragment
val bundle = endFragment.arguments ?: Bundle()
bundle.putString("sharedTransitionKey", sharedTransitionName)
endFragment.arguments = bundle

activity!!.supportFragmentManager
          .beginTransaction()
          .replace(R.id.myFragmentContainer, endFragment)          
          .addSharedElement(sharedView, sharedTransitionName)
          .addToBackStack(null) // or add it
          .commit()

在另一方面，

override fun onCreateView(inflater: LayoutInflater, 
       container: ViewGroup?, savedInstanceState: Bundle?): View? {

    val inflatedView = inflater.inflate(R.layout.myEndFragment, container, false)
    /* here is the spot... */
    return inflatedView
}

你有以下选项：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleTextColor="@android:color/white"
        android:background="@color/colorPrimary"        
        app:title="My Title" />

在某处定义了这个方法

fun getToolbarTitleAsTextView(toolbar: Toolbar) : TextView? {
    (0..toolbar.childCount).forEach {
        val view = toolbar.getChildAt(it)
        if (view is TextView)
            return view
    }

    return null
}

...并使用它

val toolbar = inflatedView.findViewById<Toolbar>(R.id.toolbar)
val toolbarTitle = getToolbarTitleAsTextView(toolbar)

或者

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleTextColor="@android:color/white"
        android:background="@color/colorPrimary">

        <TextView
            android:id="@+id/toolbarTitleTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:text="My Title"/>
</android.support.v7.widget.Toolbar>

"...and"。

val toolbarTitle =  inflatedView.findViewById<Toolbar>(R.id.toolbarTitleTV)

最后，当你在两种情况下都拥有toolbarTitle时

// read the passed transitionName 
val bundle = endFragment.arguments ?: Bundle()
val sharedTransitionName = bundle.getString("sharedTransitionKey")
toolbarTitle.transitionName = sharedTransitionName

...然后魔法就发生了。

- Jocky Doe