Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1337404
  • 博文数量: 113
  • 博客积分: 3526
  • 博客等级: 中校
  • 技术积分: 1815
  • 用 户 组: 普通用户
  • 注册时间: 2009-09-08 09:46
个人简介

记录总结自己的工作

文章分类

全部博文(113)

文章存档

2015年(19)

2014年(10)

2013年(6)

2012年(16)

2011年(24)

2010年(21)

2009年(17)

分类: Android平台

2014-12-25 10:24:37

       使用网易新闻的时候,如果左右滑动页面,会发现上面的Tab下面有条红条,可以随着下面页面的滑动而滑动,用来指明当前的页面。研究了一下,发现可以使用ViewPager和自定义View来实现类似的效果。

        在使用Viewpager的时候,我们一般都会注册一个OnPageChangeListener,来看一下它的代码:
   点击(此处)折叠或打开
  1. /**
  2.      * Callback interface for responding to changing state of the selected page.
  3.      */
  4.     public interface OnPageChangeListener {

  5.         /**
  6.          * This method will be invoked when the current page is scrolled, either as part
  7.          * of a programmatically initiated smooth scroll or a user initiated touch scroll.
  8.          *
  9.          * @param position Position index of the first page currently being displayed.
  10.          * Page position+1 will be visible if positionOffset is nonzero.
  11.          * @param positionOffset Value from [0, 1) indicating the offset from the page at position.
  12.          * @param positionOffsetPixels Value in pixels indicating the offset from position.
  13.          */
  14.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

  15.         /**
  16.          * This method will be invoked when a new page becomes selected. Animation is not
  17.          * necessarily complete.
  18.          *
  19.          * @param position Position index of the new selected page.
  20.          */
  21.         public void onPageSelected(int position);

  22.         /**
  23.          * Called when the scroll state changes. Useful for discovering when the user
  24.          * begins dragging, when the pager is automatically settling to the current page,
  25.          * or when it is fully stopped/idle.
  26.          *
  27.          * @param state The new scroll state.
  28.          * @see ViewPager#SCROLL_STATE_IDLE
  29.          * @see ViewPager#SCROLL_STATE_DRAGGING
  30.          * @see ViewPager#SCROLL_STATE_SETTLING
  31.          */
  32.         public void onPageScrollStateChanged(int state);
  33.     }
    可以看到这个接口有三个回调的方法,其中onPageScrolled方法在滑动的时候会被调用。这个方法有三个参数,看其说明可以知道 position就是当前显示第一页的序号,positionOffset是一个0到1的数,用来表示当前页滑动的位置,数值越大,就表示滑动的幅度越大。就需要通过这个方法来知道滑动的位置。

   下面需要一个自定义的View,来画这个滑动条。当onPageScrolled方法被调用的时候,我们就需要重画来定位滑动条的位置。下面是自定义VIew的代码:

点击(此处)折叠或打开

  1. public class ScllorTabView extends View {

  2.     private int mTabNum, mCurrentNum;
  3.     private float mWidth, mTabWidth, mOffset;
  4.     private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  5.     private int mBeginColor;
  6.     private int mEndColor;
  7.     LinearGradient gradient;

  8.     public ScllorTabView(Context context, AttributeSet attrs) {
  9.         super(context, attrs);
  10.     }

  11.     public void setTabNum(int n) {
  12.         mTabNum = n;
  13.     }

  14.     public void setCurrentNum(int n) {
  15.         mCurrentNum = n;
  16.         mOffset = 0;
  17.     }

  18.     public void setOffset(int position, float offset) {
  19.         if (offset == 0) {
  20.             return;
  21.         }
  22.         mCurrentNum = position;
  23.         mOffset = offset;
  24.         invalidate();
  25.     }

  26.     @Override
  27.     protected void onDraw(Canvas canvas) {
  28.         super.onDraw(canvas);
  29.         if (mTabWidth == 0) {
  30.             mWidth = getWidth();
  31.             mTabWidth = mWidth / mTabNum;
  32.         }
  33.         //根据位置和偏移量来计算滑动条的位置
  34.         float left = (mCurrentNum + mOffset) * mTabWidth;
  35.         final float right = left + mTabWidth;
  36.         final float top = getPaddingTop();
  37.         final float bottom = getHeight() - getPaddingBottom();

  38.         // if (gradient == null) {
  39.         LinearGradient gradient = new LinearGradient(left, getHeight(), right,
  40.                 getHeight(), mBeginColor, mEndColor, Shader.TileMode.CLAMP);
  41.         mPaint.setShader(gradient);
  42.         // }
  43.         canvas.drawRect(left, top, right, bottom, mPaint);
  44.     }

  45.     public void setSelectedColor(int color, int color2) {
  46.         mBeginColor = color;
  47.         mEndColor = color2;

  48.     }
  49. }
    其中LinearGradient是用来设置渐变色的,也可以去掉。最后只需要加上调用更新的代码就可以了:

点击(此处)折叠或打开

  1. @Override
  2.             public void onPageScrolled(int position, float positionOffset,
  3.                     int positionOffsetPixels) {
  4.                 mScllorTabView.setOffset(position, positionOffset);
  5.             }
    好了,来看一下实现的效果吧











阅读(13887) | 评论(2) | 转发(1) |
0

上一篇:矩阵的旋转

下一篇:Activity的launchMode

给主人留下些什么吧!~~

云少嘎嘎嘎2015-09-21 09:13:17

iWenKu:文明上网,理性发言...大神 AttributeSet类 怎么定义的  能不能贴下

没有那个啊

回复 | 举报

iWenKu2015-09-19 22:47:50

文明上网,理性发言...大神 AttributeSet类 怎么定义的  能不能贴下