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

 

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

标签： viewpager导航页效果滑动标签导航栏滑动view

2014-05-27 17:44  10880人阅读  评论(3)  收藏  举报

  分类：

 

Android（38） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

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

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <android.support.v4.view.ViewPager  
8.         android:id="@+id/viewFlipper1"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content" >  
11.   
12.         <!-- PagerTabStrip是用来显示title和下划线，如果是为了实现导航向导效果，不需要这个子标签组件 -->  
13.         <android.support.v4.view.PagerTabStrip  
14.             android:id="@+id/viewPagerTabStrip"  
15.             android:layout_width="wrap_content"  
16.             android:layout_height="wrap_content"  
17.             android:layout_gravity="top" >  
18.         </android.support.v4.view.PagerTabStrip>  
19.     </android.support.v4.view.ViewPager>  
20.   
21. </LinearLayout>  

pageguide.xml

[java]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.       
7.       
8.   
9.     <Button  
10.         android:id="@+id/button1"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content"  
13.         android:layout_alignParentBottom="true"  
14.         android:layout_centerHorizontal="true"  
15.         android:layout_marginBottom="38dp"  
16.         android:visibility="gone"  
17.         android:text="立即体验" />  
18.   
19. </RelativeLayout>  

ViewPageActivity

[java]  view plain  copy

 

1. public class ViewPageActivity extends Activity {  
2.   
3.     ViewPager mViewPager;  
4.     //导航页图片资源  
5.     public int[] guides = new int[] { R.drawable.guide_page_1,  
6.             R.drawable.guide_page_2, R.drawable.guide_page_3,  
7.             R.drawable.guide_page_4 };  
8.   
9.     @Override  
10.     protected void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.         setContentView(R.layout.viewpage_main);  
13.         mViewPager = (ViewPager) findViewById(R.id.viewFlipper1);  
14.          initWithPageGuideMode();  
15.     }  
16.   
17.   
18.     /** 
19.      * 程序导航页效果 
20.      */  
21.     public void initWithPageGuideMode() {  
22.             
23.         List<View> mList = new ArrayList<View>();  
24.         LayoutInflater inflat = LayoutInflater.from(this);  
25.         //先添加一个最左侧空的view  
26.         View item = inflat.inflate(R.layout.pageguide, null);  
27.         mList.add(item);  
28.         for (int index : guides) {  
29.             item = inflat.inflate(R.layout.pageguide, null);  
30.             item.setBackgroundResource(index);  
31.             mList.add(item);  
32.         }  
33.         //经过遍历，此时item是最后一个view，设置button  
34.         Button btn = (Button) item.findViewById(R.id.button1);  
35.         btn.setVisibility(View.VISIBLE);  
36.         //btn.setOnClickListener(this)，设置最后一个页面上button的监听  
37.         //再添加一个最右侧空的view  
38.         item = inflat.inflate(R.layout.pageguide, null);  
39.         mList.add(item);  
40.         //ViewPager最重要的设置Adapter，这和ListView一样的原理  
41.         MViewPageAdapter adapter = new MViewPageAdapter(mList);  
42.         mViewPager.setAdapter(adapter);  
43.         mViewPager.setOnPageChangeListener(adapter);  
44.         mViewPager.setCurrentItem(1);  
45.   
46.     }  
47.   
48.     /** 
49.      * 内部类，继承PagerAdapter，当然你也可以直接 new PageAdapter 
50.      *  
51.      * @author yangxiaolong 
52.      *  
53.      */  
54.     class MViewPageAdapter extends PagerAdapter implements OnPageChangeListener {  
55.   
56.         private List<View> mViewList;  
57.   
58.         public MViewPageAdapter(List<View> views) {  
59.             mViewList = views;  
60.         }  
61.   
62.         @Override  
63.         public int getCount() {  
64.             return mViewList.size();  
65.         }  
66.   
67.         @Override  
68.         public boolean isViewFromObject(View arg0, Object arg1) {  
69.   
70.             return arg0 == arg1;  
71.         }  
72.   
73.         @Override  
74.         public Object instantiateItem(ViewGroup container, int position) {  
75.             container.addView(mViewList.get(position), 0);  
76.             return mViewList.get(position);  
77.         }  
78.   
79.         @Override  
80.         public void destroyItem(ViewGroup container, int position, Object object) {  
81.             container.removeView(mViewList.get(position));  
82.         }  
83.   
84.         @Override  
85.         public void onPageScrollStateChanged(int arg0) {  
86.   
87.         }  
88.   
89.         @Override  
90.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
91.   
92.         }  
93.   
94.         @Override  
95.         public void onPageSelected(int position) {  
96.   
97.                 if (position == 0) {  
98.                     mViewPager.setCurrentItem(1);  
99.                 } else if (position == mViewList.size() - 1) {  
100.                     mViewPager.setCurrentItem(position - 1);  
101.                     Toast.makeText(getApplicationContext(), "页面即将跳转",  
102.                             Toast.LENGTH_SHORT).show();  
103.                     //应该在这里跳转到MainActivity  
104.                     // startActivity(intent);  
105.                 }  
106.       
107.   
108.         }  
109.   
110.     }  
111.   
112. }  

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

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#FFFFFF"  
6.     android:orientation="vertical" >  
7.   
8.     <LinearLayout  
9.         android:id="@+id/linearLayout1"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="40.0dip"  
12.         android:background="#C0C0C0" >  
13.   
14.         <TextView  
15.             android:id="@+id/text1"  
16.             android:layout_width="fill_parent"  
17.             android:layout_height="fill_parent"  
18.             android:layout_weight="1.0"  
19.             android:gravity="center"  
20.             android:text="新闻"  
21.             android:textColor="#000000"  
22.             android:textSize="20.0dip" />  
23.   
24.         <TextView  
25.             android:id="@+id/text2"  
26.             android:layout_width="fill_parent"  
27.             android:layout_height="fill_parent"  
28.             android:layout_weight="1.0"  
29.             android:gravity="center"  
30.             android:text="世界杯"  
31.             android:textColor="#000000"  
32.             android:textSize="20.0dip" />  
33.   
34.         <TextView  
35.             android:id="@+id/text3"  
36.             android:layout_width="fill_parent"  
37.             android:layout_height="fill_parent"  
38.             android:layout_weight="1.0"  
39.             android:gravity="center"  
40.             android:text="娱乐"  
41.             android:textColor="#000000"  
42.             android:textSize="20.0dip" />  
43.     </LinearLayout>  
44.   
45.     <!-- android:scaleType="matrix" -->  
46.   
47.     <ImageView  
48.         android:id="@+id/cursor"  
49.         android:layout_width="wrap_content"  
50.         android:layout_height="wrap_content"  
51.         android:contentDescription="@null"  
52.         android:background="@drawable/select"/>  
53.   
54.     <android.support.v4.view.ViewPager  
55.         android:id="@+id/viewFlipper1"  
56.         android:layout_width="match_parent"  
57.         android:layout_height="wrap_content" >  
58.     </android.support.v4.view.ViewPager>  
59.   
60. </LinearLayout>  

