RecyclerView实现广告轮播图（一）

　　平时都是用RecyclerView实现列表，RecyclerView的强大毋庸置疑，今天就用它来实现广告轮播图。
　　
　　效果如下

　　首先，在activity_main.xml里定义布局
　　

<RelativeLayout...android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.RecyclerViewandroid:id="@+id/recycler"android:layout_width="match_parent"android:layout_height="144dp"></android.support.v7.widget.RecyclerView></RelativeLayout>

　　然后定义列表的item布局—-item_image.xml：

<LinearLayout...android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ImageViewandroid:id="@+id/item_image"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"/></LinearLayout>

　　然后是Adapter，在Adapter初始化时要传入图片列表list：

public class BannerAdapter extends RecyclerView.Adapter<BannerAdapter.ViewHolder> {private List<Integer> list;private Context context;public BannerAdapter(Context context,List<Integer> list){this.list=list;this.context=context;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image,parent,false);return new ViewHolder(view);}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {Glide.with(context).load(list.get(position%list.size())).into(holder.imageView);}@Overridepublic int getItemCount() {return Integer.MAX_VALUE;}class ViewHolder extends RecyclerView.ViewHolder {private ImageView imageView;public ViewHolder(View itemView) {super(itemView);imageView= (ImageView) itemView.findViewById(R.id.item_image);}}}

　　
　　上面代码里需要注意的地方有两处。
　　
　　第一处是getItemCount() 返回的是Integer.MAX_VALUE。这是因为广告轮播图是无限轮播，getItemCount() 返回的是Adapter中的总项目数，这样才能使RecyclerView能一直滚动。
　　
　　第二处是onBindViewHolder()中的 position%list.size() ，表示position对图片列表list取余，这样list.get(position%list.size())才能按顺序循环展示图片。

　　
　　MainActivity.java代码如下：

public class MainActivity extends AppCompatActivity {private List<Integer> list = new ArrayList<>(4);@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//存入图片list.add(R.drawable.b1);list.add(R.drawable.b2);list.add(R.drawable.b3);list.add(R.drawable.b4);BannerAdapter adapter = new BannerAdapter(this, list);RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler);LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);recyclerView.setLayoutManager(layoutManager);recyclerView.setHasFixedSize(true);recyclerView.setAdapter(adapter);recyclerView.scrollToPosition(list.size()*10);}
}

　　需要注意的是LinearLayoutManager 第二个参数表示布局方向，平时默认是垂直的，也就是我们常见的列表样式。这里轮播广告要用为LinearLayoutManager.HORIZONTAL，水平方向。
　　还有一点需要注意，recyclerView.scrollToPosition(list.size()*10)这句使RecyclerView一开始位于 list.size()*10 处，避免了一开始position为0不能前滑的尴尬。
　　
　　由于广告是一页一页的划过去，所以我们还需要用到一个类，SnapHelper的子类PagerSnapHelper，用起来很简单，两句话。直接追加到上面的recyclerView.setAdapter(adapter) 后面。

public class MainActivity extends AppCompatActivity {...@Overrideprotected void onCreate(Bundle savedInstanceState) {...recyclerView.setAdapter(adapter);PagerSnapHelper snapHelper = new PagerSnapHelper();snapHelper.attachToRecyclerView(recyclerView);}
}

　　然后加入自动轮播，此处使用ScheduledExecutorService 来完成。

        ScheduledExecutorService scheduledExecutorService = Executors.newScheduledThreadPool(1);scheduledExecutorService.scheduleAtFixedRate(new Runnable() {@Overridepublic void run() {recyclerView.smoothScrollToPosition(layoutManager.findFirstVisibleItemPosition() + 1);}}, 2000, 2000, TimeUnit.MILLISECONDS);

这段代码表示2秒后每过2秒运行一次run（）里的程序。layoutManager.findFirstVisibleItemPosition() 表示得到当前RecyclerView第一个能看到的item的位置。由于广告是每次展示一张，所以得到的就是当前图片的position。recyclerView.smoothScrollToPosition（int position）表示滑动到某个position。所以上面的代码就表示每过2秒滑动到下个position，以此来完成自动轮播。

　　还有一点还要改进，程序运行起来后会发现自动轮播切换图片时速度太快了，这个怎么解决呢？
　　点开LinearLayoutManager的源码，查找smoothScrollToPosition()方法。
　　
这里滑动用到了LinearSmoothScroller，继续点击去，里面有一个calculateSpeedPerPixel()方法。

　　官方注释：计算滚动速度。如果返回值是2毫秒，这表示着滚动1000像素需要2秒。
所以我们继承LinearLayoutManager，重写smoothScrollToPosition()方法，并将里面的修改LinearSmoothScroller的这个方法返回值修改。

