##問題
Navigationライブラリを用いてFragment to FragmentのSharedElementを実装しているのですが、一つ困ったことがあります。以下のGIFを見ていただけたらわかるのですが、Viewの位置がずれてアニメーションを開始してしまっています。
遷移元のFragment(青)はLinearLayoutの中にConstraintLayoutを配置し、その中にアニメーションさせるImageViewが入っています。遷移先(赤)のFragmentはConstraintLayoutの中にいきなりImageViewが入っています。察するに、SharedElementはアニメーションする対象のViewの親Viewに対しての相対位置を記録してアニメーションしているのでこのようなズレが生じてしまっているのではないかと推測しています。
実際、遷移元のFragmentのImageViewの親(この場合はConstraintLayout)を画面最大まで拡大するとこのズレは起きなくなります。どなたか解決策がありましたらご教授ください
##コード
FirstFragment.xml (遷移元Fragment)
XML
1<?xml version="1.0" encoding="utf-8"?> 2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 xmlns:tools="http://schemas.android.com/tools" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 android:background="@android:color/holo_blue_light" 8 android:orientation="vertical" 9 android:gravity="bottom" 10 tools:context=".FirstFragment"> 11 12 <androidx.constraintlayout.widget.ConstraintLayout 13 android:layout_width="match_parent" 14 android:layout_height="320dp"> 15 16 <ImageView 17 android:id="@+id/FF_imageView" 18 android:layout_width="80dp" 19 android:layout_height="160dp" 20 android:layout_marginStart="16dp" 21 android:layout_marginTop="16dp" 22 android:scaleType="fitCenter" 23 android:transitionName="image" 24 app:layout_constraintStart_toStartOf="parent" 25 app:layout_constraintTop_toTopOf="parent" 26 app:srcCompat="@drawable/xperia1" /> 27 28 <Button 29 android:id="@+id/FF_button" 30 android:layout_width="wrap_content" 31 android:layout_height="wrap_content" 32 android:layout_marginBottom="32dp" 33 android:text="Go" 34 app:layout_constraintBottom_toBottomOf="parent" 35 app:layout_constraintEnd_toEndOf="parent" 36 app:layout_constraintStart_toStartOf="parent" /> 37 </androidx.constraintlayout.widget.ConstraintLayout> 38</LinearLayout>
SecondFragment.xml (遷移先Fragment)
XML
1<?xml version="1.0" encoding="utf-8"?> 2<androidx.constraintlayout.widget.ConstraintLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 xmlns:app="http://schemas.android.com/apk/res-auto" 5 xmlns:tools="http://schemas.android.com/tools" 6 android:background="@android:color/holo_red_light" 7 android:layout_width="match_parent" 8 android:layout_height="match_parent" 9 tools:context=".SecondFragment"> 10 11 <ImageView 12 android:id="@+id/FS_imageView" 13 android:layout_width="80dp" 14 android:layout_height="160dp" 15 android:layout_marginEnd="16dp" 16 android:layout_marginBottom="16dp" 17 android:scaleType="fitCenter" 18 android:transitionName="image2" 19 app:layout_constraintBottom_toBottomOf="parent" 20 app:layout_constraintEnd_toEndOf="parent" 21 app:srcCompat="@drawable/xperia1" /> 22 23 <Button 24 android:id="@+id/FS_button" 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" 27 android:layout_marginBottom="32dp" 28 android:text="Go" 29 app:layout_constraintBottom_toBottomOf="parent" 30 app:layout_constraintEnd_toEndOf="parent" 31 app:layout_constraintStart_toStartOf="parent" /> 32</androidx.constraintlayout.widget.ConstraintLayout>
FirstFragment.kt
Kotlin
1class FirstFragment : Fragment(R.layout.fragment_first){ 2 override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 3 FF_button.setOnClickListener { 4 val extra = FragmentNavigatorExtras(FF_imageView to "image2") 5 findNavController().navigate(R.id.action_firstFragment_to_secondFragment, null, null, extra) 6 } 7 } 8}
SecondFragment.kt
Kotlin
1class SecondFragment : Fragment(R.layout.fragment_second){ 2 3 override fun onCreate(savedInstanceState: Bundle?) { 4 super.onCreate(savedInstanceState) 5 sharedElementEnterTransition = TransitionInflater.from(requireContext()).inflateTransition(R.transition.music_shared_element_transition) 6 sharedElementReturnTransition = TransitionInflater.from(requireContext()).inflateTransition(R.transition.music_shared_element_transition) 7 } 8 9 override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 10 FS_button.setOnClickListener { 11 findNavController().popBackStack() 12 } 13 } 14}
MainActivity.xml (navHost)
XML
1<?xml version="1.0" encoding="utf-8"?> 2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 xmlns:tools="http://schemas.android.com/tools" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 tools:context=".MainActivity"> 8 9 <androidx.fragment.app.FragmentContainerView 10 android:id="@+id/fragment" 11 android:name="androidx.navigation.fragment.NavHostFragment" 12 android:layout_width="match_parent" 13 android:layout_height="match_parent" 14 app:defaultNavHost="true" 15 app:layout_constraintBottom_toBottomOf="parent" 16 app:layout_constraintEnd_toEndOf="parent" 17 app:layout_constraintStart_toStartOf="parent" 18 app:layout_constraintTop_toTopOf="parent" 19 app:navGraph="@navigation/first_to_second_navigation" /> 20 21</androidx.constraintlayout.widget.ConstraintLayout>
first_to_second_navigation.xml (Navigation)
XML
1<?xml version="1.0" encoding="utf-8"?> 2<navigation xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 xmlns:tools="http://schemas.android.com/tools" 5 android:id="@+id/navigation" 6 app:startDestination="@id/firstFragment"> 7 8 <fragment 9 android:id="@+id/firstFragment" 10 android:name="caios.android.sharedelementtest.FirstFragment" 11 android:label="FirstFragment" 12 tools:layout="@layout/fragment_first" > 13 <action 14 android:id="@+id/action_firstFragment_to_secondFragment" 15 app:destination="@id/secondFragment" /> 16 </fragment> 17 <fragment 18 android:id="@+id/secondFragment" 19 android:name="caios.android.sharedelementtest.SecondFragment" 20 android:label="SecondFragment" 21 tools:layout="@layout/fragment_second" /> 22</navigation>
music_shared_element_transition.xml
XML
1<?xml version="1.0" encoding="utf-8"?> 2<transitionSet xmlns:android="http://schemas.android.com/apk/res/android" 3 android:duration="1000"> 4 <changeBounds /> 5 <fade android:duration="0" /> 6 7 <arcMotion 8 android:minimumHorizontalAngle="50" 9 android:minimumVerticalAngle="50" /> 10</transitionSet>
build.gradle (app)
gradle
1dependencies { 2 implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version" 3 implementation 'androidx.core:core-ktx:1.3.1' 4 implementation 'androidx.appcompat:appcompat:1.2.0' 5 6 implementation 'com.google.android.material:material:1.2.1' 7 8 implementation 'androidx.constraintlayout:constraintlayout:2.0.1' 9 implementation 'androidx.navigation:navigation-fragment-ktx:2.3.0' 10 implementation 'androidx.navigation:navigation-ui-ktx:2.3.0' 11 12 //中略 13}
あなたの回答
tips
プレビュー