效果图
带标题的效果图
要点：
- MainActivity的布局文件中，引入ViewPager组件标签
- 自定义4个页面布局文件
- 定义一个myPagerAdapter适配器，继承PagerAdapter
- MainActivity中，将定义的4个布局文件转换为view，并加入到List。再把list传给myPagerAdapter适配器
- ViewPager绑定适配器
详细源码
1、activity_main.xml，引入ViewPager标签，安卓3.0以下，需要使用v4兼容包
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/vpager">
</android.support.v4.view.ViewPager>
</RelativeLayout>
2、2、4个页卡的布局文件，自己定义咯。这里只贴出来一个page_one.xml，其他3个一样
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff00"
android:gravity="center"
android:text="第一页"/>
</LinearLayout>
3、MyPagerAdapter适配器，继承自PagerAdapter。需要重写getCount，isViewFromObject，destroyItem，instantiateItem这几个方法。具体方法说明见注释。一般照着给出的写即可。
public class MyPagerAdapter extends PagerAdapter {
private ArrayList<View> viewList;
public MyPagerAdapter() {
}
public MyPagerAdapter(ArrayList<View> arrayList) {
this.viewList = arrayList;
}
// 返回页卡数量
@Override
public int getCount() {
// TODO Auto-generated method stub
return viewList.size();
}
// 判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
// 销毁页卡
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
// 将页卡添加到容器中，返回页卡的view
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
}
4、MainActivity，这里定义了一个ArrayList放4个页卡的view
public class MainActivity extends Activity {
private ViewPager viewPager;
private ArrayList<View> viewList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.vpager);
//实例化list，将定义的layout转为view，并添加到list中
viewList = new ArrayList<View>();
LayoutInflater li = getLayoutInflater();
viewList.add(li.inflate(R.layout.page_one, null, false));
viewList.add(li.inflate(R.layout.page_two, null, false));
viewList.add(li.inflate(R.layout.page_three, null, false));
viewList.add(li.inflate(R.layout.page_four, null, false));
MyPagerAdapter pagerAdapter = new MyPagerAdapter(viewList);
viewPager.setAdapter(pagerAdapter);
}
}
疑问？咋是这种效果？缺个标题
这好办，直接在上面源码中补充即可。方法如下
1、activity_main.xml中，ViewPager下引入PagerTabStrip标签
<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:id="@+id/layout"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/vpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagerTab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v4.view.ViewPager>
</LinearLayout>
2、MainActivity中，定义一个list，放4个标题。然后传给适配器
public class MainActivity extends Activity {
private ViewPager viewPager;
private ArrayList<View> viewList;
private ArrayList<String> titleList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.vpager);
pagerTab = (PagerTabStrip) findViewById(R.id.pagerTab);
//实例化list，将定于的layout转为view，并添加到list中
viewList = new ArrayList<View>();
LayoutInflater li = getLayoutInflater();
viewList.add(li.inflate(R.layout.page_one, null, false));
viewList.add(li.inflate(R.layout.page_two, null, false));
viewList.add(li.inflate(R.layout.page_three, null, false));
viewList.add(li.inflate(R.layout.page_four, null, false));
titleList = new ArrayList<String>();
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
titleList.add("第四页");
MyPagerAdapter pagerAdapter = new MyPagerAdapter(viewList, titleList);
viewPager.setAdapter(pagerAdapter);
}
}
3、MyPagerAdapter适配器中，接收标题list，并且重写getPageTitle方法即可
public class MyPagerAdapter extends PagerAdapter {
private ArrayList<View> viewList;
private ArrayList<String> titleList;
public MyPagerAdapter() {
}
public MyPagerAdapter(ArrayList<View> arrayList, ArrayList<String> titleList) {
this.viewList = arrayList;
this.titleList = titleList;
}
// 返回页卡数量
@Override
public int getCount() {
// TODO Auto-generated method stub
return viewList.size();
}
// 判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
// 销毁页卡
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
System.out.println("销毁页面" + (position + 1));
container.removeView(viewList.get(position));
}
// 将页卡添加到容器中，返回页卡的view
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
}
补充
- ViewPager有三种适配器：PagerAdapter、FragmentPagerAdapter、FragmentStatePagerAdapter。本文使用的是PagerAdapter。
- PagerAdapter以view作为数据源，会同时缓存当前页卡和前后页卡。即最多3个页卡。FragmentPagerAdapter、FragmentStatePagerAdapter以fragment作为数据源。前者会缓存全部页卡，后者可动态销毁页卡。推荐使用后者。
