关闭

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

标签: Viewpager实现导航页无限轮播
269人阅读 评论(0) 收藏 举报
 

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

标签: viewpager导航页效果滑动标签导航栏滑动view
 10880人阅读 评论(3) 收藏 举报
 分类:
 

目录(?)[+]



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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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,必须至少覆盖以下方法:

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


效果图:


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



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

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




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

pagetab_main.xml

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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, 000);  
  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, 00);  
  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颜色。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:34234次
    • 积分:565
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:19篇
    • 译文:0篇
    • 评论:4条
    最新评论