一行程式碼實現ViewPager卡片效果

crazysunj發表於2019-03-04
行程Viewpager

前言

最近看到越來越多ViewPager卡片效果，甚至自己公司的產品也用到了。正如自己看到這個效果時，內心的想法是，這個簡單，github一搜一籮筐，看了不下4個庫，使用起來都比較麻煩，不是說寫得不好，都是這方面的先驅者，值得學習。關鍵是在這三天一小需求，一週一大需求的年代裡，不一行程式碼搞定，怎麼完成任務啊，更何況這體現不了我們優秀程式設計師的逼格啊！開個玩笑，哈哈！我封裝了常見的卡片效果，達到一行程式碼就能使用。No picture，say a J8！全程採用圖文並茂的形式分析，幫助你理解。

使用方法

viewPager.bind(getSupportFragmentManager(), new MyCardHandler(), Arrays.asList(imageArray));複製程式碼

其中ViewPager是我們自定義的，名曰CardViewPager。可能比較糾結的就是MyCardHandler。

public class MyCardHandler implements CardHandler {

    @Override
    public View onBind(final Context context, final String data, final int position) {
        View view = View.inflate(context, R.layout.item, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.image);
        Glide.with(context).load(data).into(imageView);
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, "data:" + data + "position:" + position, Toast.LENGTH_SHORT).show();
            }
        });
        return view;
    }
}


public interface CardHandler {
    View onBind(Context context, T data, int position);
}複製程式碼

你可以在onBind中操作你的View，這裡提供資料以及該view的索引。就跟ListView的getView類似。

差不多了，使用方法就是這麼簡單。但是臺上十分鐘，臺下十年功。

效果

原理解析

從視覺效果來看，最先映入眼簾的是卡片，其次是卡片左右微微探頭，暗中觀察的兩張卡片。卡片效果想都不用想，CradView。關於這個控制元件的封裝，我放在了最後，因為我們對於view是完全開放的，只要是這樣的滑動效果，可以填充任何的view，不侷限於CardView，對於view更多佈局效果，我也會推薦幾種。

我們先來看看暗中觀察的這兩個傢伙到底是怎麼實現的。

這是我們最常見的ViewPager效果。

PageTransformer

我們再來看看這樣的效果。

不知道小夥伴們看清楚了嗎？我看清楚了，前一個ViewPager在縮小和向右偏移，後一個ViewPager在放大和向左偏移。WTF？縮放我看到了，前面一個不是在左移嗎？你跟我說右移？

同學，請先放下你手中的菜刀，聽我細細道來，我們先看看原始碼。

@Override
public void transformPage(View page, float position) {
    if (mViewPager == null) {
        mViewPager = (ViewPager) page.getParent();
    }

    int leftInScreen = page.getLeft() - mViewPager.getScrollX();
    int centerXInViewPager = leftInScreen + page.getMeasuredWidth() / 2;
    int offsetX = centerXInViewPager - mViewPager.getMeasuredWidth() / 2;
    float offsetRate = (float) offsetX * 0.38f / mViewPager.getMeasuredWidth();
    float scaleFactor = 1 - Math.abs(offsetRate);
    if (scaleFactor > 0) {
        page.setScaleX(scaleFactor);
        page.setScaleY(scaleFactor);
        page.setTranslationX(-mMaxTranslateOffsetX * offsetRate);
    }
}複製程式碼

這是PageTransformer核心方法，直接說你可能比較懵逼，秉承圖文並茂的style，先來看看兩張圖，圖也是盜的，有現成的為什麼還要自己去做，就算你現在不這麼認為，過幾年就這麼想了，我賭半包辣條。

這是你定製ViewPager各種炫酷的切換效果的基礎，view就是ViewPager填充的view或者是fragment中的填充view。position上面已經很清楚，同學們大可自己玩玩，只有自己玩過，才知道什麼是浪費時間，沒毛病。

現在，我們來分析下該庫為什麼要這麼寫？一行一行分析，才能虎得住人，先來分析前3行程式碼，拿到ViewPager的引用，判空是防止重複獲取，為什麼page.getParent獲取的是ViewPager，你就把它當成橫鋪的LinearLayout你就理解了（但內部並不是這樣的，因為它有銷燬和建立這麼一說）。

接下來我們來看看leftInScreen，page.getLeft()表示當前view相對於父容器(ViewPager)離左邊的距離，mViewPager.getScrollX()表示ViewPager在X軸滑動的距離(內容)，那麼很明顯啦，leftInScreen就是該view的左邊距離當前view(ViewPager的當前Item)的左邊的距離(因為該view的padding是算在getLeft裡面的，因此得減去，padding值有正負，左正右負)。

這樣說來centerXInViewPager就很好理解啦，由leftInScreen加上該view的寬度的一半，那就是從該view的中間開始算起。

