Symfoware

Symfowareについての考察blog

android Fragmentを右から左にスライドアニメーションして入れ替える

Slideを使用してFragmentの入れ替えを行ってみました。
Android 横にスライドしてFragmentを切り替える

APIレベル21以前にも対応したかったので、独自にアニメーションを定義して
自前でスライドしてみます。


android.R.anim.slide_in_left



スライドのサンプルとして、android.R.anim.slide_in_left、android.R.anim.slide_out_rightが
用意されています。

FragmentTransaction#setCustomAnimationsを使用して、
Fragmentを入れ替える部分はこんなコードになりました。


  1.         Fragment fragment = Fragment1.newInstance(mCount);
  2.         FragmentManager fragmentManager = getSupportFragmentManager();
  3.         final FragmentTransaction transaction = fragmentManager.beginTransaction();
  4.         transaction.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
  5.         // Fragmentを組み込む
  6.         transaction.replace(R.id.content, fragment);
  7.         // 初回表示以外の場合はスタックに追加
  8.         if (mCount != 1) {
  9.             transaction.addToBackStack(null);
  10.         }
  11.         // 上記の変更を反映する
  12.         transaction.commit();
  13.         mCount++;





これで右から左に入れ替えることはできました。








anim



アニメーションはxmlファイルで定義するようです。

resを右クリックで[New] - [Android resource file]を選択

798_01.png


「Resource type」に「Animation」を選択。
「slide_in_right」というファイルを作成しました。

798_02.png


ファイルの内容は、android.R.anim.slide_in_leftを参考に以下のとおり。


・slide_in_right.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate android:fromXDelta="100%p" android:toXDelta="0"
  4.         android:duration="@android:integer/config_mediumAnimTime"/>
  5.     <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
  6.         android:duration="@android:integer/config_mediumAnimTime" />
  7. </set>




同様に、outするときの動作も指定します。
slide_out_leftを作成。

・slide_out_left.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate android:fromXDelta="0" android:toXDelta="-100%p"
  4.         android:duration="@android:integer/config_mediumAnimTime"/>
  5.     <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
  6.         android:duration="@android:integer/config_mediumAnimTime" />
  7. </set>




ソースを作成したリソースを作成するように変更します。


  1.         Fragment fragment = Fragment1.newInstance(mCount);
  2.         FragmentManager fragmentManager = getSupportFragmentManager();
  3.         final FragmentTransaction transaction = fragmentManager.beginTransaction();
  4.         transaction.setCustomAnimations(R.anim.slide_in_right, R.anim.slide_out_left);
  5.         // Fragmentを組み込む
  6.         transaction.replace(R.id.content, fragment);
  7.         // 初回表示以外の場合はスタックに追加
  8.         if (mCount != 1) {
  9.             transaction.addToBackStack(null);
  10.         }
  11.         // 上記の変更を反映する
  12.         transaction.commit();
  13.         mCount++;




これで右から左にスライドしてくれました。







popBackStack対応



上の動画でもわかるように、戻るボタンを押した時はアニメーションしてくれません。
戻る時のアニメーションは、
FragmentTransaction#setCustomAnimationsの第三、第四引数で指定します。

戻る時のアニメーションを指定するファイルを作成します。
左から入って、右に抜けていきます。

・slide_in_left


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate android:fromXDelta="-100%p" android:toXDelta="0"
  4.         android:duration="@android:integer/config_mediumAnimTime"/>
  5.     <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
  6.         android:duration="@android:integer/config_mediumAnimTime" />
  7. </set>




・slide_out_right


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate android:fromXDelta="0" android:toXDelta="100%p"
  4.         android:duration="@android:integer/config_mediumAnimTime"/>
  5.     <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
  6.         android:duration="@android:integer/config_mediumAnimTime" />
  7. </set>




プログラムを修正。


  1.         Fragment fragment = Fragment1.newInstance(mCount);
  2.         FragmentManager fragmentManager = getSupportFragmentManager();
  3.         final FragmentTransaction transaction = fragmentManager.beginTransaction();
  4.         transaction.setCustomAnimations(
  5.                 R.anim.slide_in_right, R.anim.slide_out_left, // 追加した時のアニメーション
  6.                 R.anim.slide_in_left, R.anim.slide_out_right // 戻る(popBackStack)した時のアニメーション
  7.         );
  8.         // Fragmentを組み込む
  9.         transaction.replace(R.id.content, fragment);
  10.         // 初回表示以外の場合はスタックに追加
  11.         if (mCount != 1) {
  12.             transaction.addToBackStack(null);
  13.         }
  14.         // 上記の変更を反映する
  15.         transaction.commit();
  16.         mCount++;




狙い通りの動作になりました。




【参考URL】

Fragment入れ替え時のアニメーション
Support package の FragmentTransaction 時のアニメーションをセットする
Android:Fragmentの画面遷移時にアニメーション
LollipopでFragmentのスライドインアニメーション時の問題
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/09/13(水) 23:25:25|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<PHPでexcel(xlsx)ファイルをPhpSpreadsheet + CodeIgniter 3で出力 | ホーム | android FragmentTransaction.addToBackStackでスタックした情報をクリアする>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/2058-863fa4eb
この記事にトラックバックする(FC2ブログユーザー)