文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

简单实现android轮播图

2022-06-06 04:41

关注

轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考

目前测试图片为mipmap中的图片 没有写从网络加载图片 可自行根据需求在getShowView()方法中修改

1.定时切换

通过handle延时发送通知改变界面 然后在切换viewpage的界面之后 再次发送此延时通知 就ok咯 还可以通过timer定时器实现

2.无限轮播效果

如果我们只是在自动轮播到最后一页 然后进行判断让切换到第一页 这样是可以实现轮播的效果
但是 有两个问题

切换从最后一页切换到第一页的时候有一个很明显的回滚效果 不是我们想要的 当我们手动滑动的时候 在第一页和最后一页的时候 无法继续左右滑动 因为已经没有下一页了

先看张图(偷来的)


不得不说这位兄弟的图p的很形象 简直完美

虽然看到的是三张图 实际上是五张 数据多的时候也按照这种方式添加数据 当view4的时候自动切换到view5时 进行判断让到切换到view2 这样造成的感觉就是最后一张下来是第一张
我们利用viewpage自带的方法切换界面立即切换没有滚动效果 当图片一样的时候是看不出图片变化的
setCurrentItem(int item, boolean smoothScroll)

第二个参数设置false 界面切换的时候无滚动效果 默认true

好啦 接下来看代码


