Android ViewPager导航小圆点实现无限循环效果

 更新时间:2017年08月21日 09:18:39   作者:flowerff  
这篇文章主要为大家详细介绍了Android ViewPager导航小圆点实现无限循环效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝、头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能。

其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了。另外一点需要注意的是,这里的数据源+2,而导航小圆点却比数据源少2,这样在无限循环的时候,小圆点的切换就不好办了。本人最开始也是写逻辑在onPageSelected()里面判断条件,总感觉挺麻烦的,有没有更好的实现方式呢。答案是肯定的。只需将小圆点也首尾各家一个,并设置为invisible不就好了?

我的代码实现如下:

xml布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

  <android.support.v4.view.ViewPager
    android:id="@+id/vp_homepage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ></android.support.v4.view.ViewPager>

  <LinearLayout
    android:id="@+id/ll_dots_homepage_top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="8dp"
    android:gravity="center"
    android:orientation="horizontal">


    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:visibility="invisible"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:src="@drawable/dots"/>

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:clickable="true"
      android:padding="5dp"
      android:visibility="invisible"
      android:src="@drawable/dots"/>
  </LinearLayout>

</RelativeLayout>

界面实现:

public class HomePageFragment extends BaseFragment {

  private View view;
  private ViewPager mViewPager;//顶部信息推荐栏
  private MyViewPagerAdapter mViewPagerAdapter;
  private LinearLayout ll_dots_homepage_top;//顶部信息推荐栏导航点
  private int GUIDE_NUMBER = 4; //顶部信息推荐栏的数量
  private ImageView[] dotImages; //顶部信息推荐栏引导小圆点
  private int dotCurrentIndex; //顶部信息推荐栏小圆点偏移量
  private MyOnPageChangeListener mOnPageChangeListener;

  private List<View> mListDataViewPage;
  private Context context;

  @Override
  public void onAttach(Context context) {
    super.onAttach(context);
    this.context = context;
  }

  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable
      Bundle savedInstanceState) {
    view = inflater.inflate(R.layout.frament_homepage, container, false);

    initData();
    initView();

    return view;
  }

  /**
   * 初始化一些基础数据
   */
  private void initData() {
    if (mListDataViewPage != null) {
      mListDataViewPage.clear();
      mListDataViewPage = null;
    } else {
      mListDataViewPage = new ArrayList<>();
      // 为了实现无限循环,首位两张图片都是重复的
      int[] resource = new int[]{
          R.drawable.test_viewpager_homepage_4, R.drawable.test_viewpager_homepage_1, R.drawable.test_viewpager_homepage_2, R
          .drawable.test_viewpager_homepage_3, R.drawable.test_viewpager_homepage_4,R.drawable.test_viewpager_homepage_1,};

      for (int i = 0; i < 6; i++) {
        WeakReference<Bitmap> bitmao = new WeakReference<Bitmap>(BitmapFactory
            .decodeResource(getResources(), resource[i]));
        ImageView imageView = new ImageView(context);
        imageView.setImageBitmap(bitmao.get());
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        mListDataViewPage.add(imageView);
      }

    }

  }

  /**
   * 初始化底部推信息推荐栏引导小圆点View
   */
  private void initDots() {
    dotImages = new ImageView[mListDataViewPage.size()];
    for (int i = 0; i < mListDataViewPage.size(); i++) {
      dotImages[i] = (ImageView) ll_dots_homepage_top.getChildAt(i);
      dotImages[i].setEnabled(false);
    }
    **//将第一个小圆点设置为高亮,这里的第一个偏移量是1,不是0
    dotImages[1].setEnabled(true);
    dotCurrentIndex = 1;**
  }

  /**
   * initView
   */
  private void initView() {
    findLayout();
    findView();
  }

  /**
   * findLayout
   */
  private void findLayout() {
    ll_dots_homepage_top = (LinearLayout) view.findViewById(R.id.ll_dots_homepage_top);
    initDots();

  }

  /**
   * 初始化控件
   */
  private void findView() {
    mViewPager = (ViewPager) view.findViewById(R.id.vp_homepage);

    mViewPagerAdapter = new MyViewPagerAdapter(mListDataViewPage);
    mOnPageChangeListener = new MyOnPageChangeListener();
    mViewPager.setAdapter(mViewPagerAdapter);
    mViewPager.setOnPageChangeListener(mOnPageChangeListener);
    **mViewPager.setCurrentItem(1,false); //默认选中第二张图片**
  }

  private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

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

    }

    @Override
    public void onPageSelected(int position) {
      if (position < 0 || position > mListDataViewPage.size() || position == dotCurrentIndex) {
        return;
      }

      if ( mListDataViewPage.size() > 1) { //多于1,才会循环跳转
        if ( position < 1) { //首位之前,跳转到末尾(N)
          position = 4;
          mViewPager.setCurrentItem(position,false);
        } else if ( position > 4) { //末位之后,跳转到首位(1)
          position = 1;
          mViewPager.setCurrentItem(position,false); //false:不显示跳转过程的动画

        }else {
          dotImages[dotCurrentIndex].setEnabled(false);
          dotImages[position].setEnabled(true);
          dotCurrentIndex = position;
        }
      }


    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
  }
}

