作者：crazysunj,鏈接：http://crazysunj.com/,本文為作者投稿。
推送過幾篇類似的文章，不過作者寫得還是非常的通俗易懂，就繼續推送啦。
最近看到越來越多ViewPager卡片效果，甚至自己公司的產品也用到了。正如自己看到這個效果時，內心的想法是，這個簡單，github一搜一籮筐，看了不下4個庫，使用起來都比較麻煩，不是說寫得不好，都是這方面的先驅者，值得學習。
關鍵是在這三天一小需求，一周一大需求的年代里，不一行代碼搞定，怎么完成任務啊，更何況這體現不了我們優秀程序員的逼格啊！開個玩笑，哈哈！我封裝了常見的卡片效果，達到一行代碼就能使用。No picture，say a J8！全程采用圖文并茂的形式分析，幫助你理解。
使用方法
viewPager.bind(
? ?getSupportFragmentManager(),
? ?new MyCardHandler(),
? ?Arrays.asList(imageArray));
其中ViewPager是我們自定義的，名曰CardViewPager。可能比較糾結的就是MyCardHandler。
你可以在onBind中操作你的View，這里提供數據以及該view的索引。就跟ListView的getView類似。
差不多了，使用方法就是這么簡單。但是臺上十分鐘，臺下十年功。
效果
從視覺效果來看，最先映入眼簾的是卡片，其次是卡片左右微微探頭，暗中觀察的兩張卡片。卡片效果想都不用想，CradView。
關于這個控件的封裝，我放在了最后，因為我們對于view是完全開放的，只要是這樣的滑動效果，可以填充任何的view，不局限于CardView，對于view更多布局效果，我也會推薦幾種。
我們先來看看暗中觀察的這兩個家伙到底是怎么實現的。
這是我們最常見的ViewPager效果。
PageTransformer
我們再來看看這樣的效果。
不知道小伙伴們看清楚了嗎？我看清楚了，前一個ViewPager在縮小和向右偏移，后一個ViewPager在放大和向左偏移。
WTF？縮放我看到了，前面一個不是在左移嗎？你跟我說右移？
同學，請先放下你手中的菜刀，聽我細細道來，我們先看看源代碼。
這是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以下）》
http://blog.csdn.net/lmj623565791/article/details/40411921
ViewPager
我們的主角可是暗中觀察的兩個家伙啊，主角肯定是要登場啊。現在我們希望ViewPgaer能夠留出兩塊區域來顯示它們。
回想一下，一開始，我讓你們把ViewPager當成LinearLayout橫鋪，這里我依然這么做，ViewPager顯示視圖默認是只顯示當前Item的，但我們只要把內容擠一擠不就有了，擠內容常見的就是padding了，如果仔細看上面部分的同學應該早就猜出來了。
這里我設置了40dp的padding，來看看效果。
看了效果圖的同學又要不開心了，右邊有一小塊覆蓋了，最重要根本沒看到那兩家伙啊，前者是因為我們前面說的第一個參數為false，右邊覆蓋左邊，這也證實了我們的結論。后者是因為我們沒加clipToPadding屬性設為false。
看看名字就是知道了，是否剪裁padding，我不剪裁不就顯示出來了？
我們再來看看效果。
有點意思了哈，要是視圖之間再空開點就完美了，剛才我們用到了padding，不妨用用margin，俗話說外事不決問margin，內事不決問padding，很熟悉，但好像哪里出了點問題，沒毛病，就是這樣的，圈起來，這是重點。
看看最終的效果。
是不是很完美，這里關于CardView的使用我就不介紹了，我也提供了一個可自定義寬高比例，默認支持陰影的CardView，稍微要注意的一點是，如果用自己的CardView，最好加上
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true"
5.0之后默認是false，也就是說不支持陰影（陰影被遮住了）。
Adapter
現在來分析如何構建視圖的，這里我們用到的fragment，因為谷歌已經為我們處理了很多加載問題，拿來用就是，這里我們adapter繼承于FragmentStatePagerAdapter，是因為我們卡片可能很多。
來看一看核心代碼：
這里我們采用mHandler去重新構造View，而不是復用構造出來的View，是配合FragmentStatePagerAdapter使用的，能夠更好利用資源和釋放資源，不然很容易造成OOM哦。
結束語
文章差不多就到這里，我相信你現在有很多疑問，有很多想法。這些疑問并不是對我上面闡述的概念，而是對ViewPager的理解，或許你已經可以用另一種方法實現了，或許你已經在敲以前想設計但是沒實現的代碼了。
如果對你有一點點幫助，那么我的目的就達到了。
GitHub：
https://github.com/crazysunj/CardSlideView
博客：
一行代碼實現ViewPager卡片效果
http://crazysunj.com/
?
如果你有好的文章想和大家分享歡迎投稿，直接向我投遞文章鏈接即可。
