textview和工具栏标题之间​​的Sharedelement转换

时间:2016-07-17 09:33:36

标签: android shared-element-transition android-collapsingtoolbarlayout

我有一个在回收站视图中有名称的项目和一个带有折叠工具栏的详细信息活动,该工具栏显示项目的名称。 我想在项目名称和工具栏/折叠工具栏的标题之间添加一个sharedelement转换。

Recyclerview with Items (subjects) color and name (subject name) Details activity

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" />

1 个答案:

答案 0 :(得分: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>

...和

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

......魔法发生了