一塊兒來實現網易雲音樂引導頁效果

時間 2019-11-09

標籤一塊兒實現網易音樂引導效果简体版

原文原文鏈接

開始以前先看效果前邊爲網易雲的效果後邊爲我實現的效果git

質量有所壓縮，具體可去下載網易雲音樂自行查看效果github

本demo apk文件下載bash

分析

目測佈局：分爲兩個viewpager，上面展現文字的viewpager和下面的圖片viewpager；
進一步觀察：上面的文字viewpager滑動有延遲，而圖片viewpager是沒有滑動自帶動畫的，並且都沒有自帶滑動手勢效果；
分析得出：兩個viewpager都攔截滑動事件，文字viewpager須要設置切換時間，有動畫效果，圖片viewpager去掉自帶動畫；
分析圖片viewpager動畫效果，都是兩張圖片，一張背景，一張上浮圖片；打開以後，背景：透明度由0到1；上浮圖片：由下往上冒出;第三張圖片，頭像上浮以外還有個變小的過程

分析完畢，接下來具體實現app

實現

先實現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;
            }
        });
複製代碼