ViewPagerの基本

# 検証環境
この記事の内容は、以下の環境で検証しました。
* Java:8
* Android studio 2.3
* CompileSdkVersion:25
* MinSdkVersion:19
* TargetSdkVersion:25
* BuildToolsVersion:25.0.2

# 概要
Fragmentをページとして、切り替えなどが行えるビュー。
ListView同様に、ViewPagerはAdapterと組み合わせて使用する必要がある。

このビューを継承したビューを使用すると、画面をスワイプしてページ切り替えやTabを切り替えたりも可能になる。
今回は基本的なViewPagerの使用方法を説明する。

![ViewPager_01 .png](https://qiita-image-store.s3.amazonaws.com/0/99960/5a75f1d9-244e-14e4-9c06-52468b247fd2.png)

#  作成するアプリ

スワイプすると自己紹介のページを切り替えられるアプリ

## 完成イメージ
![ViewPager_02 .png](https://qiita-image-store.s3.amazonaws.com/0/99960/39d87392-fa86-ee4f-e01f-f8313ff4681b.png)



# 作成したファイル一覧

|ファイル名|説明|
|:---------|:--------------|
|MainActivity.java<br>activity_main.xml|ViewPagerビューとボタンを保持する画面のレイアウトとそのActivity|
|NameFragment.java<br>fragment_name.xml|１ページ目のレイアウトとそのFragment（名前のページ）|
|AgeFragment.java<br>fragment_age.xml|２ページ目のレイアウトとそのFragment（年齢のページ）|
|FoodFragment.java<br>fragment_food.xml|３ページ目のレイアウトとそのFragment（好きな食べ物のページ）|
|UserInfoViewPagerAdapter.java|スワイプする際にFragmentを生成しているAdapter|

## 名前のページの詳細
名前のページのコードは以下のようになる。
※年齢のページと好きな食べ物のページは同じ構成になるため省略する

### レイアウトファイル
``` fragment_name.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="jp.co.casareal.sample.viewpagersample.fragment.NameFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1ページ目"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="名前はカサレアル　太郎です。"
        android:textSize="20sp" />

</LinearLayout>
```
### Javaのソースコード

``` NameFragment.java
package jp.co.casareal.sample.viewpagersample.fragment;


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

import jp.co.casareal.sample.viewpagersample.R;

/**
 * A simple {@link Fragment} subclass.
 */
public class NameFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_name, container, false);
    }

}
```

# Adapterの詳細

Adapterは２種類ある。「FragmentPagerAdapter」と「FragmentStatePagerAdapter」。
それぞれ動作が違うため、作成するアプリに合わせて選ぶ必要がある。
ページが切り替わった時に、「FragmentPagerAdapter」は表示したFragmentをメモリ上に保持する。
「FragmentStatePagerAdapter」はページが切り替わるときにFragmentを破棄する。
今回はページ数が少ないので、「FragmentPagerAdapter」を使用した。

``` UserInfoViewPagerAdapter.java
package jp.co.casareal.sample.viewpagersample.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import jp.co.casareal.sample.viewpagersample.fragment.AgeFragment;
import jp.co.casareal.sample.viewpagersample.fragment.FoodFragment;
import jp.co.casareal.sample.viewpagersample.fragment.NameFragment;

/**
 * Created by naoi on 2017/04/24.
 */

public class UserInfoViewPagerAdapter extends FragmentPagerAdapter {
    private static final int PAGE_NUM = 3;

    public UserInfoViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position){
            case 0:
                fragment = new NameFragment();
                break;
            case 1:
                fragment = new AgeFragment();
                break;
            default:
                fragment = new FoodFragment();
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return PAGE_NUM;
    }
}
```

# ViewPagerを保持するActivityの詳細

## レイアウトファイル

``` activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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="jp.co.casareal.sample.viewpagersample.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:onClick="onClickGoToTop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="先頭のページへ"/>
        <Button
            android:onClick="onClickNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="次のページへ"/>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
```

## Javaのソースコード

ここでのポイントは、ページをJavaのソースコードで変更したい場合、AdapterのsetCurrentItem()メソッドで変更できる事になる。

```　MainActivity.java
package jp.co.casareal.sample.viewpagersample;

import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import jp.co.casareal.sample.viewpagersample.adapter.UserInfoViewPagerAdapter;

public class MainActivity extends AppCompatActivity {

    private ViewPager pager;

    private FragmentPagerAdapter adapter;

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

        pager = (ViewPager) findViewById(R.id.pager);

        adapter = new UserInfoViewPagerAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);
        currentPage = 0;

    }

    public void onClickNext(View view) {
        currentPage ++;
        pager.setCurrentItem(currentPage);
    }

    public void onClickGoToTop(View view) {
        currentPage = 0;
        pager.setCurrentItem(currentPage);
    }
}

```

# 参考

https://developer.android.com/reference/android/support/v13/app/FragmentPagerAdapter.html

https://developer.android.com/training/implementing-navigation/lateral.html