使用viewpager 實現卡片疊加效果

原創

夏至的稻穗

2019-08-15 05:09

今天要顯示的效果如下：

來簡單分析一下，這種刮刮樂的效果，可以用viewpager的來實現，只要拿到 transformPage(@NonNull View view, float position) ，通過 position 來控制顯示的位置即可。

view 爲當前的可視部分，position 則爲滑動狀態的值，有 -1,0,1 三種模式。0 表示的是最頂端的視圖，-1 則表示左邊的view，1則表示右邊的view，具體如下：

如果我們要讓它像效果圖那樣疊加，則可以通過這個改變 x 的座標，初步代碼如下：

@Override
    public void transformPage(@NonNull View view, float position) {
        view.setAlpha(0.4f);
        view.setTranslationX(-view.getWidth() * position);
    }

接着分析，爲了讓它有縮放和向下偏移的效果，需要對後面的view進行縮放和向下移，所以代碼改爲：

@Override
public void transformPage(@NonNull View view, float position) {
  
    view.setTranslationX(-view.getWidth() * position);
    float scale = (view.getWidth() - mCardHeight * position) / view.getWidth();
    view.setScaleX(scale);
    view.setScaleY(scale);
    view.setClickable(false);
    view.setTranslationY(mCardHeight * position);

}

mCardHeight 表示一個簡單數值，我這裏用 20 表示，然後再把viewpager 的緩存設置爲3，這裏疊加效果才更明顯；

接着，發現無法移動，當然了，因爲所有的veiw都被設置了，需要對當前view進行特殊處理，最終代碼如下：

public class CardTransformer implements ViewPager.PageTransformer {
    private float mCardHeight = 10;

    public CardTransformer(float cardheight) {
        this.mCardHeight = cardheight;
    }

    @Override
    public void transformPage(@NonNull View view, float position) {
        if (position <= 0){
            view.setTranslationX(0f);
            view.setClickable(true);
        }else {
            view.setTranslationX(-view.getWidth() * position);
            float scale = (view.getWidth() - mCardHeight * position) / view.getWidth();
            view.setScaleX(scale);
            view.setScaleY(scale);
            view.setClickable(false);
            view.setTranslationY(mCardHeight * position);
        }

    }
}

然後把它設置給 viewpager 的 pageTransformer 即可。

當然，我這裏已經封裝好了一個 Viewpager 的工具類，實現的效果如下:

項目地址： https://github.com/LillteZheng/ViewPagerHelper