美文网首页
GridLayoutManager和StaggeredGridL

GridLayoutManager和StaggeredGridL

作者: 有点健忘 | 来源:发表于2018-05-14 16:37 被阅读4410次

    乍一看,两者差不多啊,而且看名字也差不多。。
    先看下图,是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

    相关文章

      网友评论

          本文标题:GridLayoutManager和StaggeredGridL

          本文链接:https://www.haomeiwen.com/subject/hxzddftx.html