本文内容
- 環境
- 項目結構
- 示範 1：PagerTitleStrip
- 示範 2：PagerTabStrip
- 示範 3：ViewPager 和動态 Fragment
下載下傳 Demo
- Windows 2008 R2 64 位
- Eclipse ADT V22.6.2，Android 4.4.2（API 19）
- SAMSUNG GT-8618，Android OS 4.1.2
圖 1 項目結構
圖 2 項目主界面
示範 1 和示範 2 都是利用已有的靜态的 xml 頁面布局，作為 Pager 的 tab 頁。通過 LayoutInflater 将 xml 布局檔案，變成 View，供 ViewPager 使用。
圖 3 示範 PagerTitleStrip 和點選“微網誌”按鈕
package com.example.viewpagerdemo2.ui; import java.util.ArrayList; import java.util.List; import com.example.viewpagerdemo2.R; import com.example.viewpagerdemo2.adapter.NewPagerAdapter; import android.os.Bundle; import android.app.Activity; import android.support.v4.view.PagerTitleStrip; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; public class PagerTitleStripDemo extends Activity { private View view1, view2, view3; private ViewPager viewPager; private NewPagerAdapter pagerAdapter; private PagerTitleStrip myPagerTitleStrip; private List<View> viewList; private List<String> titleList; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_title); initClass(); initData(); initControl(); initViewPager(); } private void initClass() { viewList = new ArrayList<View>(); titleList = new ArrayList<String>(); } private void initData() { for (int i = 1; i <= 3; i++) { titleList.add(String.format("示範1頁%s", i)); } LayoutInflater lf = LayoutInflater.from(this); view1 = lf.inflate(R.layout.layout1, null); view2 = lf.inflate(R.layout.layout2, null); view3 = lf.inflate(R.layout.layout3, null); viewList.add(view1); viewList.add(view2); viewList.add(view3); } private void initControl() { viewPager = (ViewPager) findViewById(R.id.myViewPager1); myPagerTitleStrip = (PagerTitleStrip) findViewById(R.id.myPagerTitleStrip); pagerAdapter = new NewPagerAdapter(this, titleList, viewList); } private void initViewPager() { myPagerTitleStrip.setBackgroundColor(getResources().getColor( R.color.green)); myPagerTitleStrip.setTextSpacing(50); viewPager.setAdapter(pagerAdapter); } } 圖 4 示範 PagerTabStrip
package com.example.viewpagerdemo2.ui; import java.util.ArrayList; import java.util.List; import com.example.viewpagerdemo2.R; import com.example.viewpagerdemo2.adapter.NewPagerAdapter; import android.os.Bundle; import android.app.Activity; import android.support.v4.view.PagerTabStrip; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; public class PagerTabStripDemo extends Activity { private View view1, view2, view3; private ViewPager viewPager2; private NewPagerAdapter pagerAdapter; private PagerTabStrip myPagerTabStrip; private List<View> viewList; private List<String> titleList; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab); initClass(); initData(); initControl(); initViewPager(); } private void initClass() { viewList = new ArrayList<View>(); titleList = new ArrayList<String>(); } private void initData() { for (int i = 1; i <= 3; i++) { titleList.add(String.format("示範2頁%s", i)); } LayoutInflater lf = LayoutInflater.from(this); view1 = lf.inflate(R.layout.layout1, null); view2 = lf.inflate(R.layout.layout2, null); view3 = lf.inflate(R.layout.layout3, null); viewList.add(view1); viewList.add(view2); viewList.add(view3); } private void initControl() { viewPager2 = (ViewPager) findViewById(R.id.myViewPager2); myPagerTabStrip = (PagerTabStrip) findViewById(R.id.myPagerTabStrip); pagerAdapter = new NewPagerAdapter(this, titleList, viewList); } private void initViewPager() { myPagerTabStrip.setTabIndicatorColor(getResources().getColor( R.color.red)); myPagerTabStrip.setDrawFullUnderline(false); myPagerTabStrip.setBackgroundColor(getResources().getColor( R.color.green)); myPagerTabStrip.setTextSpacing(50); viewPager2.setAdapter(pagerAdapter); } } 官方文檔，對 PagerTabStrip 和 PagerTitleStrip 描述是，“PagerTabStrip is an interactive indicator of the current, next, and previous pages of a.” 而“PagerTitleStrip is a non-interactive indicator of the current, next, and previous pages of aViewPager
ViewPager
. ”
簡單來說，PagerTabStrip 和 PagerTitleStrip 都能實作滑動切換 Tab 頁，但是 PagerTabStrip 還通過點選 Tab 的标簽實作 Tab 頁的切換；而 PagerTitleStrip 則不能。
下面是示範 1 和示範 2 共用的 PagerAdapter。代碼如下所示：
package com.example.viewpagerdemo2.adapter; import java.util.List; import com.example.viewpagerdemo2.R; import com.example.viewpagerdemo2.ui.WeiBoActivity; import android.app.Activity; import android.content.Intent; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; public class NewPagerAdapter extends PagerAdapter { private Activity activity; private List<String> listTitle; private List<View> listView; private Button button; private Intent intent; public NewPagerAdapter(Activity activity, List<String> title, List<View> view) { this.activity = activity; this.listTitle = title; this.listView = view; } @Override public int getCount() { return listTitle.size(); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(listView.get(position)); } @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } @Override public CharSequence getPageTitle(int position) { return listTitle.get(position); } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(listView.get(position)); button = (Button) container.findViewById(R.id.button1); button.setOnClickListener(new OnClickListener() { public void onClick(View v) { intent = new Intent(activity, WeiBoActivity.class); activity.startActivity(intent); } }); return listView.get(position); } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } } ViewPager 控件都要配合一個 ***Adapter，這個 Adapter 或是 Android 提供，或是你建立 Adapter，并繼承系統提供的 Adapter，然後調用 ViewPager.setAdapter 方法。
new 一個 Adapter 時，大都是将 Activity 和 adapter 構造自己需要的資料傳遞給他。
你會發現一個規律：隻要有資料，控件就可以自己構造自己。通過 override 相應的方法，控件就知道自己的某個部分，應該利用你提供資料中的那個（些）資料。
動态 Fragment 在實際情況中，較為常用。
圖 5 ViewPager 和動态 Fragment
package com.example.viewpagerdemo2.ui; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import com.example.viewpagerdemo2.R; import com.example.viewpagerdemo2.adapter.NewFragmentStatePagerAdapter; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.PagerTabStrip; import android.support.v4.view.ViewPager; public class NewFragmentActivityDemo extends FragmentActivity { private ViewPager mPager; private NewFragmentStatePagerAdapter mAdapter; private PagerTabStrip myPagerTabStrip; private List<Map<String, String>> list; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab); initClass(); initData(); initControl(); initViewPager(); } private void initClass() { list = new ArrayList<Map<String, String>>(); } private void initData() { for (int i = 1; i <= 3; i++) { Map<String, String> cat = new HashMap<String, String>(); cat.put("name", "示範3頁" + i); cat.put("content", String.format("%s", i)); list.add(cat); } } private void initControl() { mPager = (ViewPager) findViewById(R.id.myViewPager2); myPagerTabStrip = (PagerTabStrip) findViewById(R.id.myPagerTabStrip); mAdapter = new NewFragmentStatePagerAdapter( getSupportFragmentManager(), list); } private void initViewPager() { myPagerTabStrip.setTabIndicatorColor(getResources().getColor( R.color.red)); myPagerTabStrip.setDrawFullUnderline(false); myPagerTabStrip.setBackgroundColor(getResources().getColor( R.color.green)); myPagerTabStrip.setTextSpacing(50); mPager.setAdapter(mAdapter); } } 自定義 Adapter，如下所示：
package com.example.viewpagerdemo2.adapter; import java.util.List; import java.util.Map; import com.example.viewpagerdemo2.view.NewFragment; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import android.view.ViewGroup; public class NewFragmentStatePagerAdapter extends FragmentStatePagerAdapter { List<Map<String, String>> list; public NewFragmentStatePagerAdapter(FragmentManager fm, List<Map<String, String>> list) { super(fm); this.list = list; } @Override public int getCount() { return list.size(); } @Override public CharSequence getPageTitle(int position) { return list.get(position).get("name"); } // 初始化每個頁卡選項 @Override public Object instantiateItem(ViewGroup arg0, int position) { NewFragment ff = (NewFragment) super.instantiateItem(arg0, position); ff.setThings(list.get(position), position); return ff; } @Override public void destroyItem(ViewGroup container, int position, Object object) { System.out.println("position Destory" + position); super.destroyItem(container, position, object); } @Override public Fragment getItem(int arg0) { // TODO Auto-generated method stub return new NewFragment(); } } FragmentStatePagerAdapter 和 FragmentPagerAdapter 的差別是，FragmentStatePagerAdapter 在目前隻會存在前一個 Fragment，其他 Fragment 會銷毀，适合加載多資料；而FragmentPagerAdapter 是所有 Fragment 都存在，是以不太适合加載大量的資料 如圖檔什麼的，很容易記憶體溢出。
每個 ViewPager 裡的 Fragment，如下所示：
package com.example.viewpagerdemo2.view; import java.util.Map; import com.example.viewpagerdemo2.R; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class NewFragment extends Fragment { private Map<String, String> ee; private int position; public void setThings(Map<String, String> ee, int position) { this.ee = ee; this.position = position; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { System.out.println("onCreateView = "); View v = inflater.inflate(R.layout.fragment_pager, container, false); ((TextView) v.findViewById(R.id.myTitle)).setText(ee.get("name") + " = " + ee.get("content")); return v; } @Override public void onActivityCreated(Bundle savedInstanceState) { System.out.println("onActivityCreated = "); super.onActivityCreated(savedInstanceState); } @Override public void onDestroyView() { System.out.println("onDestroyView = " + position); super.onDestroyView(); } @Override public void onDestroy() { System.out.println("onDestroy = " + position); super.onDestroy(); } }