Symfoware

Symfowareについての考察blog

Android 横にスライドしてFragmentを切り替える

Fragmentを変更するときスライドしてかっこよく切り替えたい。


Slide



Slideを使えば簡単に実現できました。

※APIレベル21以降で使用できます。
APIレベルの変更はこちら。
Android APIレベルの変更



※2017/9/13追記

アニメーションを使用してのスライドを試してみました。
android Fragmentを右から左にスライドアニメーションして入れ替える





レイアウトファイル



テストに使用するレイアウトファイルは以下の3つ。

・activity_main.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  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:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:orientation="vertical"
  9.     >
  10.     <LinearLayout
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content"
  13.         android:orientation="horizontal">
  14.         <Button
  15.             android:layout_width="wrap_content"
  16.             android:layout_height="wrap_content"
  17.             android:text="変更"
  18.             android:onClick="changeState" />
  19.     </LinearLayout>
  20.     <LinearLayout
  21.         android:id="@+id/content"
  22.         android:layout_width="match_parent"
  23.         android:layout_height="match_parent"
  24.         android:orientation="horizontal">
  25.     </LinearLayout>
  26. </LinearLayout>




・fragment_1.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="#ff0000"
  7.     >
  8.     <TextView
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="first"
  12.         android:textSize="36sp"
  13.         />
  14. </LinearLayout>




・fragment_2.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="#00FF00">
  7.     <TextView
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:text="second"
  11.         android:textSize="36sp" />
  12. </LinearLayout>





Fragment



レイアウトを読み込むFragmentを2つ。

・Fragment1.java


  1. import android.app.Fragment;
  2. import android.os.Bundle;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. public class Fragment1 extends Fragment {
  7.     public static Fragment1 newInstance(String name) {
  8.         Fragment1 fragment = new Fragment1();
  9.         return fragment;
  10.     }
  11.     @Override
  12.     public void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.     }
  15.     @Override
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  17.         super.onCreateView(inflater, container, savedInstanceState);
  18.         return inflater.inflate(R.layout.fragment_1, container, false);
  19.     }
  20. }





・Fragment2.java


  1. import android.app.Fragment;
  2. import android.os.Bundle;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. public class Fragment2 extends Fragment {
  7.     public static Fragment2 newInstance(String name) {
  8.         Fragment2 fragment = new Fragment2();
  9.         return fragment;
  10.     }
  11.     @Override
  12.     public void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.     }
  15.     @Override
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  17.         super.onCreateView(inflater, container, savedInstanceState);
  18.         return inflater.inflate(R.layout.fragment_2, container, false);
  19.     }
  20. }







MainActivity



Activityのソースはこうなりました。


  1. import android.app.Fragment;
  2. import android.app.FragmentManager;
  3. import android.app.FragmentTransaction;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.transition.Slide;
  7. import android.view.Gravity;
  8. import android.view.View;
  9. public class MainActivity extends AppCompatActivity {
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.activity_main);
  14.         FragmentManager fragmentManager = getFragmentManager();
  15.         FragmentTransaction transaction = fragmentManager.beginTransaction();
  16.         // 実際に使用するFragmentの作成
  17.         Fragment newFragment = new Fragment1();
  18.         Slide slide = new Slide();
  19.         slide.setSlideEdge(Gravity.LEFT);
  20.         newFragment.setExitTransition(slide);
  21.         // Fragmentを組み込む
  22.         transaction.add(R.id.content, newFragment);
  23.         // backstackに追加
  24.         transaction.addToBackStack(null);
  25.         // 上記の変更を反映する
  26.         transaction.commit();
  27.     }
  28.     public void changeState(View view) {
  29.         FragmentManager fragmentManager = getFragmentManager();
  30.         FragmentTransaction transaction = fragmentManager.beginTransaction();
  31.         // 実際に使用するFragmentの作成
  32.         Fragment newFragment = new Fragment2();
  33.         Slide slide = new Slide();
  34.         slide.setSlideEdge(Gravity.RIGHT);
  35.         newFragment.setEnterTransition(slide);
  36.         // Fragmentを組み込む
  37.         transaction.replace(R.id.content, newFragment);
  38.         // backstackに追加
  39.         transaction.addToBackStack(null);
  40.         // 上記の変更を反映する
  41.         transaction.commit();
  42.     }
  43. }




初期表示

775_01.png


ボタンを押すと、すっと画面が切り替わります。

775_02.png



元いたFragmentが左に消えて、新しいFragmentが右から表示されます。


上に移動させたい場合は、Gravity.TOPとGravity.BOTTOMに指定を変更します。


  1. import android.app.Fragment;
  2. import android.app.FragmentManager;
  3. import android.app.FragmentTransaction;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.transition.Slide;
  7. import android.view.Gravity;
  8. import android.view.View;
  9. public class MainActivity extends AppCompatActivity {
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.activity_main);
  14.         FragmentManager fragmentManager = getFragmentManager();
  15.         FragmentTransaction transaction = fragmentManager.beginTransaction();
  16.         // 実際に使用するFragmentの作成
  17.         Fragment newFragment = new Fragment1();
  18.         Slide slide = new Slide();
  19.         //slide.setSlideEdge(Gravity.LEFT);
  20.         slide.setSlideEdge(Gravity.TOP);
  21.         newFragment.setExitTransition(slide);
  22.         // Fragmentを組み込む
  23.         transaction.add(R.id.content, newFragment);
  24.         // backstackに追加
  25.         transaction.addToBackStack(null);
  26.         // 上記の変更を反映する
  27.         transaction.commit();
  28.     }
  29.     public void changeState(View view) {
  30.         FragmentManager fragmentManager = getFragmentManager();
  31.         FragmentTransaction transaction = fragmentManager.beginTransaction();
  32.         // 実際に使用するFragmentの作成
  33.         Fragment newFragment = new Fragment2();
  34.         Slide slide = new Slide();
  35.         //slide.setSlideEdge(Gravity.RIGHT);
  36.         slide.setSlideEdge(Gravity.BOTTOM);
  37.         newFragment.setEnterTransition(slide);
  38.         // Fragmentを組み込む
  39.         transaction.replace(R.id.content, newFragment);
  40.         // backstackに追加
  41.         transaction.addToBackStack(null);
  42.         // 上記の変更を反映する
  43.         transaction.commit();
  44.     }
  45. }





【参考URL】

Activity/Fragment Transitionsのつかいかた
カスタム アニメーションの定義
Window setEnterTransition


関連記事

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

  1. 2017/08/15(火) 22:17:22|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Android Studio JSONObjectをテストで使用すると「Method get in org.json.JSONObject not mocked」 | ホーム | Android APIレベルの変更>>

コメント

コメントの投稿


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

トラックバック

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