文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

android ViewPager实现自动无限轮播和下方向导圆点

2022-06-06 04:17

关注

一、布局

小圆点形状的生成shape.xml文件

使用空心还是实心的把对应的注释去掉就可以了.


<?xml version="1.0" encoding="utf-8"?>
<shape
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval"
 android:useLevel="false">
 <!-- 实心圆 
  <solid android:color="#F00"/>
 -->
 <!-- 空心圆 
  <stroke
   android:width="1dp"
   android:color="@android:color/black"/>
 -->
 <size android:width="8dp"
 android:height="8dp"/>
</shape>

轮播的ViewPager和向导圆点的 布局文件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="200dp">
 <android.support.v4.view.ViewPager
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/hometab_vp"
  android:layout_width="match_parent"
  android:layout_height="200dp">
 </android.support.v4.view.ViewPager>
 <RelativeLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:layout_centerHorizontal="true"
  android:layout_marginBottom="20dp"
  >
  <LinearLayout
   android:id="@+id/ll_dot"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal">
   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/shape_guide_dot_default"/>
   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:src="@drawable/shape_guide_dot_default"/>
   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:src="@drawable/shape_guide_dot_default"/>
   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:src="@drawable/shape_guide_dot_default"/>
   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:src="@drawable/shape_guide_dot_default"/>
  </LinearLayout>
  <ImageView
   android:id="@+id/dot_red"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/shape_guide_dot_solid"/>
 </RelativeLayout>
</RelativeLayout>

二,代码

左右轮播的ViewPager的Adapter



class MyLoopPagerAdapter extends PagerAdapter {
 private int[] welcomes;
 private Context mContext;
 public MyLoopPagerAdapter(int[] welcomes, Context context) {
  this.welcomes = welcomes;
  mContext = context;
 }
 //  //返回实际要显示的图片数+2
 @Override
 public int getCount() {
  return welcomes.length + 2;
 }
 @Override
 public boolean isViewFromObject(View view, Object object) {
  return view == object;
 }
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  ImageView iv = new ImageView(mContext);
  int realPosition = (position - 1 + welcomes.length) % welcomes.length;
//    设置背景图片
  iv.setBackgroundResource(welcomes[realPosition]);
  container.addView(iv);
  return iv;
 }
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  //注意不要remove 否则容易闪屏
  //     container.removeView((ImageView) object);
 }
}

添加viewpager的addOnPageChangeListener



 class MyLoopPageChangeListener implements ViewPager.OnPageChangeListener {
  private ViewPager mViewPager;
  private LinearLayout mLlDot;
  private ImageView dotRed;
  private Handler mHandler;
  private Runnable mRunnable;
  
  public MyLoopPageChangeListener(ViewPager viewPager, LinearLayout llDot, ImageView dotRed) {
   mViewPager = viewPager;
   this.mLlDot = llDot;
   this.dotRed = dotRed;
   initAutoLoop();
  }
  
  private void initAutoLoop() {
   mHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
//     LogUtils.e("have received a msg");
     int curindex = (mViewPager.getCurrentItem() + 1) % (welcomes.length + 2);
     mViewPager.setCurrentItem(curindex, true);
    }
   };
   mRunnable = new Runnable() {
    @Override
    public void run() {
     Message message = new Message();
     mHandler.sendMessage(message);
    }
   };
//   开始 轮播
   mHandler.postDelayed(mRunnable, 3 * 1000);
  }
  
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//   获取到 真正图片所在的位置.
   int realPosition = (position - 1 + welcomes.length) % welcomes.length;
//   获取到红点 的 layout 参数
   RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) dotRed.getLayoutParams();
//   计算两个点之间的距离
   int dotDis = mLlDot.getChildAt(1).getLeft() - mLlDot.getChildAt(0).getLeft();
//   计算总共的左边距
   int totalLeftMargin = (welcomes.length - 1) * dotDis;
   // 计算滑动的距离
   float dis = realPosition * dotDis + positionOffset * dotDis;
//   设置 margin_left 的值,
//   如果 position 等于 0 说明正在从第一个图片想最后一个滑动,那么保持 向导的状态为不动
   if (position == 0) {
    params.leftMargin = 0;
//    如果滑动距离超过了 最大边距,那么将最大边距赋值给 红点的参数左边距
   } else if (dis > totalLeftMargin) {
    params.leftMargin = totalLeftMargin;
//    正常情况 就将滑动的距离 直接赋值
   } else {
    params.leftMargin = (int) dis;
   }
//   设置红点的 参数
   dotRed.setLayoutParams(params);
//    在position4左滑且左滑positionOffset百分比接近1时,偷偷替换为position1(原本会滑到position5)
   if (position == welcomes.length && positionOffset > 0.99) {
    mViewPager.setCurrentItem(1, false);
//    在position1右滑且右滑百分比接近0时,偷偷替换为position4(原本会滑到position0)
   } else if (position == 0 && positionOffset < 0.01) {
    mViewPager.setCurrentItem(welcomes.length, false);
   }
  }
  @Override
  public void onPageSelected(int position) {
  }
  @Override
  public void onPageScrollStateChanged(int state) {
   switch (state) {
    case 0://什么都没做 空闲状态
     break;
    case 1://正在滑动:
//     手动滑动 取消自动滑动
     mHandler.removeCallbacks(mRunnable);
     break;
    case 2://滑动完毕:
//     继续 自动滑动
     mHandler.postDelayed(mRunnable, 3 * 1000);
     break;
   }
  }
 }

// 主要的算法参考下图 
int realPosition = (position - 1 + welcomes.length) % welcomes.length; 

由下图可以发现,应该初始化ViewPager.setCurrentItem(1);才能从预设的第一页开始播放。

您可能感兴趣的文章:Android首页无限轮播功能的示例代码Android使用viewpager实现自动无限轮播图android实现banner轮播图无限轮播效果Android viewpager无限轮播获取网络图片功能Android图片无限轮播的实现代码Android仿京东快报无限轮播效果


免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 资料下载
  • 历年真题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