Android 两个ViewPager的联动效果的实现

前言

以前做的项目,导航栏基本上是在顶部或者是在底部,但是最近开发的一款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);
      }
    });

大功搞成,看一下效果图

总结

一顿乱写,个人观点仅供参考,如有不对的地方,请直接直出

源码传送门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android viewpager自动轮播和小圆点联动效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 首先来看一下我们要做成的而效果: 主页面要显示一个viewpager自动轮播+小圆点联动的效果 : 废话不多说,直接上代码: 布局文件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro

  • Android中TabLayout+ViewPager实现tab和页面联动效果

    TabLayout+ViewPager实现tab和页面联动效果 xml中: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" an

  • Android 两个ViewPager的联动效果的实现

    前言 以前做的项目,导航栏基本上是在顶部或者是在底部,但是最近开发的一款app,刚开始拿到设计图也是很懵逼的,导航栏居然是在中间,what fuck!设计图如下: 导航栏在中间就会涉及到两个viewpager之间的联动,viewpager的高度适应等问题,现在来纪录一下是怎么解决问题的?希望给有同样需求的提供一定的帮助. (一)Viewpager 高度自适应 系统自动viewpager 不能设置wrap_content: 自定义viewpager,注意高度的设置否则底部空白的问题 网上也会有很多

  • android-wheel控件实现三级联动效果

    本文实例为大家分享了android wheel省市县三级联动效果,供大家参考,具体内容如下 在github上面有一个叫做 Android-wheel 的开源控件, 代码地址:https://github.com/maarek/android-wheel 源码下载地址:http://xiazai.jb51.net/201610/yuanma/AndroidCascadeMaster(jb51.net).rar 主界面布局 activity_main.xml <LinearLayout xmlns:

  • Android实现两个ScrollView互相联动的同步滚动效果代码

    本文实例讲述了Android实现两个ScrollView互相联动的同步滚动效果代码.分享给大家供大家参考,具体如下: 最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意思就是滑动其中的一个ScrollView另一个ScrollView也一同跟着滑动,要做到一起同步滑动.感觉在以后的项目开发中大家可能也会用到,绝对做个Demo分享出来,供大家一起学习,以便大家以后好用,觉的不错,有用的可以先收藏起来哦! 其实对于ScrollView,Android官方并没有提供相关

  • Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果

    之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载. ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等. 下面我们就展示下Vie

  • ViewPager顶部导航栏联动效果(标题栏条目多)

    如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给TableLayout添加了一个属性: app:tabMode="scrollable" 这个属性就是设置设置TableLayout可以滚动,看我滚动上面的标题栏: 这里我还给标题栏设置了几个附加的属性,让它显得更好看: <span style="white-space:pre&

  • Android 中基于TabLayout+ViewPager实现标签卡效果

    代码已经上传至Github:https://github.com/YanYoJun/ViewPagerDemo 先看效果 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andro

  • Android使用自定义PageTransformer实现个性的ViewPager动画切换效果

    1.概述 之前写过一篇博文:Android 自定义 ViewPager 打造千变万化的图片切换效果.有兄弟提出,ViewPager自带了一个setPageTransformer用于设置切换动画~ 本篇博文,将: 1.介绍如何使用setPageTransformer设置切换动画: 2.自定义PageTransformer实现个性的切换动画: 3.该方法在SDK11以下的版本不起作用,我们会对其做一定修改,让其向下兼容. 官方示例地址:http://developer.android.com/tra

  • Android仿考拉全局滑动返回及联动效果的实现方法

    前言 首次通过右滑来返回到上一个页面的操作是在 IOS7上出现.到目前android应用上支持这种操作的依然不多.分析其主要原因应该是android已有实体的返回按键,这样的功能变得不重要,但我觉得有这样的功能便于单手操作,能提升app的用户体验,特别是从ios转到android的用户.写这篇博文希望可以对大家有所帮助,希望自己的app上有滑动返回功能的可以参考下. 原理的简单描述 Android系统里有很多滑动相关的API和类,比如ViewDragHelper就是一个很好的滑动助手类.首先设置

  • Android实现ViewPager无限循环效果(二)

    本文实例为大家分享了Android实现ViewPager无限循环效果的第二种方式,供大家参考,具体内容如下 原理:在Adapter中将getCount设置为无限大 package com.xiaomai.myproject.demo; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.view.ViewGroup; import android.widget.ImageView;

随机推荐