ViewPageTabActivity.java

[java]  view plain  copy

 

1. /** 
2.  * @author yangxiaolong 
3.  *  
4.  */  
5. public class ViewPageTabActivity extends Activity implements OnClickListener {  
6.   
7.     private ViewPager mViewPager;// ViewPager定义在xml中  
8.     private ImageView mImageView;// 横向下划线  
9.     private int pWidth;// 图片宽度  
10.     private int offset;// 图片偏移量  
11.     private int currentIndex; // 当前标签位置  
12.   
13.     @Override  
14.     protected void onCreate(Bundle savedInstanceState) {  
15.         super.onCreate(savedInstanceState);  
16.         setContentView(R.layout.pagetab_main);  
17.         initViews();  
18.     }  
19.   
20.     public void initViews() {  
21.   
22.         // step1>>init ViewPager  
23.         mViewPager = (ViewPager) findViewById(R.id.viewFlipper1);  
24.         List<View> mList = new ArrayList<View>();  
25.   
26.         // step2>>通过LayoutInflater构建几个子标签页，并存入List集合  
27.         LayoutInflater inflater = LayoutInflater.from(this);  
28.         View view1 = inflater.inflate(R.layout.view1, null);  
29.         View view2 = inflater.inflate(R.layout.view2, null);  
30.         View view3 = inflater.inflate(R.layout.view3, null);  
31.         mList.add(view1);  
32.         mList.add(view2);  
33.         mList.add(view3);  
34.         // step3>>创建自定义PagerAdapter 并添加OnPageChangeListener监听  
35.         MyPagerAdapter adapter = new MyPagerAdapter(mList);  
36.         mViewPager.setAdapter(adapter);  
37.         mViewPager.setOnPageChangeListener(adapter);  
38.   
39.         // step4>>导航栏上每一标签项添加onClick监听  
40.         findViewById(R.id.text1).setOnClickListener(this);  
41.         findViewById(R.id.text2).setOnClickListener(this);  
42.         findViewById(R.id.text3).setOnClickListener(this);  
43.   
44.         // step5>>初始化横向划线的位置，需要计算偏移量并移动ImageView，有两个方法  
45.         mImageView = (ImageView) findViewById(R.id.cursor);  
46.         // 通过BitmapFactory获得横向划线图片宽度  
47.         Bitmap bitmap = BitmapFactory.decodeResource(getResources(),  
48.                 R.drawable.select);  
49.         pWidth = bitmap.getWidth();  
50.   
51.         // 获取手机屏幕分辨率(宽度)  
52.         Display display = getWindowManager().getDefaultDisplay();  
53.         DisplayMetrics dm = new DisplayMetrics();  
54.         display.getMetrics(dm);  
55.         int screenWidth = dm.widthPixels;  
56.   
57.         // 初始化偏移量，计算原理如下  
58.         // 每一个标签页所占：offset+pWidth+offset...[以此类推]  
59.         offset = (screenWidth / 3 - pWidth) / 2;  
60.   
61.         // 【方法一】 可以通过Matrix属性设置ImageView组件的偏移  
62.         // 需要xml中ImageView宽度fill_parent，android:scaleType="matrix"  
63.         // Matrix matrix = new Matrix();  
64.         // matrix.postTranslate(offset, 0);  
65.         // mImageView.setImageMatrix(matrix);  
66.   
67.         // 【方法二】通过LayoutParams.setMargins属性设置偏移量  
68.         LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,  
69.                 LayoutParams.WRAP_CONTENT);  
70.         lp.setMargins(offset, 0, 0, 0);  
71.         mImageView.setLayoutParams(lp);  
72.     }  
73.   
74.     /** 
75.      * 自定义PagerAdapter类，构造函数传递List<Views>（标签页View集合），并实现OnPageChangeListener监听 
76.      *  
77.      * @author yangxiaolong 
78.      *  
79.      */  
80.     class MyPagerAdapter extends PagerAdapter implements OnPageChangeListener {  
81.   
82.         private List<View> mList;  
83.   
84.         public MyPagerAdapter(List<View> views) {  
85.             mList = views;  
86.         }  
87.   
88.         @Override  
89.         public int getCount() {  
90.             return mList.size();  
91.         }  
92.   
93.         @Override  
94.         public boolean isViewFromObject(View view, Object object) {  
95.             return view == object;  
96.         }  
97.   
98.         @Override  
99.         public void destroyItem(ViewGroup container, int position, Object object) {  
100.             container.removeView(mList.get(position));  
101.         }  
102.   
103.         @Override  
104.         public Object instantiateItem(ViewGroup container, int position) {  
105.             container.addView(mList.get(position), 0);  
106.             return mList.get(position);  
107.         }  
108.   
109.         @Override  
110.         public void onPageScrollStateChanged(int arg0) {  
111.   
112.         }  
113.   
114.         @Override  
115.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
116.   
117.         }  
118.   
119.         @Override  
120.         public void onPageSelected(int position) {  
121.   
122.             // 获取每一个标签页所占宽度  
123.             int section = offset * 2 + pWidth;  
124.             // currentIndex为上一次滑动所处标签页位置(0,1,2)  
125.             Animation animation = new TranslateAnimation(  
126.                     section * currentIndex, section * position, 0, 0);  
127.             currentIndex = position;  
128.             animation.setDuration(300l);  
129.             animation.setFillAfter(true);// 动画结束后停留在当前所处位置  
130.             mImageView.startAnimation(animation);  
131.             Toast.makeText(ViewPageTabActivity.this,  
132.                     "您选择了：" + currentIndex + " 标签页", Toast.LENGTH_SHORT).show();  
133.         }  
134.     }  
135.   
136.     @Override  
137.     public void onClick(View v) {  
138.         int index = 0;  
139.         switch (v.getId()) {  
140.         case R.id.text1:  
141.             index = 0;  
142.             break;  
143.         case R.id.text2:  
144.             index = 1;  
145.             break;  
146.         case R.id.text3:  
147.             index = 2;  
148.             break;  
149.         }  
150.         mViewPager.setCurrentItem(index);  
151.     }  
152.   
153. }  

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

效果图：

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