Android实现双层ViewPager嵌套

1. 需求描述

有这样一个需求,用ViewPager实现图片滑动,其下方有一个tab,每一个tab的标签对应一组图片,在ViewPager中的图片切换到下一组时,tab的标签也要随之切换。

2. 解决思路

看到上面的需求我首先想到使用两层ViewPager实现,每组图片使用一个ViewPager,最外层再使用一个ViewPager + TabLayout实现联动切换,在内层的ViewPager做好事件拦截即可。

然而按照这样的思路做出来后发现快速滑动时总会跳过内层的ViewPager。后来一想直接使用一个ViewPager,当当前组的图片展示完后手动将TabLayout的标签切换到下一个不就好了。按照这样的思路,完美实现需求。并将代码封装,供有需要的同学直接拿来使用。源码地址:https://github.com/talonerain/db-viewpager-image

3. 效果展示

apk下载地址 https://github.com/talonerain/db-viewpager-image/blob/master/demo/demo-release.apk

4. 使用方法

1. 在project的gradle中添加:

	allprojects {
		repositories {
			maven { url 'https://www.jitpack.io' }
		}
	}

2. 在moudle的gradle中添加:

compile 'com.github.talonerain:db-viewpager-image:v1.0.0'

3. 在xml布局文件中引入:

<com.lsy.view.DbVPager
  android:id="@+id/db_vpager"
  android:layout_width="match_parent"
  android:layout_height="400dp" />

4. 设置tab位置(在图片上方还是下方)

db_vpager.setBarPosition(DbVPager.BarPositon.BOTTOM);

5. 设置图片数据源及分组名称

List<String> imgList1 = new ArrayList<>();
imgList1.add(url1);
imgList1.add(url2);
ImgGroups group1 = new ImgGroups(groupName1, imgList1);

List<String> imgList2 = new ArrayList<>();
imgList2.add(url3);
imgList2.add(url4);
ImgGroups group2 = new ImgGroups(groupName2, imgList2);

List<ImgGroups> data = new ArrayList<>();
data.add(group1);
data.add(group2);

db_vpager.setSource(data);	

6. 切换回调

会回调当前TabLayout标签的位置和显示文字。

db_vpager.addTabChangeListenr(new DbVPager.DbCallbackListener() {
   @Override
   public void callback(int index, String text) {
    tv_showText.setText("当前分类:" + text);
   }
  });

7. 显示控件

db_vpager.show();

5. 代码解析

1. 控件布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#ffffff">

 <android.support.design.widget.TabLayout
  android:id="@+id/tab1"
  android:layout_width="match_parent"
  android:layout_height="35dp"
  app:tabMode="fixed"
  app:tabGravity="fill"
  android:layout_alignParentTop="true"/>

 <android.support.design.widget.TabLayout
  android:id="@+id/tab2"
  android:layout_width="match_parent"
  android:layout_height="35dp"
  app:tabMode="fixed"
  app:tabGravity="fill"
  android:layout_alignParentBottom="true"/>

 <android.support.v4.view.ViewPager
  android:id="@+id/viewPager"
  android:layout_above="@+id/tab2"
  android:layout_below="@+id/tab1"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

</RelativeLayout>

因为tab的位置可能在上也可能在下,所以我在上下各放置了一个TabLayout,根据设置显示哪个,通过下面代码获取tab,不必在逻辑代码中关心显示的是哪个。

