Android开发之利用ViewPager实现导航页和滑动标签页效果

ViewPager这个组件是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包含了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一，利用它我们可以做很多事情，从最简单的导航，到页面菜单等等。它在android.support.v4包中。

API：http://developer.android.com/intl/zh-cn/reference/android/support/v4/view/ViewPager.html

1，实现程序导航页（初次使用屏幕左右滑动向导）

main.xml

<?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" >    <android.support.v4.view.ViewPager        android:id="@+id/viewFlipper1"        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <!-- PagerTabStrip是用来显示title和下划线，如果是为了实现导航向导效果，不需要这个子标签组件 -->        <android.support.v4.view.PagerTabStrip            android:id="@+id/viewPagerTabStrip"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="top" >        </android.support.v4.view.PagerTabStrip>    </android.support.v4.view.ViewPager></LinearLayout>

pageguide.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >            <Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="38dp"        android:visibility="gone"        android:text="立即体验" /></RelativeLayout>

ViewPageActivity

public class ViewPageActivity extends Activity {ViewPager mViewPager;//导航页图片资源public int[] guides = new int[] { R.drawable.guide_page_1,R.drawable.guide_page_2, R.drawable.guide_page_3,R.drawable.guide_page_4 };@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.viewpage_main);mViewPager = (ViewPager) findViewById(R.id.viewFlipper1); initWithPageGuideMode();}/** * 程序导航页效果 */public void initWithPageGuideMode() {  List<View> mList = new ArrayList<View>();LayoutInflater inflat = LayoutInflater.from(this);//先添加一个最左侧空的viewView item = inflat.inflate(R.layout.pageguide, null);mList.add(item);for (int index : guides) {item = inflat.inflate(R.layout.pageguide, null);item.setBackgroundResource(index);mList.add(item);}//经过遍历，此时item是最后一个view，设置buttonButton btn = (Button) item.findViewById(R.id.button1);btn.setVisibility(View.VISIBLE);//btn.setOnClickListener(this)，设置最后一个页面上button的监听//再添加一个最右侧空的viewitem = inflat.inflate(R.layout.pageguide, null);mList.add(item);//ViewPager最重要的设置Adapter，这和ListView一样的原理MViewPageAdapter adapter = new MViewPageAdapter(mList);mViewPager.setAdapter(adapter);mViewPager.setOnPageChangeListener(adapter);mViewPager.setCurrentItem(1);}/** * 内部类，继承PagerAdapter，当然你也可以直接 new PageAdapter *  * @author yangxiaolong *  */class MViewPageAdapter extends PagerAdapter implements OnPageChangeListener {private List<View> mViewList;public MViewPageAdapter(List<View> views) {mViewList = views;}@Overridepublic int getCount() {return mViewList.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mViewList.get(position), 0);return mViewList.get(position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mViewList.get(position));}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int position) {if (position == 0) {mViewPager.setCurrentItem(1);} else if (position == mViewList.size() - 1) {mViewPager.setCurrentItem(position - 1);Toast.makeText(getApplicationContext(), "页面即将跳转",Toast.LENGTH_SHORT).show();//应该在这里跳转到MainActivity// startActivity(intent);}}}}

ViewPager的适配器是PagerAdapter，它是基类提供适配器来填充页面ViewPager内部，想要使用一个更具体的实现,如FragmentPagerAdapter或FragmentStatePagerAdapter。（google官方建议ViewPager应该和Fragment一起使用）。当我们实现一个PagerAdapter,必须至少覆盖以下方法:

• instantiateItem(ViewGroup, int)
• destroyItem(ViewGroup, int, Object)
• getCount()
• isViewFromObject(View, Object)

看字面意思就应该能明白init实例化，destroy销毁，count页面数量，不用一一介绍了。

效果图：

这样当我们点击立即体验或是向左滑动图片时就可以直接进入到主界面了~

2，实现标签滑动翻页效果

效果类似于当前流行的微博、新闻客户端顶部导航栏的效果，具体如下：

其实这个效果用ViewPager实现起来so easy！不到200行代码，我直接把代码贴出来，大家一看就明白。

pagetab_main.xml

<?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:background="#FFFFFF"    android:orientation="vertical" >    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="fill_parent"        android:layout_height="40.0dip"        android:background="#C0C0C0" >        <TextView            android:id="@+id/text1"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="新闻"            android:textColor="#000000"            android:textSize="20.0dip" />        <TextView            android:id="@+id/text2"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="世界杯"            android:textColor="#000000"            android:textSize="20.0dip" />        <TextView            android:id="@+id/text3"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="娱乐"            android:textColor="#000000"            android:textSize="20.0dip" />    </LinearLayout>    <!-- android:scaleType="matrix" -->    <ImageView        android:id="@+id/cursor"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:contentDescription="@null"        android:background="@drawable/select"/>    <android.support.v4.view.ViewPager        android:id="@+id/viewFlipper1"        android:layout_width="match_parent"        android:layout_height="wrap_content" >    </android.support.v4.view.ViewPager></LinearLayout>

ViewPageTabActivity.java

/** * @author yangxiaolong *  */public class ViewPageTabActivity extends Activity implements OnClickListener {private ViewPager mViewPager;// ViewPager定义在xml中private ImageView mImageView;// 横向下划线private int pWidth;// 图片宽度private int offset;// 图片偏移量private int currentIndex; // 当前标签位置@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.pagetab_main);initViews();}public void initViews() {// step1>>init ViewPagermViewPager = (ViewPager) findViewById(R.id.viewFlipper1);List<View> mList = new ArrayList<View>();// step2>>通过LayoutInflater构建几个子标签页，并存入List集合LayoutInflater inflater = LayoutInflater.from(this);View view1 = inflater.inflate(R.layout.view1, null);View view2 = inflater.inflate(R.layout.view2, null);View view3 = inflater.inflate(R.layout.view3, null);mList.add(view1);mList.add(view2);mList.add(view3);// step3>>创建自定义PagerAdapter 并添加OnPageChangeListener监听MyPagerAdapter adapter = new MyPagerAdapter(mList);mViewPager.setAdapter(adapter);mViewPager.setOnPageChangeListener(adapter);// step4>>导航栏上每一标签项添加onClick监听findViewById(R.id.text1).setOnClickListener(this);findViewById(R.id.text2).setOnClickListener(this);findViewById(R.id.text3).setOnClickListener(this);// step5>>初始化横向划线的位置，需要计算偏移量并移动ImageView，有两个方法mImageView = (ImageView) findViewById(R.id.cursor);// 通过BitmapFactory获得横向划线图片宽度Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.select);pWidth = bitmap.getWidth();// 获取手机屏幕分辨率(宽度)Display display = getWindowManager().getDefaultDisplay();DisplayMetrics dm = new DisplayMetrics();display.getMetrics(dm);int screenWidth = dm.widthPixels;// 初始化偏移量，计算原理如下// 每一个标签页所占：offset+pWidth+offset...[以此类推]offset = (screenWidth / 3 - pWidth) / 2;// 【方法一】 可以通过Matrix属性设置ImageView组件的偏移// 需要xml中ImageView宽度fill_parent，android:scaleType="matrix"// Matrix matrix = new Matrix();// matrix.postTranslate(offset, 0);// mImageView.setImageMatrix(matrix);// 【方法二】通过LayoutParams.setMargins属性设置偏移量LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);lp.setMargins(offset, 0, 0, 0);mImageView.setLayoutParams(lp);}/** * 自定义PagerAdapter类，构造函数传递List<Views>（标签页View集合），并实现OnPageChangeListener监听 *  * @author yangxiaolong *  */class MyPagerAdapter extends PagerAdapter implements OnPageChangeListener {private List<View> mList;public MyPagerAdapter(List<View> views) {mList = views;}@Overridepublic int getCount() {return mList.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mList.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mList.get(position), 0);return mList.get(position);}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int position) {// 获取每一个标签页所占宽度int section = offset * 2 + pWidth;// currentIndex为上一次滑动所处标签页位置(0,1,2)Animation animation = new TranslateAnimation(section * currentIndex, section * position, 0, 0);currentIndex = position;animation.setDuration(300l);animation.setFillAfter(true);// 动画结束后停留在当前所处位置mImageView.startAnimation(animation);Toast.makeText(ViewPageTabActivity.this,"您选择了：" + currentIndex + " 标签页", Toast.LENGTH_SHORT).show();}}@Overridepublic void onClick(View v) {int index = 0;switch (v.getId()) {case R.id.text1:index = 0;break;case R.id.text2:index = 1;break;case R.id.text3:index = 2;break;}mViewPager.setCurrentItem(index);}}

这就是全部代码，至于说每一个标签页的view布局，就放了ImageView和TextView，就不再贴出来了，各自可以按照需求定制

效果图：

为了能区分出每个标签页，我给每个view都设置了background color颜色。