　　新建SmoothLinearLayoutManager.java 文件，代码如下：
　　

public class SmoothLinearLayoutManager extends LinearLayoutManager {public SmoothLinearLayoutManager(Context context) {super(context);}public SmoothLinearLayoutManager(Context context, int orientation, boolean reverseLayout) {super(context, orientation, reverseLayout);}@Overridepublic void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {LinearSmoothScroller linearSmoothScroller =new LinearSmoothScroller(recyclerView.getContext()) {protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {return 0.2f; //返回0.2}};linearSmoothScroller.setTargetPosition(position);startSmoothScroll(linearSmoothScroller);}}

　
　　
　　程序写到这里，广告轮播图已初具雏形了，最后还差个指示器。
　　
　　显示指示器上的红点需要得到当前展示的广告轮播图片的position。RecyclerView有个addOnScrollListener()方法，可以监听当前滑动状态。所以代码如下：
　　

        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {@Overridepublic void onScrollStateChanged(RecyclerView recyclerView, int newState) {if (newState == RecyclerView.SCROLL_STATE_IDLE) {int i = layoutManager.findFirstVisibleItemPosition() % list.size();//得到指示器红点的位置}}});

onScrollStateChangedd的 newState 参数有三种状态SCROLL_STATE_IDLE、SCROLL_STATE_DRAGGING和SCROLL_STATE_SETTLING，分布表示静止状态，拖拽状态和手指离开后的惯性滚动状态。所以这里当RecyclerView的状态为SCROLL_STATE_IDLE时得到当前图片的position，然后与图片列表取余就得到指示器红点的位置。

　　程序写到这里就差不多了。剩下的指示器部分是自定义view，比较简单，就不讲解了，代码直接给出。
　　
　　 github地址

RecyclerView实现广告轮播图（一）相关推荐

用RecyclerView打造一个轮播图
通常Android的轮播图(俗名:Banner)都是用ViewPager实现的,但是我在实际项目运用中碰到了一些小问题,于是决定另寻思路,采用RecyclerView这个更优雅更强大的控件来实现轮播的 ...
Axure：实现跳转广告轮播图
功能实现:当打开app时,显示app的广告轮播图 1.元件需求三个图片.一个动态面板.三个动态模板的状态:state1.state2.state3 2.交互将三个 ...
Android弧形广告图,简单封装弧形广告轮播图（ViewPager+贝塞尔曲线）
前言通过ViewPager和贝塞尔曲线实现了一个弧形广告轮播图. 效果图弧形ViewPager 实现方法想要实现这个效果,现在几行代码就可以了: Step 1. Add it in your r ...
广告轮播图的前后台实现
这个广告轮播系统是老师布置的前端实训的一个结课作业. 前端: 图片在广告位进行有时间性的轮播. 在两侧有前进和后退的操作. 在下面有几张轮播图的小框框,用来显示图片的进度, 点击小框框还可以立刻跳转到 ...
Android 自动广告轮播图
近来项目忙完了,觉得自己的自动广告轮播蛮不错的 ,所以分享出来.先说说他的功能,第一能够实现自动轮播图片 ,第二可以修改自动更换广告条的小点默认是圆形的可以修改为小的正方向 ,同时还可以修改 ...
android广告轮播图之匀速规律播放
之前在电商项目中用到广告轮播的效果,在app端实现广告图片的上传,然后轮播图片,使用handler发送消息然后在handlemessage中在发消息的循环发送可以实现广告轮播效果,但是当添加图片以后, ...
java中广告维护轮播图怎么做_Banner广告轮播图
需求描述轮播图也是大部分app都有的效果,商品类跟新闻类的app是肯定会有的. 轮播图的效果跟第一次启动时的引导页类似,不过轮播图在引导页的基础上多了几个功能:在第一页也能向左滑动,在最后一页也能向 ...
【微信小程序】实现广告轮播图
文章目录一.示例代码二.展示优化 1.衔接滑动 2.居中显示 3.图片完整 4.图片标题三.指示点优化 1.样式优化 2.特效优化四.所有代码五.参考博文六.视频图片混播最终效果图一. ...
Android广告轮播图效果实现
效果如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...
jquery广告轮播插件
大家平时在项目中很多时候也用到广告轮播图,我也不例外,为了避免重复工作,自己编写了一个兼容所有浏览器的广告轮播插件,调用非常简单.(ps:可以很灵活的修改,以满足不同的需求) js代码: (funct ...

RecyclerView实现广告轮播图（一）

RecyclerView实现广告轮播图（一）相关推荐

最新文章

热门文章