Android實現卡片疊加效果

「來源: ｜龍旋 ID：longxuanzhigu」

效果如下：

來簡單分析一下，這種效果可以用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進行縮放和向下移，所以程式碼改為：

@Overridepublic 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

到這裡就結束啦。