今天要顯示的效果如下：
image
來簡單分析一下，這種刮刮樂的效果仔蝌，可以用viewpager的來實現(xiàn)泛领，只要拿到 transformPage(@NonNull View view, float position) ，通過 position 來控制顯示的位置即可掌逛。
view 為當(dāng)前的可視部分师逸，position 則為滑動狀態(tài)的值，有 -1,0,1 三種模式豆混。0 表示的是最頂端的視圖篓像，-1 則表示左邊的view，1則表示右邊的view皿伺，具體如下：
image
如果我們要讓它像效果圖那樣疊加员辩，則可以通過這個改變 x 的坐標(biāo)，初步代碼如下：
@Override
public void transformPage(@NonNull View view, float position) {
view.setAlpha(0.4f);
view.setTranslationX(-view.getWidth() * position);
}
image
接著分析鸵鸥，為了讓它有縮放和向下偏移的效果奠滑，需要對后面的view進(jìn)行縮放和向下移，所以代碼改為：
@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 表示一個簡單數(shù)值妒穴，我這里用 20 表示宋税，然后再把viewpager 的緩存設(shè)置為3，這里疊加效果才更明顯讼油；
image
接著杰赛，發(fā)現(xiàn)無法移動，當(dāng)然了矮台，因為所有的veiw都被設(shè)置了乏屯，需要對當(dāng)前view進(jìn)行特殊處理，最終代碼如下：
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);
}
}
}
然后把它設(shè)置給 viewpager 的 pageTransformer 即可瘦赫。
當(dāng)然辰晕，我這里已經(jīng)封裝好了一個 Viewpager 的工具類，實現(xiàn)的效果如下:
