详解Android App中创建ViewPager组件的方法
现在很多app一打开就是一个ViewPager,然后可以用手指滑,每滑一次就换一张图,底下还会有圈圈表示说现在滑到第几章~
通常这些图片都是放功能简介或是使用教学之类的,我的需求很简单,就是上面提到的那样而已。
有两种做法,一种是找现有套件,查了一堆资料每个都跟我推荐ViewPagerIndicator这套,我之前也看过这套,只是看起来需要有fragment再加上googleplay范例好像载不到了,所以只好自己实做一个。
Viewpager的实作可参考AndroidViewPager使用详解里面的程序码:
@OverrideprotectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_intro);
mViewPager=(ViewPager)findViewById(R.id.viewpager);
finalLayoutInflatermInflater=getLayoutInflater().from(this);
Viewv1=mInflater.inflate(R.layout.intro_layout_1,null);
Viewv2=mInflater.inflate(R.layout.intro_layout_2,null);
Viewv3=mInflater.inflate(R.layout.intro_layout_3,null);
Viewv4=mInflater.inflate(R.layout.intro_layout_4,null);
viewList=newArrayList<View>();
viewList.add(v1);
viewList.add(v2);
viewList.add(v3);
viewList.add(v4);
mViewPager.setAdapter(newMyViewPagerAdapter(viewList));
mViewPager.setCurrentItem(0);}
MyViewPagerAdapter
publicclassMyViewPagerAdapterextendsPagerAdapter{
privateList<View>mListViews;
publicMyViewPagerAdapter(List<View>mListViews){
this.mListViews=mListViews;
}
@Override
publicvoiddestroyItem(ViewGroupcontainer,intposition,Objectobject){
container.removeView((View)object);
}
@Override
publicObjectinstantiateItem(ViewGroupcontainer,intposition){
Viewview=mListViews.get(position);
container.addView(view);
returnview;
}
@Override
publicintgetCount(){
returnmListViews.size();
}
@Override
publicbooleanisViewFromObject(Viewarg0,Objectarg1){
returnarg0==arg1;
}}
这样子你就有一个ViewPager了
下面我们来具体看一下ViewPager的用法:
一、ViewPager创建步骤
①在XML布局中加入android.support.v4.view.ViewPager
②加载显示的页卡将Layout布局转换为View对象
(1)
LayoutInflaterlfgetLayoutInflater().from(this); lf.inflate(resource,root);
(2)
View.inflate(context,resource,root);
③配置Adapter(三种Adapter)
(1)PagerAdapter数据源:List<View>
(2)FragmentPagerAdapter数据源:List<Fragment>
(3)FragmentStatePagerAdapter数据源:List<Fragment>
二、代码示例
新建四个Fragment和他们的布局下面是MainActivity的xml布局:
<android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center"> <android.support.v4.view.PagerTabStrip android:id="@+id/tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top"> </android.support.v4.view.PagerTabStrip> <!--底部显示标题与上面的顶部显示不能同时出现 <android.support.v4.view.PagerTitleStrip android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom"> </android.support.v4.view.PagerTitleStrip> --> </android.support.v4.view.ViewPager>
第一种PagerAdapter
publicclassMyPagerAdapterextendsPagerAdapter{
privateList<View>viewList;
privateList<String>titleList;
publicMyPagerAdapter(List<View>viewList,List<String>titleList){
this.viewList=viewList;
this.titleList=titleList;
}
/**
*返回页卡的数量
*/
@Override
publicintgetCount(){
returnviewList.size();
}
/**
*view是否来自对象
*/
@Override
publicbooleanisViewFromObject(Viewarg0,Objectarg1){
returnarg0==arg1;
}
/**
*实例化一个页卡
*/
@Override
publicObjectinstantiateItem(ViewGroupcontainer,intposition){
container.addView(viewList.get(position));
returnviewList.get(position);
}
/**
*销毁一个页卡
*/
@Override
publicvoiddestroyItem(ViewGroupcontainer,intposition,Objectobject){
container.removeView(viewList.get(position));
}
/**
*设置ViewPager的标题
*/
@Override
publicCharSequencegetPageTitle(intposition){
returntitleList.get(position);
}
}
第二种FragmentPagerAdapter
publicclassMyFragmentPagerAdapterextendsFragmentPagerAdapter{
privateList<Fragment>fragList;
privateList<String>titleList;
publicMyFragmentPagerAdapter(FragmentManagerfm,List<Fragment>fragList,List<String>titleList){
super(fm);
this.fragList=fragList;
this.titleList=titleList;
}
@Override
publicFragmentgetItem(intarg0){
returnfragList.get(arg0);
}
@Override
publicCharSequencegetPageTitle(intposition){
returntitleList.get(position);
}
@Override
publicintgetCount(){
returnfragList.size();
}
}
第三种FragmentStatePagerAdapter(该适配器可以动态销毁Fragment)
publicclassMyFragmentPagerAdapter2extendsFragmentStatePagerAdapter{//该适配器可以动态销毁
privateList<Fragment>fragList;
privateList<String>titleList;
publicMyFragmentPagerAdapter2(FragmentManagerfm,List<Fragment>fragList,List<String>titleList){
super(fm);
this.fragList=fragList;
this.titleList=titleList;
}
@Override
publicFragmentgetItem(intarg0){
returnfragList.get(arg0);
}
@Override
publicCharSequencegetPageTitle(intposition){
returntitleList.get(position);
}
@Override
publicintgetCount(){
returnfragList.size();
}
@Override
publicObjectinstantiateItem(ViewGrouparg0,intarg1){
returnsuper.instantiateItem(arg0,arg1);
}
@Override
publicvoiddestroyItem(ViewGroupcontainer,intposition,Objectobject){
super.destroyItem(container,position,object);
}
}
MainActivity里使用getSupportFragmentManager()该Activity必须继承FragmentActivity:
publicclassMainActivityextendsFragmentActivityimplementsOnPageChangeListener{
privateList<View>viewList;
privateList<String>titleList;
privateViewPagerpager;
privatePagerTabStriptab;//顶部标题
privateList<Fragment>fragList;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewList=newArrayList<View>();
titleList=newArrayList<String>();
tab=(PagerTabStrip)findViewById(R.id.tab);
Viewview1=View.inflate(this,R.layout.view1,null);
Viewview2=View.inflate(this,R.layout.view2,null);
Viewview3=View.inflate(this,R.layout.view3,null);
Viewview4=View.inflate(this,R.layout.view4,null);
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
viewList.add(view4);
fragList=newArrayList<Fragment>();
fragList.add(newFragment1());
fragList.add(newFragment2());
fragList.add(newFragment3());
fragList.add(newFragment4());
//为ViewPager页卡设置标题
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
titleList.add("第四页");
//为PagerTabStrip设置一些属性
tab.setBackgroundColor(Color.WHITE);
tab.setDrawFullUnderline(false);
tab.setTabIndicatorColor(Color.BLUE);
pager=(ViewPager)findViewById(R.id.pager);
//MyPagerAdapteradapter=newMyPagerAdapter(viewList,titleList);
//MyFragmentPagerAdapteradapter=newMyFragmentPagerAdapter(getSupportFragmentManager(),fragList,titleList);
/**
*使用getSupportFragmentManager()该Activity必须继承FragmentActivity
*/
MyFragmentPagerAdapter2adapter=newMyFragmentPagerAdapter2(getSupportFragmentManager(),fragList,titleList);
pager.setAdapter(adapter);
pager.setOnPageChangeListener(this);
}
@Override
publicvoidonPageScrollStateChanged(intarg0){
}
@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2){
}
@Override
publicvoidonPageSelected(intarg0){
Toast.makeText(this,"当前是第"+(arg0+1)+"个界面",0).show();
}
}