private TabLayout getTab() {
  return tab1.getVisibility() == VISIBLE ? tab1 : tab2;

2. 数据解析

在使用方法的第5步可以看到,控件的数据源是这样的一个list:

List<ImgGroups> mDataSource;

ImgGroups类型:

public class ImgGroups {
 public String groupName; //要显示的图片分组名称
 public List<String> imgList; //图片数组

 public ImgGroups(String name, List<String> imgList) {
  this.groupName = name;
  this.imgList = imgList;
 }
}

对于数据源我们需要解析成两部分,一部分是所有的图片的list,用来显示在ViewPager上,这个list是不关心分类的,另一部分是需要切换tab的位置,即当图片滑到哪个位置时,tab需要切换标签,我们称为index数组。代码如下:

private void initData() {
  indexList = new int[mDataSource.size()]; //index数组
  imgList = new ArrayList<>(); //图片list
  Iterator<ImgGroups> iterator = mDataSource.iterator();
  int i = 0;
  while (iterator.hasNext()) {
   //遍历数据源list
   ImgGroups item = iterator.next();
   TabLayout.Tab tab = getTab().newTab(); //每组图片对应一个tab
   if (null != item && null != item.imgList && item.imgList.size() > 0) {
    //当前组图片滑动完时即需要切换tab的位置
    if (i > 0) {
     int temp = indexList[i - 1];
     indexList[i++] = temp + item.imgList.size();
    } else {
     indexList[i++] = item.imgList.size();
    }
    String text = TextUtils.isEmpty(item.groupName) ? "null" : item.groupName;

    tab.setText(text); //设置当前tab文本
    getTab().addTab(tab);

    imgList.addAll(item.imgList);
   }
  }
 }

3. ViewPager代码

在ViewPager中我们需要判断在滑动到哪个图片时需要切换tab标签,要得到这个位置,还需要判断ViewPager的滑动方向,因为左滑和右滑时目标位置是不同的,具体区别是当左滑时当前图片是该组的最后一张时切换tab,当右滑时当前图片是该组的第一张时切换tab。这部分代码不大好描述,大家可以自己分析下:

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   @Override
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   }

   @Override
   public void onPageSelected(int position) {
    if (vpPosition > position) {
     isToLeft = true; //左滑
    } else if(vpPosition<position) {
     isToLeft = false; //右滑
    }
    vpPosition = position;

    if (!tabScrolling) {
     if (isToLeft) {
      int index = Arrays.binarySearch(indexList, position + 1);
      if (index >= 0) {
       TabLayout.Tab tab = getTab().getTabAt(index);
       if (tab != null) {
        if (mListener != null) {
         mListener.callback(tab.getPosition(), tab.getText().toString());
        }
        vpScrolling = true; //阻止TabLayout切换时切换ViewPager的代码
        tab.select();
        vpScrolling = false;
       }
      }
     } else {
      int index = Arrays.binarySearch(indexList, position);
      if (index >= 0) {
       TabLayout.Tab tab = getTab().getTabAt(index + 1);
       if (tab != null) {
        if (mListener != null) {
         mListener.callback(tab.getPosition(), tab.getText().toString());
        }
        vpScrolling = true;
        tab.select();
        vpScrolling = false;
       }
      }
     }
    }
    vpScrolling = false;
   }
   @Override
   public void onPageScrollStateChanged(int state) {

   }
  });

4. TabLayout代码

在TabLayout中我们需要确定当切换标签时ViewPager显示该组的第一张图片,代码如下:

getTab().addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
    if (mListener != null) {
     mListener.callback(tab.getPosition(), tab.getText().toString());
    }
    if (!vpScrolling) {
     int index = tab.getPosition();
     int pos;
     if (index == 0) {
      pos = 0;
     } else {
      //获取前面图片数量即目的position
      pos = indexList[tab.getPosition() - 1];
     }
     tabScrolling = true; //阻止ViewPager滑动时切换tab的代码
     viewPager.setCurrentItem(pos);
     tabScrolling = false;
    }
   }

   @Override
   public void onTabUnselected(TabLayout.Tab tab) {

   }

   @Override
   public void onTabReselected(TabLayout.Tab tab) {

   }
  });

5. 容错处理

上面代码中会发现有两个标记变量,vpScrolling和tabScrolling,这两个是做什么的呢?如果只是单独地设置ViewPager和TabLayout你会发现一个问题,就是在ViewPager中设置TabLayout切换标签时,TabLayout中的代码反过来又会使ViewPager滑动,造成显示不准,同理在TabLayout中滑动ViewPager也一样,为此我们设置两个标记变量,保证TabLayout和ViewPager其中一个切换时不影响到另一个。

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

(0)

