如下:
<android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/viewPager" android:layout_gravity="center"> <android.support.v4.view.PagerTitleStrip android:id="@+id/pagertitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top"/> </android.support.v4.view.ViewPager>其中ViewPager为多页显示控件, pagerTitleStrip用于显示当前页面的标题,并且其android:layout_width必须设置成match_parent
二:完成一个简单的ViewPager例子
a)在布局文件中配置ViewPager
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
b)在Activity中获取这这个ViewPager组件.
并且可以设置全屏效果:
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
c)加载要显示的页卡:初始化数据,即每一个页面显示的View.
将其View添加到List集合中。
LayoutInflater lf=getLayoutInflater();
list=new ArrayList<View>();
list.add(lf.inflate(R.layout.activity_layout1,null));
list.add(lf.inflate(R.layout.activity_layout2,null));
list.add(lf.inflate(R.layout.activity_layout3,null));
d)给ViewPager设置数据适配器PagerAdapter
viewPager.setAdapter(PagerAdatpser);
实现PagerAdapter至少要实现四个方法:
1)instantiateItem(ViewGroup, int)
对显示的资源进行初始化。将显示的View
加入到ViewGroup中,然后作为返回值返回。
//container.addView(list.get(position));
//return list.get(position);
2)destroyItem(ViewGroup, int, Object)
PagerAdapter有一个缓存范围,如果在滑动过程
中超过了缓存范围,就会调用这个方法,销毁资源。
//////container.removeView(list.get(position));
3)getCount()获取要滑动的控件的数量
4)isViewFromObject(View, Object)
来判断显示的是否是同一个视图,一般将两个参数进行比较返回即可。
代码如下:
public class MainActivity extends Activity { private ViewPager pager; //每一个界面 private List<View> views; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(LayoutParams.FLAG_FORCE_NOT_FULLSCREEN, LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); setContentView(R.layout.activity_main); pager=(ViewPager) findViewById(R.id.pager); views=new ArrayList<View>(); LayoutInflater li=getLayoutInflater(); views.add(li.inflate(R.layout.f1, null)); views.add(li.inflate(R.layout.f2, null)); views.add(li.inflate(R.layout.f3, null)); //需要给ViewPager设置适配器 PagerAdapter adapter=new PagerAdapter() { @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0==arg1; } //有多少个切换页 @Override public int getCount() { // TODO Auto-generated method stub return views.size(); } //对超出范围的资源进行销毁 @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub //super.destroyItem(container, position, object); container.removeView(views.get(position)); } //对显示的资源进行初始化 @Override public Object instantiateItem(ViewGroup container, int position) { // TODO Auto-generated method stub //return super.instantiateItem(container, position); container.addView(views.get(position)); return views.get(position); } }; pager.setAdapter(adapter); //给ViewPager添加事件监听 pager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub Toast.makeText(MainActivity.this, "您选择了:"+arg0+"页面", 0).show(); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } }布局文件就一个ViewPager,就不贴代码了,
效果如图:
三:实现了滑动页面的的简单实现方法,但有时,仅仅实现页面滑动是不够的,还要有标题栏才会显得更友好。
所以需要使用android.support.v4包中的两个控件PagerTabStrip与PagerTitleStrip,他们都是用来实现标题栏的,但各自有些不同。
a)PagerTitleStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个非交互的指示器。
它经常作为ViewPager控件的一个子控件被被添加
在XML布局文件中。在布局文件中,它必须作为子
控件添加在ViewPager中。而且要使用它的
android:layout_gravity性设置为TOP或BOTTOM来
将标题显示在ViewPager的顶部或底部。每个页面的标
题是通过适配器的getPageTitle(int)函数提供给ViewPager
的标题内容。
b)PagerTabStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个可交互的指示器。
它经常作为ViewPager控件的一个子控件被被添加
在XML布局文件中。在你的布局文件中,将它作为
子控件添加在ViewPager中。而且要将它的
android:layout_gravity 属性设置为TOP或BOTTOM
来将它显示在ViewPager的顶部或底部。每个页面
的标题是通过适配器的getPageTitle(int)函数提
供给ViewPager的标题内容。
注意:其实这两个实现的效果基本差不多,但有两点不同:
1)PagerTabStrip在当前页面下,会有一个下划线条来提示当前页面的Tab是哪个。
2)PagerTabStrip的Tab是可以点击的,当用户点击某一个Tab时,当前页面就
会跳转到这个页面,而PagerTitleStrip
则没这个功能。
3)做标题栏需要重写适配器中的
getPageTitle(int position)返回标题内容。
所有标题可以放在List集合中,每次在
该方法中返回指定位置的标题。
4)可以自定义PagerTabStrip的样式
tabStrip = (PagerTabStrip)findViewById(R.id.pagertab);
//取消tab下面的长横线
tabStrip.setDrawFullUnderline(true);
//设置tab的背景色
tabStrip.setBackgroundColor(Color.BLUE);
//设置当前tab页签的下划线颜色
tabStrip.setTabIndicatorColor(Color.RED);
tabStrip.setTextColor(Color.CYAN);
实例代码:
布局:
<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.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/pager" > <android.support.v4.view.PagerTabStrip android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" android:id="@+id/title" /> </android.support.v4.view.ViewPager> </RelativeLayout>
public class TestActivity extends Activity { private ViewPager pager; //每一个界面 private List<View> views; //标题 private String[] titles={"新闻","娱乐","军事"}; private PagerTabStrip t; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(LayoutParams.FLAG_FORCE_NOT_FULLSCREEN, LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); setContentView(R.layout.activity_test); t=(PagerTabStrip) findViewById(R.id.title); //自定义table的样式 t.setBackgroundColor(Color.MAGENTA); t.setTextColor(Color.BLUE); t.setTextSize(0, 25f); t.setTabIndicatorColor(Color.GREEN); pager=(ViewPager) findViewById(R.id.pager); views=new ArrayList<View>(); LayoutInflater li=getLayoutInflater(); views.add(li.inflate(R.layout.f1, null)); views.add(li.inflate(R.layout.f2, null)); views.add(li.inflate(R.layout.f3, null)); //需要给ViewPager设置适配器 PagerAdapter adapter=new PagerAdapter() { //提供标题的内容 @Override public CharSequence getPageTitle(int position) { // TODO Auto-generated method stub return titles[position]; } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0==arg1; } //有多少个切换页 @Override public int getCount() { // TODO Auto-generated method stub return views.size(); } //对超出范围的资源进行销毁 @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub //super.destroyItem(container, position, object); container.removeView(views.get(position)); } //对显示的资源进行初始化 @Override public Object instantiateItem(ViewGroup container, int position) { // TODO Auto-generated method stub //return super.instantiateItem(container, position); container.addView(views.get(position)); return views.get(position); } }; pager.setAdapter(adapter); } }
四:PagerTabStrip和PagerTitleStrip都不适合用在实际用途中,
当要在实际运用中,我们就要自己去实现相关的功能。一般使用交互Tab的实现。
步骤:a)布局文件使用TextView完成tab的切换卡。
使用ImageView进行分割
使用ViewPager进行翻页
b)在Activity中获取TextView对象,
并分别设置点击事件。点击TextView
可以切换当前选中的卡片:
mPager.setCurrentItem(index);
c)在Activity中获取ViewPager对象。
添加卡片内容,设置PagerAdapter适配器。
d)给ViewPager对象设置setOnPageChangeListener();
可以监听某个卡片被选中的事件监听器。
修改TextView的字体大小和字体颜色。
实例:
布局:
<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"> <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:orientation="horizontal" android:background="#D5D4C3" android:gravity="center"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:textSize="18sp" android:layout_weight="1" android:text="聊天" android:id="@+id/tv1" android:gravity="center"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:textSize="18sp" android:layout_weight="1" android:text="发现" android:id="@+id/tv2" android:gravity="center"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:textSize="18sp" android:layout_weight="1" android:text="通讯录" android:id="@+id/tv3" android:gravity="center"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="#68AE94"/> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/pager" /> </LinearLayout>activity:
public class MyTabActivity extends Activity { private ViewPager pager; private List<View> views; //放标签页 private List<TextView>tvs=new ArrayList<TextView>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my_tab); initTextView(); //初始化ViewPager组件 initView(); initViewPager(); } public void initTextView() { // TODO Auto-generated method stub TextView tv1=(TextView) findViewById(R.id.tv1); tv1.setTextColor(Color.BLUE); TextView tv2=(TextView) findViewById(R.id.tv2); TextView tv3=(TextView) findViewById(R.id.tv3); //添加点击事件 //OnClickListener click=new MyClickListener(); tv1.setOnClickListener(new MyClickListener(0)); tv2.setOnClickListener(new MyClickListener(1)); tv3.setOnClickListener(new MyClickListener(2)); tvs.add(tv1); tvs.add(tv2); tvs.add(tv3); } private class MyClickListener implements OnClickListener{ private int index; public MyClickListener(int index) { // TODO Auto-generated constructor stub this.index=index; } @Override public void onClick(View v) { // TODO Auto-generated method stub //改变ViewPager当前显示页面 pager.setCurrentItem(index); } } //初始化ViewPager中显示的数据 public void initView() { // TODO Auto-generated method stub views=new ArrayList<View>(); LayoutInflater li=getLayoutInflater(); views.add(li.inflate(R.layout.f1, null)); views.add(li.inflate(R.layout.f2, null)); views.add(li.inflate(R.layout.f3, null)); } public void initViewPager() { // TODO Auto-generated method stub pager=(ViewPager) findViewById(R.id.pager); PagerAdapter adapter=new MyPagerAdapter(); pager.setAdapter(adapter); pager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int index) { // TODO Auto-generated method stub for(int i=0;i<tvs.size();i++){ if(i==index){ tvs.get(i).setTextColor(Color.BLUE); }else{ tvs.get(i).setTextColor(Color.rgb(55,55,55)); } } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } private class MyPagerAdapter extends PagerAdapter{ @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0==arg1; } //有多少个切换页 @Override public int getCount() { // TODO Auto-generated method stub return views.size(); } //对超出范围的资源进行销毁 @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub //super.destroyItem(container, position, object); container.removeView(views.get(position)); } //对显示的资源进行初始化 @Override public Object instantiateItem(ViewGroup container, int position) { // TODO Auto-generated method stub //return super.instantiateItem(container, position); container.addView(views.get(position)); return views.get(position); } } }
五:前面介绍ViewPager的普通实现方法,但android官方最推荐的一种实现方法却是使用fragment。
使用Fragment的时候需要使用的适配器为FragmentPagerAdapter。
FragmentPagerAdapter是PagerAdapter的子类,专门用于处理Fragment翻页的适配器。
这个适配器最好用于有限个静态fragment页面的管理。尽管不可见的视图有时会被销毁,但用户所有访问过的fragment都会被保存在内存中。因此fragment实例会保存大量的各种状态,这就造成了很大的内存开销。
所以如果要处理大量的页面切换,建议使用FragmentStatePagerAdapter.对于FragmentPagerAdapter的派生类,只需要重写getItem(int)和getCount()就可以了。
步骤:a)写一个Activity继承FragmentActivity,
专门处理Frament的Activity,重写onCreate方法
List<Fragment> fragments=new ArrayList<Fragment>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());
FragAdapter adapter = new FragAdapter(
getSupportFragmentManager(), fragments);
//设定适配器
ViewPager vp = (ViewPager)findViewById(R.id.viewpager);
vp.setAdapter(adapter);
b)FragAdapter是extends FragmentPagerAdapter。
//提供构造器
private List<Fragment> mFragments;
public FragAdapter(FragmentManager fm,List<Fragment> fragments) {
super(fm);
mFragments=fragments;
}
//重写方法
@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}
@Override
public int getCount() {
return mFragments.size();
}
实例:
布局:和上一个一样
activity:
public class MyFragmentActivity extends FragmentActivity { private ViewPager pager; private List<Fragment>list; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my_tab); list=new ArrayList<Fragment>(); list.add(new ChatFragment()); list.add(new FindFragment()); list.add(new ContactFragment()); pager=(ViewPager) findViewById(R.id.pager); MyAdapter adapter=new MyAdapter(getSupportFragmentManager()); pager.setAdapter(adapter); } //处理Fragment和ViewPager的适配器 private class MyAdapter extends FragmentPagerAdapter{ public MyAdapter(FragmentManager fm) { super(fm); // TODO Auto-generated constructor stub } @Override public Fragment getItem(int arg0) { // TODO Auto-generated method stub return list.get(arg0); } @Override public int getCount() { // TODO Auto-generated method stub return list.size(); } } }效果图:
有想要代码的可以:下载链接