乍一看,两者差不多啊,而且看名字也差不多。。
先看下图,是GridLayoutManager的效果,item的布局,宽高都是wrap_content
image.png
然后看下StaggeredGridLayoutManager的效果图,和名字一样,错列的gridLayout,人们常说的瀑布流
image.png
为了省事,下边用GL代表GridLayoutManager,SGL代表StaggeredGridLayoutManager
另外下边的都按照垂直布局来说的。
首先分析GL,它是继承LineaLayoutManager的,也就是线性有的它都有
构造方法有2种,第一种默认是垂直方向,reverse为false的。
public GridLayoutManager(Context context, int spanCount) {
super(context);
setSpanCount(spanCount);
}
public GridLayoutManager(Context context, int spanCount, int orientation,
boolean reverseLayout) {
super(context, orientation, reverseLayout);
setSpanCount(spanCount);
}
public void setSpanSizeLookup(SpanSizeLookup spanSizeLookup) {
mSpanSizeLookup = spanSizeLookup;
}
另外它可以单独设置每个item的跨度span,构造方法里返回的就是每行的总跨度,默认每个item占一个span
如下代码,就是第1张图的效果,第一个和第二个元素,宽度直接就是3,所以他们都各自占了一行。
spanSizeLookup=object :GridLayoutManager.SpanSizeLookup(){
override fun getSpanSize(position: Int): Int {
when(position){
0 or 1->{
return 3
}
else ->return 1;
}
}
}
最后从效果图也能看出,GL每行顶部是对齐的
SGL分析
看效果图,会发现,下一行的元素位置,是按照上一行item的bottom哪个最小就先放在哪个下边的。所以啊会出现错位的情况的。
构造方法只有一个
public StaggeredGridLayoutManager(int spanCount, int orientation) {
mOrientation = orientation;
setSpanCount(spanCount);
setAutoMeasureEnabled(mGapStrategy != GAP_HANDLING_NONE);
mLayoutState = new LayoutState();
createOrientationHelpers();
}
这个布局管理器里有个方法,这个值只能是0或者2,默认是2.
/**
* Sets the gap handling strategy for StaggeredGridLayoutManager. If the gapStrategy parameter
* is different than the current strategy, calling this method will trigger a layout request.
*
* @param gapStrategy The new gap handling strategy. Should be
* {@link #GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS} or {@link
* #GAP_HANDLING_NONE}.
* @see #getGapStrategy()
*/
public void setGapStrategy(int gapStrategy)
下边是它的默认值以及解释
/**
* When scroll state is changed to {@link RecyclerView#SCROLL_STATE_IDLE}, StaggeredGrid will
* check if there are gaps in the because of full span items. If it finds, it will re-layout
* and move items to correct positions with animations.
* <p>
* For example, if LayoutManager ends up with the following layout due to adapter changes:
* <pre>
* AAA
* _BC
* DDD
* </pre>
* <p>
* It will animate to the following state:
* <pre>
* AAA
* BC_
* DDD
* </pre>
*/
public static final int GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS = 2;
这玩意好像是加载网络图片,比如我们滑动到底部,然后手指往下滑,他会自动滚动一段距离,停下来的时候会重新计算布局如果有空白它就进行动画移动。我个人感觉还可以接受吧。看网上都不能接受在想办法弄掉。
分析下原因,图片高度都不一样,而布局是复用的。快速滚动的时候中间一堆item其实真实的高度并不准确,应该还是复用的item的高度,所以倒回去的时候最终的位置是不准确的,只有停下来的时候才开始计算最终显示的item的高度,这时候自然得对最终的位置进行修正了
那么如果要避免这种问题咋办?
我觉得让后台把图片的宽高比列告诉我们是最合理的。这样我们就可以提前在adapter里设定imageView的大小了。这样就不管图片有没有加载出来,它的高度都固定了,自然也就不会出现上边的问题拉。
var lp=layoutParams;
lp.height=图片宽*宽高比列 //图片宽就是本地的ImageView的宽,这个如果你列数设定了,这个根据屏幕宽是可以算出来的。
下边说的是设置ItemDecoration的问题
因为这玩意是瀑布流,本来就应该高度不一样的,如果你高度弄成固定的,再设置个ItemDecoration,你就会发现问题了。
部分代码如下,用的是高度固定的item来测试,能明显看出效果
//布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:clickable="true"
android:gravity="center"
android:background="#215980"
android:layout_width="wrap_content"
android:layout_height="50dp">
<TextView/>
</LinearLayout>
class ItemDecorationSpace:RecyclerView.ItemDecoration{
constructor() : super()
override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
outRect.left=5
outRect.right=5
outRect.bottom=20
}
}
itemDecoration=ItemDecorationSpace()
addItemDecoration(itemDecoration)
rv_test.layoutManager=StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL).apply{
}
效果图不帖了,简单说下 结果。
就是我们item高度是50,ItemDecoration的bottom是20,最后你会发现你看到的item大小高度只有30.。
要知道如果是线性的或者gridLayoutManager的话,结果应该是50+20的。。
所以这里需要注意。
对于SGL来说
只有item的高度是wrap_content的时候,才应该设置ItemDecoration
网友评论