相关推荐

  • 仿网易新闻客户端头条ViewPager嵌套实例

    要点: 1.重写组件public boolean onInterceptTouchEvent(MotionEvent event)方法 2.正确使用requestDisallowInterceptTouchEvent(boolean flag)方法 关于以上两个方法,请大家多看看相关介绍,这里就不在叙述了^_^ 接下来上例子: 1.外层ViewPager布局 (假定文件名为viewpager_layout.xml) 复制代码 代码如下: <?xml version="1.0" e

  • Android解决viewpager嵌套滑动冲突并保留侧滑菜单功能

    重写子pagerview的dispatchTouchEvent方法,在返回前添加一句getParent().requestDisallowInterceptTouchEvent(true)中断掉事件的传递,类如下 public class SupperViewPager extends ViewPager { private int screenWidth;//屏幕宽度 public SupperViewPager(Context context) { super(context); } pub

  • Android实现双层ViewPager嵌套

    1. 需求描述 有这样一个需求,用ViewPager实现图片滑动,其下方有一个tab,每一个tab的标签对应一组图片,在ViewPager中的图片切换到下一组时,tab的标签也要随之切换. 2. 解决思路 看到上面的需求我首先想到使用两层ViewPager实现,每组图片使用一个ViewPager,最外层再使用一个ViewPager + TabLayout实现联动切换,在内层的ViewPager做好事件拦截即可. 然而按照这样的思路做出来后发现快速滑动时总会跳过内层的ViewPager.后来一想直

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

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

  • Android App中ViewPager所带来的滑动冲突问题解决方法

    叙述 滑动冲突可以说是日常开发中比较常见的一类问题,也是比较让人头疼的一类问题,尤其是在使用第三方框架的时候,两个原本完美的控件,组合在一起之后,忽然发现整个世界都不好了. 关于滑动冲突 滑动冲突分类: 滑动冲突,总的来说就是两类. 1.同方向滑动冲突 比如ScrollView嵌套ListView,或者是ScrollView嵌套自己 2.不同方向滑动冲突 比如ScrollView嵌套ViewPager,或者是ViewPager嵌套ScrollView,这种情况其实很典型.现在大部分应用最外层都是

  • Android开发使用Activity嵌套多个Fragment实现横竖屏切换功能的方法

    本文实例讲述了Android开发使用Activity嵌套多个Fragment实现横竖屏切换功能的方法.分享给大家供大家参考,具体如下: 一.上图 二.需求 近期项目遇到个横竖屏切换的问题,较为复杂,在此记之. 1.Activity中竖屏嵌套3个Fragment,本文简称竖屏FP1,FP2,FP3. 2.其中竖屏FP1与FP2可以切换为横屏的FL1,FL2,即竖屏FP1切换到对应的横屏FL1,竖屏FP2对应切换到横屏FL2. 3.FP3不允许横竖屏切换. 4.竖屏FP1,FP2,FP3用ViewP

  • Android编程实现ViewPager多页面滑动切换及动画效果的方法

    本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法.分享给大家供大家参考,具体如下: 一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了,接下来我们就来实现它. 二.在开始前,我们先要认识一个控件,ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 这个附加包是and

  • 双层ajax嵌套(可多层)用法实例

    本文实例讲述了双层ajax嵌套(可多层)用法.分享给大家供大家参考.具体如下: function addbus() { //清除a标签中的所有元素 // $("#s1").remove(); var chooseIdTypeOne =$("#chooseIdTypeOne2").find("option:selected").val(); $.ajax({ url : "/ftcms/changeProject.do?getOrigin

  • Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

    前言 在谷歌发布Android Design Support Library之前,app底部tab布局的实现方法就有很多种,其中有RadioGroup+FrameLayout.TabHost+Fragment.FragmentPagerAdapter+ViewPager等方法,虽然这些方法虽然能达到同样的效果,但我个人总觉得有些繁琐.然而,Google在2015的IO大会上,给开发者们带来了全新的Android Design Support Library,里面包含了许多新控件,这些新控件有许多

  • Android中的ViewPager视图滑动切换类的入门实例教程

    ViewPager引入示例 首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能. 效果图: 实现了三个view间的相互滑动. 第一个VIEW向第二个VIEW滑动.第二个VIEW向第三个VIEW滑动 一.新建项目,引入ViewPager控件 ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 1.在主布局文件里加入 <RelativeLayout xmlns:android="http://schemas

随机推荐