Android 兩個ViewPager的聯動效果的實現

2019-12-12 00:37:58

字體：大中小

來源：轉載

供稿：網友

前言

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

導航欄在中間就會涉及到兩個viewpager之間的聯動，viewpager的高度適應等問題，現在來紀錄一下是怎么解決問題的？希望給有同樣需求的提供一定的幫助。

（一）Viewpager 高度自適應

系統自動viewpager 不能設置wrap_content；

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

網上也會有很多相關的教程，我選擇了其中一個。具體代碼如下：

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 的聯動

聯動ViewPager的意思就是當一個viewpager在滑動的時候，另外一個ViewPager也跟著滑動，而且兩者是同步的。

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

沒辦法只有改造一下OnPageChangeListener，讓它可以實現兩個viewpager的聯動,難點在于對滑動的距離一個計算。

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);//設置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);      }    });

大功搞成，看一下效果圖