引言
今天带大家实现网络图片，规则展示在客户端，可滑动展示支持。SmartRefreshLayout+recyclerview+glide结合实现，先看效果图：
代码实现
SmartRefreshLayout实现下拉刷新上滑更多
1.加入依赖库
implementation'com.scwang.smartrefresh:SmartRefreshLayout:1.0.5.1'
2.布局文件，使用SmartRefreshLayout包裹RecyclerView
<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:id="@+id/refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:overScrollMode="never" />
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
3.设置下拉上滑监听事件，刷新数据
refreshLayout.setOnRefreshListener(new OnRefreshListener(){
@Override
public void onRefresh(RefreshLayout refreshLayout) {
page =0;
initData(searchValue,page,pageNumber);
}
});
refreshLayout.setOnLoadMoreListener(new OnLoadMoreListener() {
@Override
public void onLoadMore(RefreshLayout refreshLayout) {
page +=1;
initData(searchValue,page,pageNumber);
}
});
到此，下拉和上滑的工作完成，然后开始装载列表数据
RecyclerView（RecyclerView.Adapter和 RecyclerView.ItemDecoration配合）展示图片数据
1.RecyclerView.Adapte展示数据
图片加载使用Glide，由于网络获取的图片，宽高比不是一致的。如果使用Glide默认的裁剪方式的话，不能够按照要求规整的显示在矩形内。所以需要设置一下Glide的裁剪方式.centerCrop:
//以填满整个控件为目标，等比缩放，超过控件时会被压缩，当控件宽高比与图片宽高比不一致时，高的一边将会被裁剪.这样不管服务器返回的图片宽高比是多少，都能优雅的展示在我们的控件内。
RequestOptions options =new RequestOptions().centerCrop();
Glide.with(context).load(itemDto.get_thumb()).apply(options).into(holder.ivImage);
2.RecyclerView.ItemDecoration设置Item内的间距
图片与图片之间有一定的分隔距离，这时候我们通过RecyclerView.ItemDecoration的getItemOffsets方法，设置网格布局，每个网格之间的距离。第一列最后一列不同于中间列，所以需要先算出当前在第几列，然后进行间距设置。
StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams();
// 获取item在span中的下标，也就是position（0,1,2,3,5,6,7,....）
int spanIndex = params.getSpanIndex();
//得出当前图片所在第几列，通过position除以列数，得到的余数即为当前所在列
int positon = spanIndex %spanCount;
//不同列设置不同的距离，第一列左边设置距离，第二列左右设置距离，第三列右边设置距离。底部距离通用
switch (positon){
case 0:
outRect.left =interval;
break;
case 1:
outRect.left =interval;
outRect.right =interval;
break;
case 2:
outRect.right =interval;
break;
default:
break;
}
// 下方间隔
outRect.bottom =interval;
到此，所有功能完成，网络请求这里没有介绍，我使用的是Retrofit。源代码已经上传至githu。源代码地址https://github.com/lptgsd/iamgeScroll.git
