簡單實(shí)現(xiàn)android輪播圖

更新時(shí)間：2017年01月11日 08:54:41 作者：S丶black

這篇文章主要為大家詳細(xì)介紹了android輪播圖的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

輪播圖是很常用的一個(gè)效果核心功能已經(jīng)實(shí)現(xiàn) 沒有什么特殊需求自己沒事研究的所以封裝的不太好一些地方還比較糙為想要研究輪播圖的同學(xué)提供個(gè)參考

目前測試圖片為mipmap中的圖片沒有寫從網(wǎng)絡(luò)加載圖片可自行根據(jù)需求在getShowView()方法中修改

1.定時(shí)切換

通過handle延時(shí)發(fā)送通知改變界面然后在切換viewpage的界面之后再次發(fā)送此延時(shí)通知就ok咯還可以通過timer定時(shí)器實(shí)現(xiàn)

2.無限輪播效果

如果我們只是在自動(dòng)輪播到最后一頁然后進(jìn)行判斷讓切換到第一頁這樣是可以實(shí)現(xiàn)輪播的效果
但是有兩個(gè)問題

切換從最后一頁切換到第一頁的時(shí)候有一個(gè)很明顯的回滾效果不是我們想要的
當(dāng)我們手動(dòng)滑動(dòng)的時(shí)候在第一頁和最后一頁的時(shí)候無法繼續(xù)左右滑動(dòng) 因?yàn)橐呀?jīng)沒有下一頁了

先看張圖（偷來的）

不得不說這位兄弟的圖p的很形象簡直完美

雖然看到的是三張圖實(shí)際上是五張數(shù)據(jù)多的時(shí)候也按照這種方式添加數(shù)據(jù) 當(dāng)view4的時(shí)候自動(dòng)切換到view5時(shí) 進(jìn)行判斷讓到切換到view2 這樣造成的感覺就是最后一張下來是第一張
我們利用viewpage自帶的方法切換界面立即切換沒有滾動(dòng)效果當(dāng)圖片一樣的時(shí)候是看不出圖片變化的
setCurrentItem(int item, boolean smoothScroll)

第二個(gè)參數(shù)設(shè)置false 界面切換的時(shí)候無滾動(dòng)效果默認(rèn)true

好啦接下來看代碼

public class BannerViewPager extends FrameLayout {

 private ViewPager viewPager;
 private TextView tvTitle;
 private LinearLayout indicatorGroup;
 private BannerAdapter adapter;
 private List<String> titles;//標(biāo)題集合
 private List imageUrls;//圖片數(shù)據(jù)
 private List<View> views;//輪播圖顯示
 private ImageView [] tips;//保存顯示的小圓點(diǎn)
 private int count;//保存imageUrls的總數(shù)
 private int bannerTime=2500;//輪播圖的間隔時(shí)間
 private int currentItem=0;//輪播圖的當(dāng)前選中項(xiàng)
 private long releaseTime = 0;//保存觸發(fā)時(shí)手動(dòng)滑動(dòng)的時(shí)間 進(jìn)行判斷防止滑動(dòng)之后立即輪播
 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("標(biāo)題1");
  titles.add("標(biāo)題2");
  titles.add("標(biāo)題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;
    }
   }
  };
 }

 /**
  * 初始化數(shù)據(jù) 以及拿到數(shù)據(jù)后的各種設(shè)置
  * 可以是網(wǎng)絡(luò)地址 也可是項(xiàng)目圖片數(shù)據(jù)
  * @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();
 }

 /**
  * 設(shè)置標(biāo)題
  * @param titles
  */
 public void setTitles(List<String> titles){
  this.titles.clear();
  this.titles.addAll(titles);
 }
 /**
  * 設(shè)置小圓點(diǎn)指示器
  */
 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;// 設(shè)置點(diǎn)點(diǎn)點(diǎn)view的左邊距
  layoutParams.rightMargin = 5;// 設(shè)置點(diǎn)點(diǎn)點(diǎn)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);
  }
 }

 /**
  * 設(shè)置UI
  */
 private void setUI(){
  adapter=new BannerAdapter();
  viewPager.setAdapter(adapter);
  viewPager.addOnPageChangeListener(onPageChangeLis);
  viewPager.setCurrentItem(1);
  handler.postDelayed(runnable,bannerTime);
 }

 /**
  * viewPage改變監(jiān)聽
  */
 private ViewPager.OnPageChangeListener onPageChangeLis=new ViewPager.OnPageChangeListener() {
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

  }

  @Override
  public void onPageSelected(int position) {
   //計(jì)算當(dāng)前頁的下標(biāo)
   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","=====靜止?fàn)顟B(tài)======");
     if (currentItem == 0) {
      viewPager.setCurrentItem(count, false);
     } else if (currentItem == count + 1) {
      viewPager.setCurrentItem(1, false);
     }
     break;
    case 1:
//    Log.e("aaa","=======手動(dòng)拖拽滑動(dòng)時(shí)調(diào)用====");
     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","=======自動(dòng)滑動(dòng)時(shí)調(diào)用====");
     break;
   }
  }
 };


 /**
  * 設(shè)置指示器和標(biāo)題切換
  * @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);

最后提供兩個(gè)github上大神封裝好的輪播圖

建議不太會(huì)的同學(xué)先搞清楚基本的邏輯在使用第三方庫

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: