快捷導(dǎo)航

Android自定義ViewPager實(shí)現(xiàn)縱向滑動(dòng)翻頁(yè)效果

更新時(shí)間：2020年10月21日 10:29:23 作者：smile_Running

這篇文章主要為大家詳細(xì)介紹了Android自定義ViewPager實(shí)現(xiàn)縱向滑動(dòng)翻頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

抖音幾乎已經(jīng)成為了我們?nèi)粘Ｉ钪惺褂帽容^頻繁的App，無(wú)聊之時(shí)或工作之后可以刷一刷短視頻來(lái)供我們娛樂(lè)與放松?？吹蕉兑舻囊暺燎袚Q效果，覺(jué)得用ViewPager可以做出一樣的效果。想一想之前用的ViewPager都是橫向切換的，雖然很經(jīng)常用，但是從來(lái)沒(méi)實(shí)現(xiàn)過(guò)豎向的切換效果，說(shuō)做就做吧。

我們先看一波效果圖：

那么，要想實(shí)現(xiàn)這樣的效果，當(dāng)然是自定義ViewPager啦。問(wèn)了一下度娘，看到有這樣一種思路：
首先，把Touch事件的x,y坐標(biāo)做一下交換，從原先的x坐標(biāo)差值轉(zhuǎn)變成y坐標(biāo)的差值，正符合了我們手指從橫向滑動(dòng)轉(zhuǎn)成了縱向滑動(dòng)。其次，再通過(guò)實(shí)現(xiàn)PageTransformer接口，改變view的平移方向，便實(shí)現(xiàn)了如上效果。
下面我們貼出代碼，并理解一下整個(gè)實(shí)現(xiàn)過(guò)程。

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;
 }
}

首先，我們自定義一個(gè)繼承ViewPager的類(lèi)，我們重點(diǎn)關(guān)注一下swapTouchEvent()方法。這個(gè)方法是將MotionEvent事件的x坐標(biāo)換成y坐標(biāo)，而y坐標(biāo)換成x坐標(biāo)。當(dāng)然，這個(gè)是參考百度的，我們理解了就好。其實(shí)現(xiàn)實(shí)在妙不可言！

public class VerticalPageTransformer implements ViewPager.PageTransformer {
 @Override
 public void transformPage(View view, float position) {
  /**
   * 0 當(dāng)前界面
   * -1 前一頁(yè)
   * 1 后一頁(yè)
   */
  if (position >= -1 && position <= 1) {
   view.setTranslationX(view.getWidth() * -position);
   float yPosition = position * view.getHeight();
   view.setTranslationY(yPosition);
  }
 }
}

上部分代碼，實(shí)現(xiàn)了界面由原來(lái)的橫向平移到縱向平移的過(guò)程。其思路是這樣的，我畫(huà)了一個(gè)草圖（湊合看，畢竟連幼兒園都沒(méi)畢業(yè)，畫(huà)畫(huà)功底~~）

這張圖描述了我們手機(jī)的屏幕，我們知道ViewPager，默認(rèn)是把三個(gè)界面橫向著排一起的，現(xiàn)在我們將其改為縱向的。
如果手指向下滑動(dòng)，也就是第一個(gè)界面（綠色的），它將會(huì)進(jìn)入到我們的屏幕，然而當(dāng)前頁(yè)（紅色的）將退出屏幕，這是一套完整的流程，手指向上滑動(dòng)，則方向相反。

view.setTranslationX(view.getWidth() * -position);
 float yPosition = position * view.getHeight();
 view.setTranslationY(yPosition);

這是對(duì)ViewPager中所有子View的x,y坐標(biāo)進(jìn)行平移使它能夠排成縱向一排。代碼不難，就是對(duì)x,y坐標(biāo)的平移處理。例如：
綠色的：它的position為-1，對(duì)y坐標(biāo)而言,平移它的view高度。也就是-height，對(duì)x坐標(biāo)而言，則平移它的width*-position，那它就跑到紅色的頭上了，現(xiàn)在我們往下滑動(dòng)手指，它就進(jìn)入屏幕了。

總體來(lái)說(shuō)，大致實(shí)現(xiàn)就是這樣，只要理清思路便可以很快的理解。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: