質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Kotlin

Kotlinは、ジェットブレインズ社のアンドリー・ブレスラフ、ドミトリー・ジェメロフが開発した、 静的型付けのオブジェクト指向プログラミング言語です。

Q&A

0回答

1071閲覧

SharedElementで座標がずれてアニメーションする

CAIOS

総合スコア24

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Kotlin

Kotlinは、ジェットブレインズ社のアンドリー・ブレスラフ、ドミトリー・ジェメロフが開発した、 静的型付けのオブジェクト指向プログラミング言語です。

0グッド

0クリップ

投稿2020/09/28 09:39

編集2020/09/28 10:20

##問題
Navigationライブラリを用いてFragment to FragmentのSharedElementを実装しているのですが、一つ困ったことがあります。以下のGIFを見ていただけたらわかるのですが、Viewの位置がずれてアニメーションを開始してしまっています。

遷移元のFragment(青)はLinearLayoutの中にConstraintLayoutを配置し、その中にアニメーションさせるImageViewが入っています。遷移先(赤)のFragmentはConstraintLayoutの中にいきなりImageViewが入っています。察するに、SharedElementはアニメーションする対象のViewの親Viewに対しての相対位置を記録してアニメーションしているのでこのようなズレが生じてしまっているのではないかと推測しています。

実際、遷移元のFragmentのImageViewの親(この場合はConstraintLayout)を画面最大まで拡大するとこのズレは起きなくなります。どなたか解決策がありましたらご教授ください

問題の動作のGIF

##コード
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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問