一起來實現網易云音樂引導頁效果

開始之前先看效果

網易云原效果

我實現的效果

質量有所壓縮,具體可去下載網易云音樂自行查看效果
本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 github地址Music163GuideDemo如果能點個star,感激不盡
  • 如果本demo對你有幫助,來個共贏的事吧,掃個紅包也沒損失↓↓↓


    1547192479521.jpg
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 余額寶收益一跌再跌,我們的閑錢是否已無處安放 今年下半年以來,受到央行不斷向市場釋放流動性的影響,貨幣基金的收益持...
    郭麗敬閱讀 192評論 0 1
  • 曾經想過無數次的出走,終于小心翼翼的掂起了腳尖,邁出了這一步。 5點,做夢醒來,能感覺到眼球快速的轉動,就像夢里一...
    463c6b66459c閱讀 195評論 0 0
  • 陪伴是最長情的告白。 圖片來自百度 01 世界上所有和你關系親密的人,幾乎都是肯時間陪伴你最多的人。...
    七夢的悠閑時光閱讀 1,005評論 -1 3
  • 遠方 遠方 哪里才是遠方 新疆抑或藏地 漠河還是騰沖 其實 離開了你的地方 就是遠方
    墨莫陌茉呀閱讀 211評論 0 3
  • 聽同學說起,我才知道,原來劍橋就在我們隔壁的城市,坐火車一個多小時便可到達。說到劍橋,馬上想到了劍橋大學,雖然之前...
    陽光心程閱讀 942評論 2 4