UI-超简单的多列RecycleView添加头部

讲我的思路之前先说一下一个让我无比吐槽的方法。。。

ScrollView嵌套一个LinearLayout，里面再嵌套一个头部LinearLayout和一个RecycleView，这个方法是我一开始选择的，然而
1.其中需要解决滑动冲突（其实关闭RecycleView的滑动就好了）。
2.如果头部的布局没有超过屏幕，竟然无法滑动ScrollView（有知道解决办法的大佬万望提点一下）。
3.再search了N久之后，发现这样的嵌套还会导致RecycleView数据显示不完全（需要重写Recycle的onMeasure方法来解决）。
4.RecycleView数据加载会一次性加载完导致性能问题。
等等。。。

仍旧是N久的search，融合一下之后，终于成功做出毫无违和感的UI哈哈哈，先看图（还是一样懒，放两个静态图吧，看官们自动识别为动画哈哈）

227689079686727891.png

396872357834757756.png

下面来讲一下实现思路。

第一步：写好一个基础版的RecycleView，用GridLayoutManager布局管理器，设置列数为两列。
第二步：重写RecycleView的getItemViewType，以便于判断是否是头部，代码如下：

   @Override
    public int getItemViewType(int position) {
        if (position == 0) {
            return TYPE_HEADER;//下面第三步要用到，看仔细了
        }/*else if (position == getItemCount() - 1)
            return TYPE_FOOTER;
        */else
            return TYPE_CENTER;
    }

第三步：重写onCreateViewHolder，用于判定是加载头部布局还是普通item，代码如下：

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //找到item的布局
        View view= LayoutInflater.from(context).inflate(R.layout.my_item_layout,parent,false);
        if (viewType == TYPE_HEADER) {
            //需要深入研究一下，如果使用另一个不需要parent的参数的inflate方法，则会出现view1.getLayoutParams().height空指针异常，也就是视图为加载进来。
            View view1= LayoutInflater.from(context).inflate(R.layout.top_item,parent,false);
            view1.getLayoutParams().height = 400;//第五步代码

            return new MyViewHolder(view1);//将头部布局设置给holder
        }
        else
            return new MyViewHolder(view);//将item布局设置给holder
    }

第四步：合并1,2两个item，不写这一步的话，头部会显示在position为0的那个item上，也就是占了屏幕一半。代码如下：

var manager = GridLayoutManager(this,2)
manager.spanSizeLookup = object:GridLayoutManager.SpanSizeLookup() {
       override fun getSpanSize(p0: Int): Int {
          var type:Int = recyclerview.adapter!!.getItemViewType(p0)
          if (type == TYPE_HEADER) {
               return 2
          }
               return 1
           }
       }
recyclerview.layoutManager = manager

第五步：这时候看到的头部宽度占了屏幕的所有宽度了，但是高度跟其他的item是一样的，这时候，无论你在xml文件中怎么设置头部布局的高度，显示的高度都不会改变，这时候想到另一个办法，在onCreateViewHolder中，获取布局属性并重新设置布局高度，代码在第二步已经出现，如下

view1.getLayoutParams().height = 400;//第五步代码

到此，咱们的多列RecycleView布局就完成了。

最后编辑于：2018.10.10 12:13:34