public class BannerViewPager extends FrameLayout {
  private ViewPager viewPager;
  private TextView tvTitle;
  private LinearLayout indicatorGroup;
  private BannerAdapter adapter;
  private List<String> titles;//集合
  private List imageUrls;//图片数据
  private List<View> views;//轮播图显示
  private ImageView [] tips;//保存显示的小圆点
  private int count;//保存imageUrls的总数
  private int bannerTime=2500;//轮播图的间隔时间
  private int currentItem=0;//轮播图的当前选中项
  private long releaseTime = 0;//保存触发时手动滑动的时间 进行判断防止滑动之后立即轮播
  private final int START=10;
  private final int STOP=20;
  private Context context;
  private Handler handler;
  private final Runnable runnable=new Runnable() {
    @Override
    public void run() {
      long now=System.currentTimeMillis();
      if (now-releaseTime>bannerTime-500){
        handler.sendEmptyMessage(START);
      }else{
        handler.sendEmptyMessage(STOP);
      }
    }
  };
  public BannerViewPager(Context context) {
    super(context);
  }
  public BannerViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context=context;
    titles=new ArrayList<>();
    titles.add("1");
    titles.add("2");
    titles.add("3");
    imageUrls=new ArrayList();
    views=new ArrayList<>();
    init(context,attrs);
  }
  private void init(final Context context, AttributeSet attrs){
    View view= LayoutInflater.from(context).inflate(R.layout.layout_banner,this);
    viewPager= (ViewPager) view.findViewById(R.id.banner_view_pager);
    tvTitle= (TextView) view.findViewById(R.id.banner_title);
    indicatorGroup= (LinearLayout) view.findViewById(R.id.banner_indicator);
    handler=new Handler(){
      @Override
      public void handleMessage(Message msg) {
        super.handleMessage(msg);
        switch (msg.what){
          case START:
            viewPager.setCurrentItem(currentItem+1);
            handler.removeCallbacks(runnable);
            handler.postDelayed(runnable,bannerTime);
            break;
          case STOP:
            releaseTime=0;
            handler.removeCallbacks(runnable);
            handler.postDelayed(runnable,bannerTime);
            break;
        }
      }
    };
  }
  
  public void setData(List<?> imageUrls){
    this.imageUrls.clear();
    this.count=imageUrls.size();
    this.imageUrls.add(imageUrls.get(count-1));
    this.imageUrls.addAll(imageUrls);
    this.imageUrls.add(imageUrls.get(0));
    initIndicator();
    getShowView();
    setUI();
  }
  
  public void setTitles(List<String> titles){
    this.titles.clear();
    this.titles.addAll(titles);
  }
  
  private void initIndicator(){
    tips=new ImageView[count];
    LinearLayout.LayoutParams layoutParams = new LinearLayout.
        LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    layoutParams.height=10;
    layoutParams.width=10;
    layoutParams.leftMargin = 5;// 设置点点点view的左边距
    layoutParams.rightMargin = 5;// 设置点点点view的右边距
    for (int i=0;i<count;i++){
      ImageView imageView=new ImageView(context);
      if (i == 0) {
        imageView.setBackgroundResource(R.drawable.shape_circle_red);
      } else {
        imageView.setBackgroundResource(R.drawable.shape_circle_white);
      }
      tips[i] = imageView;
      indicatorGroup.addView(imageView, layoutParams);
    }
  }
  
  private void getShowView(){
    for (int i=0;i<imageUrls.size();i++){
      ImageView imageView=new ImageView(context);
      imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
      if (imageUrls.get(i) instanceof String){
      }else{
        imageView.setImageResource((Integer) imageUrls.get(i));
      }
      views.add(imageView);
    }
  }
  
  private void setUI(){
    adapter=new BannerAdapter();
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(onPageChangeLis);
    viewPager.setCurrentItem(1);
    handler.postDelayed(runnable,bannerTime);
  }
  
  private ViewPager.OnPageChangeListener onPageChangeLis=new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    @Override
    public void onPageSelected(int position) {
      //计算当前页的下标
      int max = views.size() - 1;
      int temp = position;
      currentItem = position;
      if (position == 0) {
        currentItem = max - 1;
      } else if (position == max) {
        currentItem = 1;
      }
      temp = currentItem - 1;
      setIndicatorAndTitle(temp);
    }
    @Override
    public void onPageScrollStateChanged(int state) {
      currentItem=viewPager.getCurrentItem();
      switch (state) {
        case 0:
          //Log.e("aaa","=====静止状态======");
          if (currentItem == 0) {
            viewPager.setCurrentItem(count, false);
          } else if (currentItem == count + 1) {
            viewPager.setCurrentItem(1, false);
          }
          break;
        case 1:
//        Log.e("aaa","=======手动拖拽滑动时调用====");
          releaseTime = System.currentTimeMillis();
          if (currentItem == count + 1) {
            viewPager.setCurrentItem(1, false);
          } else if (currentItem == 0) {
            viewPager.setCurrentItem(count, false);
          }
          break;
        case 2:
//        Log.e("aaa","=======自动滑动时调用====");
          break;
      }
    }
  };
  
  private void setIndicatorAndTitle(int position){
    tvTitle.setText(titles.get(position));
    for (int i=0;i<tips.length;i++){
      if (i==position){
        tips[i].setBackgroundResource(R.drawable.shape_circle_red);
      }else{
        tips[i].setBackgroundResource(R.drawable.shape_circle_white);
      }
    }
  }
  
  class BannerAdapter extends PagerAdapter{
    @Override
    public int getCount() {
      return views.size();
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
      return view==object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      container.addView(views.get(position));
      return views.get(position);
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View) object);
    }
  }
}

Activity代码


BannerViewPager banner= (BannerViewPager) findViewById(R.id.banner);
    List<Integer> imageUrl=new ArrayList<>();
    imageUrl.add(R.mipmap.aiyo);
    imageUrl.add(R.mipmap.dipang1);
    imageUrl.add(R.mipmap.ic_launcher);
    banner.setData(imageUrl);

最后提供两个github上大神封装好的轮播图

建议不太会的同学先搞清楚基本的逻辑在使用第三方库

https://github.com/youth5201314/banner
https://github.com/bingoogolapple/BGABanner-Android

您可能感兴趣的文章:Android ViewPager实现轮播图效果Android自定义控件实现简单的轮播图控件Android自定义控件实现优雅的广告轮播图Android实现ViewPage轮播图效果Android实现炫酷轮播图效果Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件Android如何使用RecyclerView打造首页轮播图Android开发在轮播图片上加入点击事件的方法Android实现轮播图无限循环效果flutter实现轮播图效果


阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