ViewPager的使用方法(實現左右滑動切換頁面)

              

首先加入ViewPager

<android.support.v4.view.ViewPager

               android:id = "@+id/pager"

               android:layout_width = "wrap_content"

               android:layout_height = "wrap_content"

               android:layout_gravity = "center"/>

加載顯示的頁卡

將layout佈局裝換爲View對象

(1) LayoutInflater if = getLayoutInflater().from(this);

           if.inflater(resource,root);

(2) View.inflater(context,resource,root);

配置Adapter適配器

(1)  PagerAdapter 數據源: List<View>

(2)  FragmentPagerAdapter  數據源：List<Fragment>

(3) FragmentStatePagerAdapter  數據源：List<Fragment>

下面是代碼示例：

1.代碼組成：一個含有ViewPager的主佈局，四個view佈局展示四個頁面，一個主類，一個適配器

主佈局代碼如下：

<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">

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

        </android.support.v4.view.ViewPager>>
    
</LinearLayout>

2.四個展示頁面View，大家可以自行編寫，只要能區分就行，可以設置一些不同的文字，或者不同的顏色

3.主類代碼：

public class MainActivity extends Activity {

private ViewPager pager;
private List<View> pagerList;


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

pagerList = new ArrayList<View>();

/*
* 通過ViewPager添加布局
* */
View view1 = View.inflate(this, R.layout.view1, null);
View view2 = View.inflate(this, R.layout.view2, null);
View view3 = View.inflate(this, R.layout.view3, null);
View view4 = View.inflate(this, R.layout.view4, null);

pagerList.add(view1);
pagerList.add(view2);
pagerList.add(view3);
pagerList.add(view4);

/*
* 實例化pager控件
* */
pager = (ViewPager) findViewById(R.id.pager);

MyPagerAdapter adapter = new MyPagerAdapter(pagerList);

pager.setAdapter(adapter);

}


}

4.適配器代碼：

public class MyPagerAdapter extends PagerAdapter{
private List<View> pagerList;

//構造函數
public MyPagerAdapter(List<View> pagerList) {
// TODO Auto-generated method stub
this.pagerList = pagerList;
}


//返回頁面的數量
@Override
public int getCount() {
// TODO Auto-generated method stub
return pagerList.size();
}
     //View是否來自於對象
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
//實例化一個頁面
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(pagerList.get(position));
return pagerList.get(position);
}
//銷燬一個頁面
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(pagerList.get(position));
}
}

代碼下載地址：http://download.csdn.net/detail/weimo1234/8435457

當然我們還可以給每個頁面加上標題：我們可以在ViewPager中使用下面兩個控件

(1)android:support.v4.view.PagerTabStrip    它是ViewPager的子類需要寫在ViewPager裏面

(2)android.support.v4.view.PagerTitleStrip

通過根據自己的設計(1)top置頂，(2)置底bottom來設置佈局

主類需要添加如下代碼：

private List<String>  titleList;

/*
*  爲ViewPager設置標題
*  */
titleList = new ArrayList<String>();
titleList.add("紅色");
titleList.add("黃色");
titleList.add("綠色");
titleList.add("藍色");

MyPagerAdapter適配器中需要修改構造函數，添加標題方法：

//添加標題的方法
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}

代碼下載地址：http://download.csdn.net/detail/weimo1234/8435613

我們還可以給標題的底線設置自定義顏色樣式等:

//爲PagerTabStrip設置一些屬性
tab = (PagerTabStrip) findViewById(R.id.tab);
tab.setBackgroundColor(Color.GRAY);
tab.setTextColor(Color.WHITE);
tab.setDrawFullUnderline(false);
tab.setTabIndicatorColor(Color.LTGRAY);

我們還可以使用FragmentPagerAdapter設置監聽事件：所以我們需要添加四個Fragment類和一個FragmentPagerAdapter適配器：

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{


private List<Fragment> fragList;
private List<String> titleList;
public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragList,List<String> titleList) {
super(fm);
this.fragList = fragList;
this.titleList = titleList;
}


@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragList.get(arg0);
}


@Override
public int getCount() {
// TODO Auto-generated method stub
return fragList.size();
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}


}