关闭

ViewPager 详解(四)----自主实现滑动指示条

标签: viewpager
245人阅读 评论(0) 收藏 举报
分类:

请大家尊重原创者版权,转载请标明出处:http://blog.csdn.net/harvic880925/article/details/38557517  谢谢

前言:前面我们用了三篇的时间讲述了有关ViewPager的基础知识,到这篇就要进入点实际的了。在第三篇《ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同》中,我们说了,PagerTabStrip和PagerTitleStrip都不适合用在实际用途中,当要在实际运用中,我们就要自己去实现相关的功能。这篇文章中单纯讲述划动指示条的实现方法,而对于交互Tab的实现,就不再讲解,最后给出网上的一段源码,大家可以去研究一下,有关交互Tab的实现原理是一样的,难度不大。


相关文章:

1、《ViewPager 详解(一)---基本入门》

2、《ViewPager 详解(二)---详解四大函数》

3、《ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同》

4、《ViewPager 详解(四)----自主实现滑动指示条》

5、《ViewPager 详解(五)-----使用Fragment实现ViewPager滑动》


先上本篇效果图:

  

一、XML布局

布局代码如下:

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.     tools:context="com.example.testviewpage_2.MainActivity" >  
  7.       
  8.      <ImageView  
  9.         android:id="@+id/cursor"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:scaleType="matrix"  
  13.         android:src="@drawable/a" />  
  14.   
  15.     <android.support.v4.view.ViewPager  
  16.         android:id="@+id/viewpager"  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_gravity="center"/>  
  20.   
  21. </LinearLayout>  
采用线性垂直布局,在滑动页面的上方添加一个小水平条。

二、JAVA代码

本例代码是根据《ViewPager 详解(一)---基本入门》 更改而来。

先给出全部代码,然后再逐步讲解。

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. public class MainActivity extends Activity {  
  2.   
  3.     private View view1, view2, view3;  
  4.     private List<View> viewList;// view数组  
  5.     private ViewPager viewPager; // 对应的viewPager  
  6.   
  7.     private ImageView cursor;  
  8.     private int bmpw = 0// 游标宽度  
  9.     private int offset = 0;// // 动画图片偏移量  
  10.     private int currIndex = 0;// 当前页卡编号  
  11.   
  12.     @Override  
  13.     protected void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         setContentView(R.layout.activity_main);  
  16.   
  17.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
  18.         LayoutInflater inflater = getLayoutInflater();  
  19.         view1 = inflater.inflate(R.layout.layout1, null);  
  20.         view2 = inflater.inflate(R.layout.layout2, null);  
  21.         view3 = inflater.inflate(R.layout.layout3, null);  
  22.   
  23.         viewList = new ArrayList<View>();// 将要分页显示的View装入数组中  
  24.         viewList.add(view1);  
  25.         viewList.add(view2);  
  26.         viewList.add(view3);  
  27.   
  28.         //初始化指示器位置  
  29.         initCursorPos();  
  30.           
  31.         viewPager.setAdapter(new MyPagerAdapter(viewList));  
  32.         viewPager.setOnPageChangeListener(new MyPageChangeListener());  
  33.   
  34.     }  
  35.       
  36.     //初始化指示器位置  
  37.     public void initCursorPos() {  
  38.         // 初始化动画  
  39.         cursor = (ImageView) findViewById(R.id.cursor);  
  40.         bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)  
  41.                 .getWidth();// 获取图片宽度  
  42.   
  43.         DisplayMetrics dm = new DisplayMetrics();  
  44.         getWindowManager().getDefaultDisplay().getMetrics(dm);  
  45.         int screenW = dm.widthPixels;// 获取分辨率宽度  
  46.         offset = (screenW / viewList.size() - bmpw) / 2;// 计算偏移量  
  47.   
  48.         Matrix matrix = new Matrix();  
  49.         matrix.postTranslate(offset, 0);  
  50.         cursor.setImageMatrix(matrix);// 设置动画初始位置  
  51.     }  
  52.       
  53.   
  54.     //页面改变监听器  
  55.     public class MyPageChangeListener implements OnPageChangeListener {  
  56.   
  57.         int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量  
  58.         int two = one * 2;// 页卡1 -> 页卡3 偏移量  
  59.   
  60.         @Override  
  61.         public void onPageSelected(int arg0) {  
  62.             Animation animation = null;  
  63.             switch (arg0) {  
  64.             case 0:  
  65.                 if (currIndex == 1) {  
  66.                     animation = new TranslateAnimation(one, 000);  
  67.                 } else if (currIndex == 2) {  
  68.                     animation = new TranslateAnimation(two, 000);  
  69.                 }  
  70.                 break;  
  71.             case 1:  
  72.                 if (currIndex == 0) {  
  73.                     animation = new TranslateAnimation(offset, one, 00);  
  74.                 } else if (currIndex == 2) {  
  75.                     animation = new TranslateAnimation(two, one, 00);  
  76.                 }  
  77.                 break;  
  78.             case 2:  
  79.                 if (currIndex == 0) {  
  80.                     animation = new TranslateAnimation(offset, two, 00);  
  81.                 } else if (currIndex == 1) {  
  82.                     animation = new TranslateAnimation(one, two, 00);  
  83.                 }  
  84.                 break;  
  85.             }  
  86.             currIndex = arg0;  
  87.             animation.setFillAfter(true);// True:图片停在动画结束位置  
  88.             animation.setDuration(300);  
  89.             cursor.startAnimation(animation);  
  90.         }  
  91.   
  92.         @Override  
  93.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
  94.         }  
  95.   
  96.         @Override  
  97.         public void onPageScrollStateChanged(int arg0) {  
  98.         }  
  99.     }  
  100.       
  101.       
  102.       
  103.       
  104.   
  105.     /** 
  106.      * ViewPager适配器 
  107.      */  
  108.     public class MyPagerAdapter extends PagerAdapter {  
  109.         public List<View> mListViews;  
  110.   
  111.         public MyPagerAdapter(List<View> mListViews) {  
  112.             this.mListViews = mListViews;  
  113.         }  
  114.   
  115.         @Override  
  116.         public boolean isViewFromObject(View arg0, Object arg1) {  
  117.             // TODO Auto-generated method stub  
  118.             return arg0 == arg1;  
  119.         }  
  120.   
  121.         @Override  
  122.         public int getCount() {  
  123.             // TODO Auto-generated method stub  
  124.             return mListViews.size();  
  125.         }  
  126.   
  127.         @Override  
  128.         public void destroyItem(ViewGroup container, int position, Object object) {  
  129.             // TODO Auto-generated method stub  
  130.             container.removeView(mListViews.get(position));  
  131.         }  
  132.   
  133.         @Override  
  134.         public Object instantiateItem(ViewGroup container, int position) {  
  135.             // TODO Auto-generated method stub  
  136.             container.addView(mListViews.get(position));  
  137.   
  138.             return mListViews.get(position);  
  139.         }  
  140.     }  
  141.   
  142. }  
