Music163GuideDemo

Introduction: 实现网易云引导页效果
More: Author   ReportBugs   
Tags:

开始之前先看效果 左边为网易云的效果 右边为我实现的效果

网易云原效果 我实现的效果

质量有所压缩,具体可去下载网易云音乐自行查看效果

本 demo apk 文件下载

分析

  • 目测布局:分为两个 viewpager,上面展示文字的 viewpager 和下面的图片 viewpager;
  • 进一步观察:上面的文字 viewpager 滑动有延迟,而图片 viewpager 是没有滑动自带动画的,而且都没有自带滑动手势效果;
  • 分析得出:两个 viewpager 都拦截滑动事件,文字 viewpager 需要设置切换时间,有动画效果,图片 viewpager 去掉自带动画;
  • 分析图片 viewpager 动画效果,都是两张图片,一张背景,一张上浮图片;打开之后,背景:透明度由 0 到 1;上浮图片:由下往上冒出;第三张图片,头像上浮之外还有个变小的过程

分析完毕,接下来具体实现

实现

  • 先实现 viewpager 滑动拦截,拦截点击事件就行,具体看代码不多说 ``` public class MyInterceptViewPager extends ViewPager { private boolean isScrollable = true;

    public MyInterceptViewPager(Context context) {

      super(context);
    

    }

    public MyInterceptViewPager(Context context, AttributeSet attrs) {

      super(context, attrs);
    

    }

@Override
public boolean onTouchEvent(MotionEvent ev) {
    return isScrollable && super.onTouchEvent(ev);
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    return isScrollable && super.onInterceptTouchEvent(ev);
}

@Override
public void setCurrentItem(int item) {
    super.setCurrentItem(item, false);//表示切换的时候,不需要切换时间。
}

@Override
public void setCurrentItem(int item, boolean smoothScroll) {
    super.setCurrentItem(item, smoothScroll);
}

}

- 通过反射,实现 viewpager 切换动画速度修改,新建一个类继承于 Scroller

public class FixedSpeedScroller extends Scroller { private int mDuration = 1500;

public FixedSpeedScroller(Context context) {
    super(context);
}

public FixedSpeedScroller(Context context, Interpolator interpolator) {
    super(context, interpolator);
}

@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
    // Ignore received duration, use fixed one instead
    super.startScroll(startX, startY, dx, dy, mDuration);
}

@Override
public void startScroll(int startX, int startY, int dx, int dy) {
    // Ignore received duration, use fixed one instead
    super.startScroll(startX, startY, dx, dy, mDuration);
}

public void setmDuration(int time) {
    mDuration = time;
}

public int getmDuration() {
    return mDuration;
}

}

- 具体使用

try { Field field = ViewPager.class.getDeclaredField("mScroller"); field.setAccessible(true); FixedSpeedScroller scrollerText = new FixedSpeedScroller(this, new AccelerateInterpolator()); field.set(mTextViewPager, scrollerText); scrollerText.setmDuration(400); } catch (Exception e) {

    }
- 实现两个 viewpager 的联动,根据横向滑动距离和方向判断是否应该翻页

mTouchLayout.setOnTouchListener(new View.OnTouchListener() { float startX; float startY;//没有用到 float endX; float endY;//没有用到 @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: startX = event.getX(); startY = event.getY(); break; case MotionEvent.ACTION_UP: endX = event.getX(); endY = event.getY(); WindowManager windowManager = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE); Point size = new Point(); windowManager.getDefaultDisplay().getSize(size); int width = size.x; if (startX - endX >= (width / 8)){// startX - endX 大于 0 且大于宽的 1/8 可以往后翻页 if (pageIndex == 0){ mImageViewPager.setCurrentItem(1); mTextPager.setCurrentItem(1, true); }else if (pageIndex == 1){ mImageViewPager.setCurrentItem(2); mTextPager.setCurrentItem(2, true); } }else if (endX - startX >= (width / 8)){ // endX - startX 大于 0 且大于宽的 1/8 可以往前翻页 if (pageIndex == 2){ mImageViewPager.setCurrentItem(1); mTextPager.setCurrentItem(1, true); }else if (pageIndex == 1){ mImageViewPager.setCurrentItem(0); mTextPager.setCurrentItem(0, true); } }

                    break;
            }
            return true;
        }
    });

```

最后

  • 本 demo 资源来自解压网易云音乐 apk,因为喜欢,所以模仿。

  • 如果本 demo 对你有帮助,来个共赢的事吧,扫个红包也没损失↓↓↓

1547192479521.jpg

Support Me
Apps
About Me
Google+: Trinea trinea
GitHub: Trinea