首页 > 系统 > Android > 正文

简单实现android轮播图

2019-12-12 04:03:40
字体:
来源:转载
供稿:网友

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

目前测试图片为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;        }      }    };  }  /**   * 初始化数据 以及拿到数据后的各种设置   * 可以是网络地址 也可是项目图片数据   * @param imageUrls   */  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();  }  /**   * 设置标题   * @param titles   */  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);    }  }  /**   * 获取显示图片view   */  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);    }  }  /**   * 设置UI   */  private void setUI(){    adapter=new BannerAdapter();    viewPager.setAdapter(adapter);    viewPager.addOnPageChangeListener(onPageChangeLis);    viewPager.setCurrentItem(1);    handler.postDelayed(runnable,bannerTime);  }  /**   * viewPage改变监听   */  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;      }    }  };  /**   * 设置指示器和标题切换   * @param position   */  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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表