抖音幾乎已經(jīng)成為了我們?nèi)粘Ｉ钪惺褂帽容^頻繁的App，無聊之時或工作之后可以刷一刷短視頻來供我們娛樂與放松。看到抖音的視屏切換效果，覺得用ViewPager可以做出一樣的效果。想一想之前用的ViewPager都是橫向切換的，雖然很經(jīng)常用，但是從來沒實現(xiàn)過豎向的切換效果，說做就做吧。
我們先看一波效果圖：
那么，要想實現(xiàn)這樣的效果，當(dāng)然是自定義ViewPager啦。問了一下度娘，看到有這樣一種思路：
首先，把Touch事件的x,y坐標(biāo)做一下交換，從原先的x坐標(biāo)差值轉(zhuǎn)變成y坐標(biāo)的差值，正符合了我們手指從橫向滑動轉(zhuǎn)成了縱向滑動。其次，再通過實現(xiàn)PageTransformer接口，改變view的平移方向，便實現(xiàn)了如上效果。
下面我們貼出代碼，并理解一下整個實現(xiàn)過程。
public class VerticalViewPager extends ViewPager { public VerticalViewPager(Context context) { super(context); } public VerticalViewPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent ev) { return super.onTouchEvent(swapTouchEvent(MotionEvent.obtain(ev))); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { return super.onInterceptTouchEvent(swapTouchEvent(MotionEvent.obtain(ev))); } private MotionEvent swapTouchEvent(MotionEvent event) { float width = getWidth(); float height = getHeight(); event.setLocation((event.getY() / height) * width, ((event.getX() / width) * height)); return event; }}首先，我們自定義一個繼承ViewPager的類，我們重點關(guān)注一下swapTouchEvent()方法。這個方法是將MotionEvent事件的x坐標(biāo)換成y坐標(biāo)，而y坐標(biāo)換成x坐標(biāo)。當(dāng)然，這個是參考百度的，我們理解了就好。其實現(xiàn)實在妙不可言！
public class VerticalPageTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View view, float position) { /** * 0 當(dāng)前界面 * -1 前一頁 * 1 后一頁 */ if (position >= -1 && position <= 1) { view.setTranslationX(view.getWidth() * -position); float yPosition = position * view.getHeight(); view.setTranslationY(yPosition); } }}上部分代碼，實現(xiàn)了界面由原來的橫向平移到縱向平移的過程。其思路是這樣的，我畫了一個草圖（湊合看，畢竟連幼兒園都沒畢業(yè)，畫畫功底~~）
這張圖描述了我們手機的屏幕，我們知道ViewPager，默認(rèn)是把三個界面橫向著排一起的，現(xiàn)在我們將其改為縱向的。
如果手指向下滑動，也就是第一個界面（綠色的），它將會進(jìn)入到我們的屏幕，然而當(dāng)前頁（紅色的）將退出屏幕，這是一套完整的流程，手指向上滑動，則方向相反。
view.setTranslationX(view.getWidth() * -position); float yPosition = position * view.getHeight(); view.setTranslationY(yPosition);
這是對ViewPager中所有子View的x,y坐標(biāo)進(jìn)行平移使它能夠排成縱向一排。代碼不難，就是對x,y坐標(biāo)的平移處理。例如：
綠色的：它的position為-1，對y坐標(biāo)而言,平移它的view高度。也就是-height，對x坐標(biāo)而言，則平移它的width*-position，那它就跑到紅色的頭上了，現(xiàn)在我們往下滑動手指，它就進(jìn)入屏幕了。
總體來說，大致實現(xiàn)就是這樣，只要理清思路便可以很快的理解。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點
疑難解答
