Android Studio开发——使用RecyclerView实现图片瀑布流+分割线
文章目录
任务描述：
- 在上次微信首页的基础上，选择一个Fragment实现RecyclerView控件的设计开发，内容不限。
- 我选择在“设置”界面中使用RecyclerView实现图片瀑布流及分割线的展示
扩展：RecyclerView的优点
- RecyclerView封装了viewholder的回收复用，也就是说RecyclerView标准化了ViewHolder，编写Adapter面向的是ViewHolder而不再是View了，复用的逻辑被封装了，写起来更加简单。
- 直接省去了listview中convertView.setTag(holder)和convertView.getTag()这些繁琐的步骤。
- 提供了一种插拔式的体验，高度的解耦，异常的灵活，针对一个Item的显示RecyclerView专门抽取出了相应的类，来控制Item的显示，使其的扩展性非常强。
- 设置布局管理器以控制Item的布局方式，横向、竖向以及瀑布流方式
例如：你想控制横向或者纵向滑动列表效果可以通过LinearLayoutManager这个类来进行控制(与GridView效果对应的是GridLayoutManager,与瀑布流对应的还StaggeredGridLayoutManager等)。也就是说RecyclerView不再拘泥于ListView的线性展示方式，它也可以实现GridView的效果等多种效果。- 可设置Item的间隔样式（可绘制）
通过继承RecyclerView的ItemDecoration这个类，然后针对自己的业务需求去书写代码。- 可以控制Item增删的动画，可以通过ItemAnimator这个类进行控制，当然针对增删的动画，RecyclerView有其自己默认的实现。
一、基本过程
1. 引入依赖
implementation 'com.android.support:recyclerview-v7:28.0.0'
==这里注意Android Support库和AndroidX不兼容 ==
解决方法
2. 布局中添加RecyclerView
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
3.item布局（我这里只放置了一个ImageView控件）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingBottom="5dp"
android:paddingRight="5dp"
android:background="#E1FFFF">
<ImageView
android:id="@+id/item_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:gravity="center"
tools:text="item"/>
</LinearLayout>
android:adjustViewBounds="true"
调整ImageView的界限来保持图像纵横比不变。
我原本的目的是为了使图片高度自适应，算是基本实现了，但是一拖动布局就混乱了（后文会放效果图），望指正。
4. Adapter适配器设置
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private List<Img> ImgList;
private Context context;
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView Image;
public ViewHolder(View view) {
super(view);
Image = (ImageView) view.findViewById(R.id.item_img);
// fruitName = (TextView) view.findViewById(R.id.fruitname);
}
}
public RecyclerViewAdapter(List<Img> fruitList) {
ImgList = fruitList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.itme, parent, false);
ViewHolder holder = new ViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
final Img img = ImgList.get(position);
holder.Image.setImageResource(img.getImageId());
}
5. 在Fragment中初始化RecyclerView
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view= inflater.inflate(R.layout.tab04, container, false);
InitImg();
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(manager);
RecyclerViewAdapter adapter = new RecyclerViewAdapter(ImgList);
recyclerView.setAdapter(adapter);
recyclerView.addItemDecoration(new DividerItemDecoration(
getActivity(), DividerItemDecoration.BOTH_SET,5,255));
return view;
}
private List<Img> ImgList = new ArrayList<>();
private void InitImg(){
for (int i = 0; i < 2; i++) {
Img xiaozhan_01 = new Img(R.drawable.xiaozhan_01);
ImgList.add(xiaozhan_01);
Img xiaozhan_02 = new Img(R.drawable.xiaozhan_02);
ImgList.add(xiaozhan_02);
Img xiaozhan_03 = new Img(R.drawable.xiaozhan_03);
ImgList.add(xiaozhan_03);
Img xiaozhan_04 = new Img(R.drawable.xiaozhan_04);
ImgList.add(xiaozhan_04);
Img xiaozhan_05 = new Img(R.drawable.xiaozhan_05);
ImgList.add(xiaozhan_05);
Img xiaozhan_06 = new Img(R.drawable.xiaozhan_06);
ImgList.add(xiaozhan_06);
Img xiaozhan_07 = new Img(R.drawable.xiaozhan_07);
ImgList.add(xiaozhan_07);
Img xiaozhan_08 = new Img(R.drawable.xiaozhan_08);
ImgList.add(xiaozhan_08);
Img xiaozhan_09 = new Img(R.drawable.xiaozhan_09);
ImgList.add(xiaozhan_09);
Img xiaozhan_10 = new Img(R.drawable.xiaozhan_10);
ImgList.add(xiaozhan_10);
Img xiaozhan_11 = new Img(R.drawable.xiaozhan_11);
ImgList.add(xiaozhan_11);
Img xiaozhan_12 = new Img(R.drawable.xiaozhan_12);
ImgList.add(xiaozhan_12);
Img xiaozhan_13 = new Img(R.drawable.xiaozhan_13);
ImgList.add(xiaozhan_13);
}
}
6.实体类
public class Img {
private int imageId;
public Img(int imageId){
this.imageId = imageId;
}
public int getImageId() {
return imageId;
}
}
7. 万能分割线的工具类
这里我引用了这位博主的代码，他介绍得很详细，有非常详细的分析和注释
https://www.jianshu.com/p/fb4b8602a60c
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
private Paint mPaint;
//取名mDivider似乎更恰当
private Drawable mDrawable;
//分割线高度，默认为1px
private int mDividerHeight = 2;
//列表的方向
private int mOrientation;
//系统自带的参数
private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
//水平
public static final int HORIZONTAL_LIST = RecyclerView.HORIZONTAL;
//垂直
public static final int VERTICAL_LIST = RecyclerView.VERTICAL;
//水平+垂直
public static final int BOTH_SET = 2;
/**
* 默认分割线：高度为2px，颜色为灰色
*
* @param context 上下文
* @param orientation 列表方向
*/
public DividerItemDecoration(Context context, int orientation) {
this.setOrientation(orientation);
//获取xml配置的参数
final TypedArray a = context.obtainStyledAttributes(ATTRS);
//typedArray.getDrawable(attr)这句是说我们可以通过我们的资源获得资源，使用我们的资源名attr去获得资源id
//看不懂就用自己写一个分割线的图片吧，方法：ContextCompat.getDrawable(context, drawableId);
mDrawable = a.getDrawable(0);
//官方的解释是：回收TypedArray，以便后面重用。在调用这个函数后，你就不能再使用这个TypedArray。
//在TypedArray后调用recycle主要是为了缓存。
a.recycle();
}
/**
* 自定义分割线
*
* @param context 上下文
* @param orientation 列表方向
* @param drawableId 分割线图片
*/
public DividerItemDecoration(Context context, int orientation, int drawableId) {
this.setOrientation(orientation);
//旧的getDrawable方法弃用了，这个是新的
mDrawable = ContextCompat.getDrawable(context, drawableId);
mDividerHeight = mDrawable.getIntrinsicHeight();
}
/**
* 自定义分割线
*
* @param context 上下文
* @param orientation 列表方向
* @param dividerHeight 分割线高度
* @param dividerColor 分割线颜色
*/
public DividerItemDecoration(Context context, int orientation,
int dividerHeight, int dividerColor) {
this.setOrientation(orientation);
mDividerHeight = dividerHeight;
Log.e("mDividerHeight", mDividerHeight + "===================");
//抗锯齿画笔
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(dividerColor);
//填满颜色
mPaint.setStyle(Paint.Style.FILL);
}
/**
* 设置方向
*
* @param orientation
*/
public void setOrientation(int orientation) {
if (orientation < 0 || orientation > 2)
throw new IllegalArgumentException("invalid orientation");
mOrientation = orientation;
}
/**
* 绘制分割线之后,需要留出一个外边框,就是说item之间的间距要换一下
*
* @param outRect outRect.set(0, 0, 0, 0);的四个参数理解成margin就好了
* @param view 视图
* @param parent 父级view
* @param state
*/
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//下面super...代码其实调用的就是那个过时的getItemOffsets,也就是说这个方法体内容也可以通通移到那个过时的getItemOffsets中
super.getItemOffsets(outRect, view, parent, state);
//获取layoutParams参数
RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) view.getLayoutParams();
//当前位置
int itemPosition = layoutParams.getViewLayoutPosition();
//ItemView数量
int childCount = parent.getAdapter().getItemCount();
switch (mOrientation) {
case BOTH_SET:
//获取Layout的相关参数
int spanCount = this.getSpanCount(parent);
if (isLastRaw(parent, itemPosition, spanCount, childCount)) {
// 如果是最后一行，则不需要绘制底部
outRect.set(0, 0, mDividerHeight, 0);
} else if (isLastColum(parent, itemPosition, spanCount, childCount)) {
// 如果是最后一列，则不需要绘制右边
outRect.set(0, 0, 0, mDividerHeight);
} else {
outRect.set(0, 0, mDividerHeight, mDividerHeight);
}
break;
case VERTICAL_LIST:
childCount -= 1;
//水平布局右侧留Margin,如果是最后一列,就不要留Margin了
outRect.set(0, 0, (itemPosition != childCount) ? mDividerHeight : 0, 0);
break;
case HORIZONTAL_LIST:
childCount -= 1;
//垂直布局底部留边，最后一行不留
outRect.set(0, 0, 0, (itemPosition != childCount) ? mDividerHeight : 0);
break;
}
}
/**
* 绘制分割线
*
* @param c
* @param parent
* @param state
*/
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
if (mOrientation == VERTICAL_LIST) {
drawVertical(c, parent);
} else if (mOrientation == HORIZONTAL_LIST) {
drawHorizontal(c, parent);
} else {
drawHorizontal(c, parent);
drawVertical(c, parent);
}
}
/**
* 绘制横向 item 分割线
*
* @param canvas 画布
* @param parent 父容器
*/
private void drawHorizontal(Canvas canvas, RecyclerView parent) {
final int x = parent.getPaddingLeft();
final int width = parent.getMeasuredWidth() - parent.getPaddingRight();
//getChildCount()(ViewGroup.getChildCount) 返回的是显示层面上的“所包含的子 View 个数”。
final int childSize = parent.getChildCount();
for (int i = 0; i < childSize; i++) {
final View child = parent.getChildAt(i);
RecyclerView.LayoutParams layoutParams =
(RecyclerView.LayoutParams) child.getLayoutParams();
//item底部的Y轴坐标+margin值
final int y = child.getBottom() + layoutParams.bottomMargin;
final int height = y + mDividerHeight;
Log.e("height", height + "===================");
if (mDrawable != null) {
//setBounds(x,y,width,height); x:组件在容器X轴上的起点 y:组件在容器Y轴上的起点
// width:组件的长度 height:组件的高度
mDrawable.setBounds(x, y, width, height);
mDrawable.draw(canvas);
}
if (mPaint != null) {
canvas.drawRect(x, y, width, height, mPaint);
}
}
}
/**
* 绘制纵向 item 分割线
*
* @param canvas
* @param parent
*/
private void drawVertical(Canvas canvas, RecyclerView parent) {
final int top = parent.getPaddingTop();
final int bottom = parent.getMeasuredHeight() - parent.getPaddingBottom();
final int childSize = parent.getChildCount();
for (int i = 0; i < childSize; i++) {
final View child = parent.getChildAt(i);
RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
final int left = child.getRight() + layoutParams.rightMargin;
final int right = left + mDividerHeight;
if (mDrawable != null) {
mDrawable.setBounds(left, top, right, bottom);
mDrawable.draw(canvas);
}
if (mPaint != null) {
canvas.drawRect(left, top, right, bottom, mPaint);
}
}
}
/**
* 获取列数
*
* @param parent
* @return
*/
private int getSpanCount(RecyclerView parent) {
int spanCount = -1;
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager) {
spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
} else if (layoutManager instanceof StaggeredGridLayoutManager) {
spanCount = ((StaggeredGridLayoutManager) layoutManager)
.getSpanCount();
}
return spanCount;
}
private boolean isLastColum(RecyclerView parent, int pos, int spanCount,
int childCount) {
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager) {
int orientation = ((GridLayoutManager) layoutManager)
.getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL) {
// 如果是最后一列，则不需要绘制右边
if ((pos + 1) % spanCount == 0)
return true;
} else {
childCount = childCount - childCount % spanCount;
// 如果是最后一列，则不需要绘制右边
if (pos >= childCount)
return true;
}
} else if (layoutManager instanceof StaggeredGridLayoutManager) {
int orientation = ((StaggeredGridLayoutManager) layoutManager)
.getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL) {
// 如果是最后一列，则不需要绘制右边
if ((pos + 1) % spanCount == 0)
return true;
} else {
childCount = childCount - childCount % spanCount;
// 如果是最后一列，则不需要绘制右边
if (pos >= childCount)
return true;
}
}
return false;
}
private boolean isLastRaw(RecyclerView parent, int pos, int spanCount,
int childCount) {
int orientation;
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager) {
childCount = childCount - childCount % spanCount;
orientation = ((GridLayoutManager) layoutManager)
.getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL) {
// 如果是最后一行，则不需要绘制底部
childCount = childCount - childCount % spanCount;
if (pos >= childCount)
return true;
} else {// StaggeredGridLayoutManager 横向滚动
// 如果是最后一行，则不需要绘制底部
if ((pos + 1) % spanCount == 0)
return true;
}
} else if (layoutManager instanceof StaggeredGridLayoutManager) {
orientation = ((StaggeredGridLayoutManager) layoutManager)
.getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL) {
// 如果是最后一行，则不需要绘制底部
childCount = childCount - childCount % spanCount;
if (pos >= childCount)
return true;
} else {// StaggeredGridLayoutManager 横向滚动
// 如果是最后一行，则不需要绘制底部
if ((pos + 1) % spanCount == 0)
return true;
}
}
return false;
}
}
对应settingFragment中
recyclerView.addItemDecoration(new DividerItemDecoration(
getActivity(), DividerItemDecoration.BOTH_SET,5,255));
- getActivity()：上下文
- DividerItemDecoration.BOTH_SET：列表方向是水平+垂直
- 5：分割线高度
- 255：分割线颜色——黑色
二、实现效果
该图为最后实现效果
该图为向下拖动后出现位置乱动
三、参考链接
RecyclerView之万能分割线(二)
侯蛋蛋_
RecyclerView
另外，特别感谢一位同学，帮助我解决了在Fragment中解析和设置RecyclerView的问题
Android Studio开发（二）使用RecyclerView
四、源码下载
