详解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(); } }