2011年12月29日木曜日

ViewPagerとFragmentStatePagerAdapterで別々のページを表示してみた

ViewPagerとは画面フリックにより画面遷移を実現するものです。


【準備】
ViewPagerを使用するためにはCompatibility packageが必要です。
導入はEclipseから簡単にできます。
















Android Toolsから「Add Compatibility Library...」を選択してください。
するとReferenced Librariesの中にandroid-support-v4.jarが追加されます。
以上で準備完了です。

【表示するページを作成する】
表示するページは、TextView、EditText、CheckBox
がそれぞれ一つあるページを作成します。
ページの実態はFragmentで実装して行きます。
それぞれはこちら。

【 TextView】











text_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#88FF88" >
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="TextFragment"
        android:textColor="@android:color/black"
    />
</LinearLayout>

TextFragment.java
package jp.beaa_gt.sample.viewpager;

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

public class TextFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.text_fragment, null);
		
		return view;
	}
}



【EditText】











edit_text_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#FF6666" >
    
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="30sp"
        android:text="EditTextFragment"
    />
</LinearLayout>

EditTextFragment.java
package jp.beaa_gt.sample.viewpager;

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

public class EditTextFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.edit_text_fragment, null);
		
		return view;
	}
}


【CheckBox】











checkbox_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#6666FF" >
    
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="CheckBox"
    />
</LinearLayout>

CheckBoxFragment.java
package jp.beaa_gt.sample.viewpager;

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

public class CheckBoxFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.checkbox_fragment, null);
		
		return view;
	}
}


【ViewPagerを使ってフリックで画面遷移できるようにする】
上で作成した3つの画面をスワイプで画面遷移できるようにします。
スワイプで遷移させるためにViewPagerとFragmentStatePagerAdapterを利用します。
ListViewを利用する感じでViewPagerのsetAdapter()に、
FragmentStatePagerAdapterのインスタンスをセットすればOKです。
以下実装。

fragment_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

ViewPagerSampleActivity.java
package jp.beaa_gt.sample.viewpager;

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

public class ViewPagerSampleActivity extends FragmentActivity {
	/** ページ数 */
	private static final int PAGE_SIZE = 3;
	/** テキストフラグメント */
	private static final int TEXT_FRAGMENT = 0;
	/** エディットテキストフラグメント */
	private static final int EDIT_TEXT_FRAGMENT = 1;
	/** チェックボックスフラグメント */
	private static final int CHECKBOX_FRAGMENT = 2;
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.fragment_pager);

		MyAdapter mAdapter = new MyAdapter(getSupportFragmentManager());

		ViewPager mPager = (ViewPager)findViewById(R.id.pager);
		mPager.setAdapter(mAdapter);
	}

	private static class MyAdapter extends FragmentStatePagerAdapter {
		public MyAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int position) {
			Fragment fragment = null;
			//ページごとにそれぞれの画面を作成
			switch(position){
				//テキスト画面
				case TEXT_FRAGMENT:
					fragment = new TextFragment();
					break;
					
				//エディットテキスト画面
				case EDIT_TEXT_FRAGMENT:
					fragment = new EditTextFragment();
					break;
				
				//チェックボックス画面
				case CHECKBOX_FRAGMENT:
					fragment = new CheckBoxFragment();
					break;
					
				default:
					fragment = null;
			}
			
			return fragment;
		}

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

これでスワイプさせるとこんな感じになります


























以上です。おつかれさまでした!