从易到难一步步来讲。

1、MyPagerAdapter类


在前几篇中,我们对于适配器的实现总是new一个PageAdapter的实例。我们这里做了一点稍微的更改,将其集合成一个类,内容都没变,只是多了一个构造函数而已。所以针对这个类的具体代码,我就不再细讲,如果对其中的复写的函数为什么要这么写不理解的同学,请看《ViewPager 详解(二)---详解四大函数》

2、initCursorPos()---初始化指示器位置

游标在初始化显示时,我们要根据屏幕宽度来显示游标位置。先看看这部分代码:

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //初始化指示器位置  
  2. public void initCursorPos() {  
  3.     // 初始化动画  
  4.     cursor = (ImageView) findViewById(R.id.cursor);  
  5.     bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)  
  6.             .getWidth();// 获取图片宽度  
  7.   
  8.     DisplayMetrics dm = new DisplayMetrics();  
  9.     getWindowManager().getDefaultDisplay().getMetrics(dm);  
  10.     int screenW = dm.widthPixels;// 获取分辨率宽度  
  11.     offset = (screenW / viewList.size() - bmpw) / 2;// 计算偏移量  
  12.   
  13.     Matrix matrix = new Matrix();  
  14.     matrix.postTranslate(offset, 0);  
  15.     cursor.setImageMatrix(matrix);// 设置动画初始位置  
  16. }  

可能有些同学不明白的位置在于,初始化位置的偏移量为什么这么算,下面,我画了张图,看下就应该明白了。


最后对于偏移的方法,可用的很多,这里仿网上的代码用了matrix;当然大家可以用其它的偏移方法,一样。

3、MyPageChangeListener()---页面改变监听器

代码如下 :

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. public class MyPageChangeListener implements OnPageChangeListener {  
  2.   
  3.     int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量  
  4.     int two = one * 2;// 页卡1 -> 页卡3 偏移量  
  5.   
  6.     @Override  
  7.     public void onPageSelected(int arg0) {  
  8.         Animation animation = null;  
  9.         switch (arg0) {  
  10.         case 0:  
  11.             if (currIndex == 1) {  
  12.                 animation = new TranslateAnimation(one, 000);  
  13.             } else if (currIndex == 2) {  
  14.                 animation = new TranslateAnimation(two, 000);  
  15.             }  
  16.             break;  
  17.         case 1:  
  18.             if (currIndex == 0) {  
  19.                 animation = new TranslateAnimation(offset, one, 00);  
  20.             } else if (currIndex == 2) {  
  21.                 animation = new TranslateAnimation(two, one, 00);  
  22.             }  
  23.             break;  
  24.         case 2:  
  25.             if (currIndex == 0) {  
  26.                 animation = new TranslateAnimation(offset, two, 00);  
  27.             } else if (currIndex == 1) {  
  28.                 animation = new TranslateAnimation(one, two, 00);  
  29.             }  
  30.             break;  
  31.         }  
  32.         currIndex = arg0;  
  33.         animation.setFillAfter(true);// True:图片停在动画结束位置  
  34.         animation.setDuration(300);  
  35.         cursor.startAnimation(animation);  
  36.     }  
原理是这样,根据滑动到的页面,把游标滑动找指定位置。
这里可能有难度的地方在于,数学……

我画了一张图,解释从第一个页面到第二个页面时的距离为什么是“游标宽度+offset*2”,其它距离类似。



这篇就到这了,时间比较紧,而且这个难度不太大,讲的可能不太细。


源码中,给大家列出了一个有Tab交互的Demo,图片如下:

  


相关文章:

《Android ViewPager使用详解》

《Android ViewPager多页面滑动切换以及动画效果》

《Android多屏滑动:ViewPager基础使用及PagerTabStrip先天缺陷(附源码)》



源码包含:

1、TestViewPage_scroll_cursor:文中示例源码

2、DWinterTabDemo:带Tab交互的Demo


源码下载地址:http://download.csdn.net/detail/harvic880925/7758941


请大家尊重原创者版权,转载请标明出处:http://blog.csdn.net/harvic880925/article/details/38557517  谢谢

0
0

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