Android轮播图 _Android

愿君学长松，慎勿作桃李。这篇文章主要讲述Android轮播图相关的知识，希望能为你提供帮助。
轮播图是很常用的一个效果核心功能已经实现没有什么特殊需求自己没事研究的所以封装的不太好一些地方还比较糙为想要研究轮播图的同学提供个参考
目前测试图片为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上大神封装好的轮播图建议不太会的同学先搞清楚基本的逻辑在使用第三方库
【Android轮播图】https://github.com/youth5201314/banner
https://github.com/bingoogolapple/BGABanner-Android