注意代码中加粗的代码。初始的小圆点选中和ViewPager的position选中。

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

相关文章

  • android命令行模拟输入事件(文字、按键、触摸等)

    android命令行模拟输入事件(文字、按键、触摸等)

    这篇文章主要给大家介绍了关于android命令行模拟输入事件,例如文字、按键、触摸等的相关资料,文中通过示例代码介绍的非常详细,对各位android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Android仿QQ左滑删除置顶ListView操作

    Android仿QQ左滑删除置顶ListView操作

    这篇文章主要为大家详细介绍了Android仿QQ左滑删除置顶ListView操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Android AMS启动详解

    Android AMS启动详解

    这篇文章主要介绍了Android AMS启动的相关资料,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下
    2021-03-03
  • ImageSwitcher图像切换器的使用实例

    ImageSwitcher图像切换器的使用实例

    这篇文章主要为大家详细介绍了ImageSwitcher图像切换器的使用实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Android仿QQ长按删除弹出框功能示例

    Android仿QQ长按删除弹出框功能示例

    对于列表来说,如果想操作某个列表项,一般会采用长按弹出菜单的形式,默认的上下文菜单比较难看,而QQ的上下文菜单就人性化多了,整个菜单给用户一种气泡弹出的感觉,而且会显示在手指按下的位置,接下来通过本文给大家分享Android仿QQ长按删除弹出框功能,一起看看吧
    2017-03-03
  • Android RecyclerView添加FootView和HeadView

    Android RecyclerView添加FootView和HeadView

    这篇文章主要介绍了Android RecyclerView添加FootView和HeadView的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Mac中配置gradle环境及使用android studio打包jar包与arr包的方法

    Mac中配置gradle环境及使用android studio打包jar包与arr包的方法

    这篇文章主要给大家介绍了关于在Mac中配置gradle环境,以及使用android studio打包jar包与arr包的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • Android 开发环境配置问题

    Android 开发环境配置问题

    手机软件开发IDE,本人在同时使用 Eclipse 和 Netbeans 后,感觉 Eclipse 更适合自己
    2012-04-04
  • android蓝牙简单开发示例教程

    android蓝牙简单开发示例教程

    大家好,本篇文章主要讲的是android蓝牙简单开发示例教程,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下
    2021-12-12
  • Android编程学习之抽象类AbsListView用法实例分析

    Android编程学习之抽象类AbsListView用法实例分析

    这篇文章主要介绍了Android编程学习之抽象类AbsListView用法,较为详细的分析了抽象类AbsListView的功能、结构、定义及使用注意事项等,需要的朋友可以参考下
    2015-10-10

最新评论