溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

在android中使用ViewPager怎么實(shí)現(xiàn)無(wú)限輪播功能

發(fā)布時(shí)間:2020-11-24 16:08:05 來(lái)源:億速云 閱讀:158 作者:Leah 欄目:移動(dòng)開(kāi)發(fā)

這篇文章給大家介紹在android中使用ViewPager怎么實(shí)現(xiàn)無(wú)限輪播功能,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。

一、布局

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<shape
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval"
 android:useLevel="false">

 <!-- 實(shí)心圓 
  <solid android:color="#F00"/>
 -->
 <!-- 空心圓 
  <stroke
   android:width="1dp"
   android:color="@android:color/black"/>
 -->
 <size android:width="8dp"
 android:height="8dp"/>
</shape>

輪播的ViewPager和向?qū)A點(diǎn)的 布局文件XML

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<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

/**
 * 輪播 viewpager的adapter
 */
class MyLoopPagerAdapter extends PagerAdapter {

 private int[] welcomes;
 private Context mContext;

 public MyLoopPagerAdapter(int[] welcomes, Context context) {
  this.welcomes = welcomes;
  mContext = context;
 }

 //  //返回實(shí)際要顯示的圖片數(shù)+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;
//    設(shè)置背景圖片
  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

/**
  * 循環(huán)輪播界面change的 監(jiān)聽(tīng)器
  */
 class MyLoopPageChangeListener implements ViewPager.OnPageChangeListener {

  private ViewPager mViewPager;
  private LinearLayout mLlDot;
  private ImageView dotRed;
  private Handler mHandler;
  private Runnable mRunnable;

  /**
   * 初始化 控件 和 handler
   *
   * @param viewPager
   * @param llDot
   * @param dotRed
   */
  public MyLoopPageChangeListener(ViewPager viewPager, LinearLayout llDot, ImageView dotRed) {
   mViewPager = viewPager;
   this.mLlDot = llDot;
   this.dotRed = dotRed;
   initAutoLoop();
  }

  /**
   * 初始化 自動(dòng)輪播 handler 和 runnable
   */
  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);
    }
   };
//   開(kāi)始 輪播
   mHandler.postDelayed(mRunnable, 3 * 1000);
  }

  /**
   * 當(dāng)頁(yè)面在滑動(dòng)了調(diào)用
   *
   * @param position    當(dāng)前頁(yè)面,即點(diǎn)擊滑動(dòng)的頁(yè)面
   * @param positionOffset  當(dāng)前頁(yè)面偏移的百分比
   * @param positionOffsetPixels 當(dāng)前頁(yè)面偏移的像素位置
   */
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//   獲取到 真正圖片所在的位置.
   int realPosition = (position - 1 + welcomes.length) % welcomes.length;
//   獲取到紅點(diǎn) 的 layout 參數(shù)
   RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) dotRed.getLayoutParams();
//   計(jì)算兩個(gè)點(diǎn)之間的距離
   int dotDis = mLlDot.getChildAt(1).getLeft() - mLlDot.getChildAt(0).getLeft();
//   計(jì)算總共的左邊距
   int totalLeftMargin = (welcomes.length - 1) * dotDis;
   // 計(jì)算滑動(dòng)的距離
   float dis = realPosition * dotDis + positionOffset * dotDis;
//   設(shè)置 margin_left 的值,
//   如果 position 等于 0 說(shuō)明正在從第一個(gè)圖片想最后一個(gè)滑動(dòng),那么保持 向?qū)У臓顟B(tài)為不動(dòng)
   if (position == 0) {
    params.leftMargin = 0;
//    如果滑動(dòng)距離超過(guò)了 最大邊距,那么將最大邊距賦值給 紅點(diǎn)的參數(shù)左邊距
   } else if (dis > totalLeftMargin) {
    params.leftMargin = totalLeftMargin;
//    正常情況 就將滑動(dòng)的距離 直接賦值
   } else {
    params.leftMargin = (int) dis;
   }
//   設(shè)置紅點(diǎn)的 參數(shù)
   dotRed.setLayoutParams(params);
//    在position4左滑且左滑positionOffset百分比接近1時(shí),偷偷替換為position1(原本會(huì)滑到position5)
   if (position == welcomes.length && positionOffset > 0.99) {
    mViewPager.setCurrentItem(1, false);
//    在position1右滑且右滑百分比接近0時(shí),偷偷替換為position4(原本會(huì)滑到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://什么都沒(méi)做 空閑狀態(tài)
     break;
    case 1://正在滑動(dòng):
//     手動(dòng)滑動(dòng) 取消自動(dòng)滑動(dòng)
     mHandler.removeCallbacks(mRunnable);
     break;
    case 2://滑動(dòng)完畢:
//     繼續(xù) 自動(dòng)滑動(dòng)
     mHandler.postDelayed(mRunnable, 3 * 1000);
     break;
   }
  }
 }
// 主要的算法參考下圖 
int realPosition = (position - 1 + welcomes.length) % welcomes.length; 

關(guān)于在android中使用ViewPager怎么實(shí)現(xiàn)無(wú)限輪播功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI