[Android] 頁面切換的方式-ViewPager

ViewPager可讓使用者透過滑動方式切換當前畫面，通常搭配Fragment一起使用。
（1）ViewPager 繼承了ViewGroup，是一個容器，裡面可新增要顯示的畫面。
（2）ViewPager 需要PagerAdapter來提供資料。

Step1 在activity_main.xml中加入ViewPager標籤

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

view raw activity_main.xml hosted with ❤ by GitHub

Step2 新增要切換的layout

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	android:gravity="center">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="01"/>
	</LinearLayout>

view raw layout1.xml hosted with ❤ by GitHub

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	android:gravity="center">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="02"/>
	</LinearLayout>

view raw layout2.xml hosted with ❤ by GitHub

Step3 將layout加至ArrayList裡

	ViewPager pager;
	ArrayList<View> pagerList;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	pager = (ViewPager) findViewById(R.id.pager);
	LayoutInflater li = getLayoutInflater().from(this);
	View v1 = li.inflate(R.layout.layout1,null);
	View v2 = li.inflate(R.layout.layout2,null);
	pagerList = new ArrayList<View>();
	pagerList.add(v1);
	pagerList.add(v2);
	}

view raw MainActivity.java hosted with ❤ by GitHub

Step4 宣告繼承PagerAdapter的類別

	public class myViewPagerAdapter extends PagerAdapter{
	private ArrayList<View> mListViews;
	public myViewPagerAdapter(ArrayList<View> mListViews){
	this.mListViews = mListViews;
	}
	@Override
	public void destroyItem(ViewGroup container, int position, Object object){
	container.removeView((View) object);
	}
	@Override
	public Object instantiateItem(ViewGroup container, int position){
	View view = mListViews.get(position);
	container.addView(view);
	return view;
	}
	@Override
	public int getCount() {
	return mListViews.size();
	}
	@Override
	public boolean isViewFromObject(View view, Object object) {
	return view == object;
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

Srep5 在onCreate中，將Pager指定到剛剛自訂的pager class

	pager.setAdapter(new myViewPagerAdapter(pagerList));
	pager.setCurrentItem(0);

view raw MainActivity.java hosted with ❤ by GitHub

完整MainActivity.java程式碼

	public class MainActivity extends AppCompatActivity {
	ViewPager pager;
	ArrayList<View> pagerList;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	pager = (ViewPager) findViewById(R.id.pager);
	LayoutInflater li = getLayoutInflater().from(this);
	View v1 = li.inflate(R.layout.layout1,null);
	View v2 = li.inflate(R.layout.layout2,null);
	pagerList = new ArrayList<View>();
	pagerList.add(v1);
	pagerList.add(v2);
	pager.setAdapter(new myViewPagerAdapter(pagerList));
	pager.setCurrentItem(0);
	}
	public class myViewPagerAdapter extends PagerAdapter{
	private ArrayList<View> mListViews;
	public myViewPagerAdapter(ArrayList<View> mListViews){
	this.mListViews = mListViews;
	}
	@Override
	public void destroyItem(ViewGroup container, int position, Object object){
	container.removeView((View) object);
	}
	@Override
	public Object instantiateItem(ViewGroup container, int position){
	View view = mListViews.get(position);
	container.addView(view);
	return view;
	}
	@Override
	public int getCount() {
	return mListViews.size();
	}
	@Override
	public boolean isViewFromObject(View view, Object object) {
	return view == object;
	}
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub