Android 兩個ViewPager的聯(lián)動效果的實(shí)現(xiàn)

更新時間：2018年08月01日 09:43:24 作者：Abby代黎明

這篇文章主要介紹了Android 兩個ViewPager的聯(lián)動效果的實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

以前做的項(xiàng)目，導(dǎo)航欄基本上是在頂部或者是在底部，但是最近開發(fā)的一款app，剛開始拿到設(shè)計圖也是很懵逼的，導(dǎo)航欄居然是在中間，what fuck！設(shè)計圖如下：

導(dǎo)航欄在中間就會涉及到兩個viewpager之間的聯(lián)動，viewpager的高度適應(yīng)等問題，現(xiàn)在來紀(jì)錄一下是怎么解決問題的？希望給有同樣需求的提供一定的幫助。

（一）Viewpager 高度自適應(yīng)

系統(tǒng)自動viewpager 不能設(shè)置wrap_content；

自定義viewpager，注意高度的設(shè)置否則底部空白的問題

網(wǎng)上也會有很多相關(guān)的教程，我選擇了其中一個。具體代碼如下：

public class WrapContentHeightViewPager extends ViewPager {
  private int current;
  private int height = 0;
  private boolean scrollble = true;

  public WrapContentHeightViewPager(Context context) {
    super(context);
  }

  public WrapContentHeightViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    if (getChildCount() > current) {
      View child = getChildAt(current);
      child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
      int h = child.getMeasuredHeight();
      height = h;

    }
    heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }

  public void resetHeight(int current) {
    this.current = current;
    if (getChildCount() > current) {
      LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
      if (layoutParams == null) {
        layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, height);
      } else {
        layoutParams.height = height;
      }
      setLayoutParams(layoutParams);
    }
  }

  @Override
  public boolean onTouchEvent(MotionEvent ev) {
    if (!scrollble) {
      return true;
    }
    return super.onTouchEvent(ev);
  }

  @Override
  public boolean onInterceptTouchEvent(MotionEvent ev) {
    return scrollble && super.onInterceptTouchEvent(ev);
  }

  public boolean isScrollble() {
    return scrollble;
  }

  public void setScrollble(boolean scrollble) {
    this.scrollble = scrollble;
  }

}

（二）Viewpager 的聯(lián)動

聯(lián)動ViewPager的意思就是當(dāng)一個viewpager在滑動的時候，另外一個ViewPager也跟著滑動，而且兩者是同步的。

如果ViewPager有關(guān)于移動距離的回調(diào)接口，這事兒就好辦了，遺憾的是沒有，只有一個OnPageChangeListener，我試過在OnPageChangeListener中根據(jù)onPageScrolled(int position, float positionOffset, int positionOffsetPixels)的參數(shù)來做，但是失敗了。

沒辦法只有改造一下OnPageChangeListener，讓它可以實(shí)現(xiàn)兩個viewpager的聯(lián)動,難點(diǎn)在于對滑動的距離一個計算。

public class BaseLinkPageChangeListener implements ViewPager.OnPageChangeListener {

  private ViewPager linkViewPager;
  private ViewPager selfViewPager;

  private int pos;

  public BaseLinkPageChangeListener(ViewPager selfViewPager, ViewPager linkViewPager) {
    this.linkViewPager = linkViewPager;
    this.selfViewPager = selfViewPager;
  }

  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    int marginX = ((selfViewPager.getWidth() + selfViewPager.getPageMargin()) * position
        + positionOffsetPixels) * (linkViewPager.getWidth() + linkViewPager.getPageMargin()) / (
        selfViewPager.getWidth()
            + selfViewPager.getPageMargin());

    if (linkViewPager.getScrollX() != marginX) {
      linkViewPager.scrollTo(marginX, 0);
    }
  }

  @Override
  public void onPageSelected(int position) {
    this.pos = position;
  }

  @Override
  public void onPageScrollStateChanged(int state) {
    if (state == ViewPager.SCROLL_STATE_IDLE) {
      linkViewPager.setCurrentItem(pos);
    }
  }
}

（三）使用方法

xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <cn.yznu.gdmapoperate.ui.widget.WrapContentHeightViewPager
      android:id="@+id/body_vp"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />

    <com.flyco.tablayout.SlidingTabLayout
      android:id="@+id/tabLayout"
      android:layout_width="match_parent"
      android:layout_height="40dp"
      android:layout_centerHorizontal="true"
      android:layout_gravity="center_horizontal"
      android:background="@color/colorPrimaryDark"
      android:paddingBottom="10dp"
      app:tl_indicator_color="#000"
      app:tl_indicator_margin_top="10dp"
      app:tl_indicator_width_equal_title="true"
      app:tl_tab_space_equal="true"
      app:tl_textSelectColor="#f00"
      app:tl_textUnselectColor="#fff"
      app:tl_textsize="17sp" />

    <cn.yznu.gdmapoperate.ui.widget.WrapContentHeightViewPager
      android:id="@+id/header_vp"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />
  </LinearLayout>
</android.support.v4.widget.NestedScrollView>

activity中的配置

    bodyVp.addOnPageChangeListener(new BaseLinkPageChangeListener(bodyVp, headerVp) {
      @Override
      public void onPageSelected(int position) {
        super.onPageSelected(position);
        pageScrollToTop();
        bodyVp.resetHeight(position);//設(shè)置viewpager高度
        headerVp.resetHeight(position);
      }
    });
    headerVp.addOnPageChangeListener(new BaseLinkPageChangeListener(headerVp, bodyVp) {
      @Override
      public void onPageSelected(int position) {
        super.onPageSelected(position);
        tabLayout.onPageSelected(position);
      }

      @Override
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        super.onPageScrolled(position, positionOffset, positionOffsetPixels);
        tabLayout.onPageScrolled(position, positionOffset, positionOffsetPixels);
        bodyVp.resetHeight(position);
        headerVp.resetHeight(position);
      }
    });

大功搞成，看一下效果圖