[Android] FragmentPagerAdapter で Fragment のページ切り替えを実装する

FragmentPageAdapter を使って、スワイプによるページ切り替えを実装してみます。動作は iOS でいう UIScrollView の pagingEnabled を有効にした時の挙動と同じです。

複数の Fragment をページ切り替えする

MyFragment.java

まずは、ページ切り替えされるフラグメントを書きます。Bundle のデータを受け取り、その色を利用して背景色に設定します。

package com.rakuishi.viewpagerfragment.sample;

import android.support.v4.app.Fragment;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment extends Fragment {

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_my, container, false);
    if (getArguments() != null && getArguments().containsKey("color")) {
      view.setBackgroundColor(Color.parseColor(getArguments().getString("color")));
    }
    return view;
  }
}

fragment_my.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.rakuishi.viewpagerfragment.sample.MyFragment">

</FrameLayout>

MyFragmentPagerAdapter

次に切り替えを担う [FragmentPagerAdapter](http://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html) を継承した MyFragmentPagerAdapter を作ります。FragmentPagerAdapter は、v4 support library の機能ですので、これを導入しておく必要があります。→ Android Studio で Support Library を導入する

getCount() と getItem() は必ず宣言する必要があり、その中でページ数とフラグメントを返します。

package com.rakuishi.viewpagerfragment.sample;

// FragmentPagerAdapter は、Support Library から使える
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

  public MyFragmentPagerAdapter(FragmentManager fragmentManager) {
    super(fragmentManager);
  }

  @Override
  public int getCount() {
    return 3;
  }

  @Override
  public Fragment getItem(int position) {

    String color = "#000000";
    switch (position) {
      case 0:
        color = "#FF0000";
        break;
      case 1:
        color = "#00FF00";
        break;
      case 2:
        color = "#0000FF";
        break;
    }
    Bundle bundle = new Bundle();
    bundle.putString("color", color);

    Fragment fragment = new MyFragment();
    fragment.setArguments(bundle);
    return fragment;
  }
}

MainActivity.java

アクティビティから ViewPager に先程の MyFragmentPagerAdapter をセットすることでページ切り替えが実装できます。先に v4 support library を使っているため、これに対応する FragmentActivity を継承するのがポイントです。

package com.rakuishi.viewpagerfragment.sample;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // getSupportFragmentManager は, FragmentActivity で使える
    FragmentManager fragmentManager = getSupportFragmentManager();
    MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(fragmentManager);
    ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    viewPager.setAdapter(pagerAdapter);
  }
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context="com.rakuishi.viewpagerfragment.sample.MainActivity">

  <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

</LinearLayout>

実行結果

左右にスワイプすることで複数のフラグメント間を行き来できます。

Pocket