offsetX相對來說比較繞，但也是核心所在。它是由centerXInViewPager加上ViewPager寬度的一半。一般來說，offsetX與leftInScreen是相等的，先加上一半再減去一半有毛區別，但這一半不一定相等，例如ViewPager加上padding。如果你對上面的解析都理解了的話，那就很簡單了，就是該view相對於當前item的偏移量。

空間想象力強的人已經理解了，但我肯定會照顧所有的同學，下面給出圖，同學們可以參考著圖來理解上面的概念。

offsetRate和scaleFactor比較好理解啦，前者是offsetX相對於ViewPager的一個比值，後者用了Math.abs取絕對值是因為上面所返回的值都是有正負之分的，左負右正。

最後的屬性修改我就不想多說了，作為一名有信仰的Android程式設計師，這個都不知道，我還是會選擇原諒你。這裡比較卡人的就是為什麼要setTranslationX，就是因為我們呼叫了setScaleX，你想想你縮放了，是不是中間空出了這麼點距離？所以這個就是彌補中間空出的，讓人看上去一直是銜接的，你完全可以改，我們這裡最大值取180dp，這也是為什麼我一開始說前一個在右移的原因。

setPageTransformer(false, new CardTransformer(context));複製程式碼

這樣就設定進去了，這裡我解釋下，第一個引數，我們庫其實無關緊要，但作為一名有逼格的程式設計師，不刨根問底，實在對不起自己。

* @param reverseDrawingOrder true if the supplied PageTransformer requires page views
*                            to be drawn from last to first instead of first to last.複製程式碼

大致意思是說，如果為false，那麼就從第一頁開始繪製至最後一頁，為true就是從最後一頁開始繪製至第一頁，如果對佈局FrameLayout比較熟悉的同學，我相信難不倒你。

PageTransformer可以讓你設計出超炫酷的切換動畫，什麼立體翻轉啊，什麼淡入淡出啊，等等。

大家也可以看看洋哥的《Android 實現個性的ViewPager切換動畫 實戰PageTransformer（相容Android3.0以下）》

ViewPager

我們的主角可是暗中觀察的兩個傢伙啊，主角肯定是要登場啊。現在我們希望ViewPgaer能夠留出兩塊區域來顯示它們。回想一下，一開始，我讓你們把ViewPager當成LinearLayout橫鋪，這裡我依然這麼做，ViewPager顯示檢視預設是隻顯示當前Item的，但我們只要把內容擠一擠不就有了，擠內容常見的就是padding了，如果仔細看上面部分的同學應該早就猜出來了。這裡我設定了40dp的padding，來看看效果。

看了效果圖的同學又要罵娘了，右邊有一小塊覆蓋了，最重要根本沒看到那兩傢伙啊，前者是因為我們前面說的第一個引數為false，右邊覆蓋左邊，這也證實了我們的結論。後者是因為我們沒加clipToPadding屬性設為false。看看名字就是知道了，是否剪裁padding，我不剪裁不就顯示出來了？我們再來看看效果。

有點意思了哈，要是檢視之間再空開點就完美了，剛才我們用到了padding，不妨用用margin，俗話說外事不決問margin，內事不決問padding，很熟悉，但好像哪裡出了點問題，沒毛病，就是這樣的，圈起來，這是重點。

int margin = typedArray
                .getDimensionPixelOffset(R.styleable.CardViewPager_card_margin,
                        (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40, displayMetrics));
setPageMargin(margin);複製程式碼

看看最終的效果。

是不是很完美，這裡關於CardView的使用我就不介紹了，我也提供了一個可自定義寬高比例，預設支援陰影的CardView，稍微要注意的一點是，如果用自己的CardView，最好加上

app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true"複製程式碼

5.0之後預設是false，也就是說不支援陰影（陰影被遮住了）。

Adapter

現在來分析如何構建檢視的，這裡我們用到的fragment，因為谷歌已經為我們處理了很多載入問題，拿來用就是，這裡我們adapter繼承於FragmentStatePagerAdapter，是因為我們卡片可能很多。

來看一看核心程式碼：

Context context = getContext();
List cardItems = new ArrayList();
for (int i = 0, size = data.size(); i < size; i++) {
    T t = data.get(i);
    CardItem item = new CardItem();
    item.bindHandler(handler);
    item.bindData(t, i);
    cardItems.add(item);
}

if (mHandler == null) {
    throw new RuntimeException("please bind the handler !");
}
return mHandler.onBind(mContext, mData, mPosition);複製程式碼

這裡我們採用mHandler去重新構造View，而不是複用構造出來的View，是配合FragmentStatePagerAdapter使用的，能夠更好利用資源和釋放資源，不然很容易造成OOM哦。

結束語

文章差不多就到這裡，我相信你現在有很多疑問，有很多想法。這些疑問並不是對我上面闡述的概念，而是對ViewPager的理解，或許你已經可以用另一種方法實現了，或許你已經在敲以前想設計但是沒實現的程式碼了。如果對你有一點點幫助，那麼我的目的就達到了。

傳送門

GitHub：github.com/crazysunj/C…

部落格：一行程式碼實現ViewPager卡片效果

相關文章