当前位置: 首页 > 编程笔记 >

Android实现带指示点的自动轮播无限循环效果

司马作人
2023-03-14
本文向大家介绍Android实现带指示点的自动轮播无限循环效果,包括了Android实现带指示点的自动轮播无限循环效果的使用技巧和注意事项,需要的朋友参考一下

想要实现无限轮播,一直向左滑动,当到最后一个view时,会滑动到第一个,无限…

可以自己写ViewPager然后加handler先实现自动滚动,当然这里我为了项目的进度直接使用了Trinea的Android-auto-scroll-view-pager库,网址:点击进入github 引用库compile('cn.trinea.android.view.autoscrollviewpager:android-auto-scroll-view-pager:1.1.2') {
exclude module: 'support-v4'
之后

1布局为

<RelativeLayout 
android:layout_width="match_parent" 
android:layout_height="@dimen/y150"> 
<cn.trinea.android.view.autoscrollviewpager.AutoScrollViewPager 
android:id="@+id/viewpager1" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" /> 
<!--点点的布局--> 
<LinearLayout 
android:id="@+id/ll_dot1" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:layout_alignParentBottom="true" 
android:layout_marginBottom="8dp" 
android:gravity="center" 
android:orientation="horizontal" /> 
</RelativeLayout> 

2 构建PagerAdapter
继承自RecyclingPagerAdapter (后面会贴出来源码)

 `public class Indicator1Adapter extends RecyclingPagerAdapter {
 private List<Integer> imageIdList;
 Context context;
 //是否循环(创造构造方法,在activity里设置是否)
 //集合大小
 private int size;

 public Indicator1Adapter(List<Integer> mData, Context context) {
  this.imageIdList = mData;
  this.context = context;
  this.size = mData.size();
  isInfiniteLoop = false;
 }
 @Override
 public int getCount() {
 //是:最大(让集合的长度无限,从而模拟无限循环) 否,集合长度
  return isInfiniteLoop ? Integer.MAX_VALUE : imageIdList.size();
 }

 /**
  * @return the isInfiniteLoop
  */
 public boolean isInfiniteLoop() {
  return isInfiniteLoop;
 }

 /**
  * @param是否无限循环
  */
 public Indicator1Adapter setInfiniteLoop(boolean isInfiniteLoop) {
  this.isInfiniteLoop = isInfiniteLoop;
  return this;
 }

 /**
  * 真实的position
  *
  * @param position
  * @return
  */
 private int getPosition(int position) {
  return isInfiniteLoop ? position % size : position;
 }
 @Override
 public View getView(int position, View view, ViewGroup container) {
  ViewHolder holder;
  if (view == null) {
   holder = new ViewHolder();
   view = holder.imageView = new ImageView(context);
   view.setTag(holder);
  } else {
   holder = (ViewHolder)view.getTag();
  }
  holder.imageView.setImageResource(imageIdList.get(getPosition(position)));
  holder.imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  return view;
 }

 private static class ViewHolder {

  ImageView imageView;
 }
}

3 在activity里或者fragment里就可以设置ViewPager

定义的成员变量:

//viewpager1
 @BindView(R.id.viewpager1)
 AutoScrollViewPager mPager1;
 //承载小点点的控件容器(布局里有)
 @BindView(R.id.ll_dot1)
 LinearLayout mLlDot1;
Indicator1Adapter adapter1 = new Indicator1Adapter( mData,act).setInfiniteLoop(true);//开启无限循环
  mPager1.setAdapter(adapter1);
  mPager1.setInterval(PLAY_TIME);//轮播时间间隔
  mPager1.startAutoScroll();//开启自动轮播
  mPager1.setCurrentItem(Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % mData.size());

然后你嫌弃官方的换图间隔时间太短,一闪而过,可以通过反射 设置

//通过反射让滚动速度为自己的喜好的(这里设为1.2s)
  try {
   Field field = ViewPager.class.getDeclaredField("mScroller");
   field.setAccessible(true);
   FixedSpeedScroller scroller = new FixedSpeedScroller(mPager1.getContext(),
     new AccelerateInterpolator());
   field.set(mPager1, scroller);
   scroller.setmDuration(1200);
  } catch (Exception e) {
   Log.e(TAG, "Exception", e);
  }

4 然后我们的小点点还没有使用呢
这里我写了方法:

/**
 * 设置状态点1
 */
 private void setOvalLayout1() {
  for (int i = 0; i < mData.size(); i++) {
  /**
   * 生成对应数量的点点(布局,结果提供)
   */
   mLlDot1.addView(inflater.inflate(R.layout.dot, null));
  }
  // 默认显示第一页
  mLlDot1.getChildAt(0).findViewById(R.id.v_dot)
    .setBackgroundResource(R.drawable.dot_selected);
  mPager1.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   public void onPageSelected(int position) {
    //遍历图片数组
//    Toast.makeText(act, "position"+position, Toast.LENGTH_SHORT).show();
    for (int i = 0; i < mData.size(); i++) {
     if(i==position%mData.size()){
      // 圆点选中
      /**
      * 这里需要注意如果直接写position,由于我们是无限循环,他的position是无限往上
      *增加的,那么就会报空指针,因为我们总共才生成了mData.size()个点点,这里可以让当前的
      *position取余,得到的即是当前位置的点点
      */
      mLlDot1.getChildAt(position%mData.size())
        .findViewById(R.id.v_dot)
        .setBackgroundResource(R.drawable.dot_selected);
     }else{
      // 取消圆点选中
      mLlDot1.getChildAt(curIndex1%mData.size())
        .findViewById(R.id.v_dot)
        .setBackgroundResource(R.drawable.dot_normal);
     }
    }
    curIndex1 = position;
   }

   public void onPageScrolled(int arg0, float arg1, int arg2) {
   }

   public void onPageScrollStateChanged(int arg0) {
   }
  });


 }

别忘了重写

 @Override
 public void onPause() {
  super.onPause();
  // stop auto scroll when onPause
  mPager1.stopAutoScroll();
 }

 @Override
 public void onResume() {
  super.onResume();
  // start auto scroll when onResume
  mPager1.startAutoScroll();
 }

好了,无限循环自动轮播,完成了.

5点点布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content">
 <!-- 小圆点View -->
 <View
  android:id="@+id/v_dot"
  android:layout_width="8dp"
  android:layout_height="8dp"
  android:layout_marginLeft="2dp"
  android:layout_marginRight="2dp"
  android:background="@drawable/dot_normal"/>
</RelativeLayout>

6 点点的background
dot_normal.xml

<?xml version="1.0" encoding="utf-8"?><!-- 圆点未选中 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <solid android:color="@color/background_color" />

 <corners android:radius="5dp" />
</shape>

dot_selected.xml

<?xml version="1.0" encoding="utf-8"?><!-- 圆点选中 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <solid android:color="@color/red" />
 <corners android:radius="5dp" />
</shape>

RecyclingPagerAdapter的源码依赖RecycleBin类,一并贴出来

public class RecycleBin {
 /**
 * Views that were on screen at the start of layout. This array is populated at the start of
 * layout, and at the end of layout all view in activeViews are moved to scrapViews.
 * Views in activeViews represent a contiguous range of Views, with position of the first
 * view store in mFirstActivePosition.
 */
 private View[] activeViews = new View[0];
 private int[] activeViewTypes = new int[0];

 /** Unsorted views that can be used by the adapter as a convert view. */
 private SparseArray<View>[] scrapViews;

 private int viewTypeCount;

 private SparseArray<View> currentScrapViews;

 public void setViewTypeCount(int viewTypeCount) {
 if (viewTypeCount < 1) {
  throw new IllegalArgumentException("Can't have a viewTypeCount < 1");
 }
 //noinspection unchecked
 SparseArray<View>[] scrapViews = new SparseArray[viewTypeCount];
 for (int i = 0; i < viewTypeCount; i++) {
  scrapViews[i] = new SparseArray<View>();
 }
 this.viewTypeCount = viewTypeCount;
 currentScrapViews = scrapViews[0];
 this.scrapViews = scrapViews;
 }

 protected boolean shouldRecycleViewType(int viewType) {
 return viewType >= 0;
 }

 /** @return A view from the ScrapViews collection. These are unordered. */
 View getScrapView(int position, int viewType) {
 if (viewTypeCount == 1) {
  return retrieveFromScrap(currentScrapViews, position);
 } else if (viewType >= 0 && viewType < scrapViews.length) {
  return retrieveFromScrap(scrapViews[viewType], position);
 }
 return null;
 }

 /**
 * Put a view into the ScrapViews list. These views are unordered.
 *
 * @param scrap The view to add
 */
 void addScrapView(View scrap, int position, int viewType) {
 if (viewTypeCount == 1) {
  currentScrapViews.put(position, scrap);
 } else {
  scrapViews[viewType].put(position, scrap);
 }

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
  scrap.setAccessibilityDelegate(null);
 }
 }

 /** Move all views remaining in activeViews to scrapViews. */
 void scrapActiveViews() {
 final View[] activeViews = this.activeViews;
 final int[] activeViewTypes = this.activeViewTypes;
 final boolean multipleScraps = viewTypeCount > 1;

 SparseArray<View> scrapViews = currentScrapViews;
 final int count = activeViews.length;
 for (int i = count - 1; i >= 0; i--) {
  final View victim = activeViews[i];
  if (victim != null) {
  int whichScrap = activeViewTypes[i];

  activeViews[i] = null;
  activeViewTypes[i] = -1;

  if (!shouldRecycleViewType(whichScrap)) {
   continue;
  }

  if (multipleScraps) {
   scrapViews = this.scrapViews[whichScrap];
  }
  scrapViews.put(i, victim);

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
   victim.setAccessibilityDelegate(null);
  }
  }
 }

 pruneScrapViews();
 }

 /**
 * Makes sure that the size of scrapViews does not exceed the size of activeViews.
 * (This can happen if an adapter does not recycle its views).
 */
 private void pruneScrapViews() {
 final int maxViews = activeViews.length;
 final int viewTypeCount = this.viewTypeCount;
 final SparseArray<View>[] scrapViews = this.scrapViews;
 for (int i = 0; i < viewTypeCount; ++i) {
  final SparseArray<View> scrapPile = scrapViews[i];
  int size = scrapPile.size();
  final int extras = size - maxViews;
  size--;
  for (int j = 0; j < extras; j++) {
  scrapPile.remove(scrapPile.keyAt(size--));
  }
 }
 }

 static View retrieveFromScrap(SparseArray<View> scrapViews, int position) {
 int size = scrapViews.size();
 if (size > 0) {
  // See if we still have a view for this position.
  for (int i = 0; i < size; i++) {
  int fromPosition = scrapViews.keyAt(i);
  View view = scrapViews.get(fromPosition);
  if (fromPosition == position) {
   scrapViews.remove(fromPosition);
   return view;
  }
  }
  int index = size - 1;
  View r = scrapViews.valueAt(index);
  scrapViews.remove(scrapViews.keyAt(index));
  return r;
 } else {
  return null;
 }
 }
}

RecyclingPagerAdapter

public abstract class RecyclingPagerAdapter extends PagerAdapter {
 static final int IGNORE_ITEM_VIEW_TYPE = AdapterView.ITEM_VIEW_TYPE_IGNORE;

 private final RecycleBin recycleBin;

 public RecyclingPagerAdapter() {
 this(new RecycleBin());
 }

 RecyclingPagerAdapter(RecycleBin recycleBin) {
 this.recycleBin = recycleBin;
 recycleBin.setViewTypeCount(getViewTypeCount());
 }

 @Override public void notifyDataSetChanged() {
 recycleBin.scrapActiveViews();
 super.notifyDataSetChanged();
 }

 @Override public final Object instantiateItem(ViewGroup container, int position) {
 int viewType = getItemViewType(position);
 View view = null;
 if (viewType != IGNORE_ITEM_VIEW_TYPE) {
  view = recycleBin.getScrapView(position, viewType);
 }
 view = getView(position, view, container);
 container.addView(view);
 return view;
 }

 @Override public final void destroyItem(ViewGroup container, int position, Object object) {
 View view = (View) object;
 container.removeView(view);
 int viewType = getItemViewType(position);
 if (viewType != IGNORE_ITEM_VIEW_TYPE) {
  recycleBin.addScrapView(view, position, viewType);
 }
 }

 @Override public final boolean isViewFromObject(View view, Object object) {
 return view == object;
 }

 /**
 * <p>
 * Returns the number of types of Views that will be created by
 * {@link #getView}. Each type represents a set of views that can be
 * converted in {@link #getView}. If the adapter always returns the same
 * type of View for all items, this method should return 1.
 * </p>
 * <p>
 * This method will only be called when when the adapter is set on the
 * the {@link AdapterView}.
 * </p>
 *
 * @return The number of types of Views that will be created by this adapter
 */
 public int getViewTypeCount() {
 return 1;
 }

 /**
 * Get the type of View that will be created by {@link #getView} for the specified item.
 *
 * @param position The position of the item within the adapter's data set whose view type we
 *  want.
 * @return An integer representing the type of View. Two views should share the same type if one
 *   can be converted to the other in {@link #getView}. Note: Integers must be in the
 *   range 0 to {@link #getViewTypeCount} - 1. {@link #IGNORE_ITEM_VIEW_TYPE} can
 *   also be returned.
 * @see #IGNORE_ITEM_VIEW_TYPE
 */
 @SuppressWarnings("UnusedParameters") // Argument potentially used by subclasses.
 public int getItemViewType(int position) {
 return 0;
 }

 /**
 * Get a View that displays the data at the specified position in the data set. You can either
 * create a View manually or inflate it from an XML layout file. When the View is inflated, the
 * parent View (GridView, ListView...) will apply default layout parameters unless you use
 * {@link android.view.LayoutInflater#inflate(int, ViewGroup, boolean)}
 * to specify a root view and to prevent attachment to the root.
 *
 * @param position The position of the item within the adapter's data set of the item whose view
 *  we want.
 * @param convertView The old view to reuse, if possible. Note: You should check that this view
 *  is non-null and of an appropriate type before using. If it is not possible to convert
 *  this view to display the correct data, this method can create a new view.
 *  Heterogeneous lists can specify their number of view types, so that this View is
 *  always of the right type (see {@link #getViewTypeCount()} and
 *  {@link #getItemViewType(int)}).
 * @return A View corresponding to the data at the specified position.
 */
 public abstract View getView(int position, View convertView, ViewGroup container);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍iOS实现无限循环轮播图效果,包括了iOS实现无限循环轮播图效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了iOS实现无限循环轮播图的具体代码,供大家参考,具体内容如下 轮播图基础控件,左滑右滑都能无限循环 预览 思路 (1)在第一张左边加一张最后一张的图片,往左滑到边缘结束后计算偏移量迅速定位成最后一张 (2)总共只有左、中、右三个页面,每次滑动后重新进行数据跟页

  • 本文向大家介绍Android Viewpager实现无限循环轮播图,包括了Android Viewpager实现无限循环轮播图的使用技巧和注意事项,需要的朋友参考一下 在网上找了很多viewpager实现图片轮播的,但是大多数通过以下方式在PagerAdapter的getCount()返回一个无限大的数,来实现 伪无限 虽然通过这种方式是能达到效果,但是从严格意义上来说并不是真正的无限。 假如有五

  • 本文向大家介绍原生js实现无限循环轮播图效果,包括了原生js实现无限循环轮播图效果的使用技巧和注意事项,需要的朋友参考一下 知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 2.当前图片轮播的圆点变色显示: 因为每次点击index+1 所以当前的index-1就是button的索引 3.实现动画滚动效果: 原理就是把每次的偏移量分为

  • 本文向大家介绍Objective-C实现无限循环轮播器,包括了Objective-C实现无限循环轮播器的使用技巧和注意事项,需要的朋友参考一下 先看看效果图: 具体实现代码: 1. 控制器     2. 显示内容界面设置 以上就是本文的全部内容,希望对大家的学习有所帮助。

  • 本文向大家介绍Android 使用ViewPager自动滚动循环轮播效果,包括了Android 使用ViewPager自动滚动循环轮播效果的使用技巧和注意事项,需要的朋友参考一下 对Android 利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情。 主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用。顺便解决ViewPager嵌套(ViewPa

  • 本文向大家介绍JavaScript实现无限轮播效果,包括了JavaScript实现无限轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现无限轮播效果的具体代码,供大家参考,具体内容如下 效果展示 原理 图片说明原理 轮播顺序:1–>2–>3–>4–>5–>1的副本–>2–>3–>4–>5–>1的副本–>2…一直循环 鼠标进入图片时自动轮播暂停,离开后恢复