How to make RecyclerView have items of different sizes

How to make RecyclerView have items of different sizes

     One of the requirements in our project development is as follows: we have a row of keywords on the left. After the user slides to a keyword with the remote control, the corresponding search result is requested later. The search result is a gridView. In general, Each row of gridView is arranged with 4 items of the same size , but for the item requirements of special search results, 2 items are arranged in each row.

analyze:

(1) Can it be implemented with GridView?

     We all know that the width and height of each layout of GridView must be the same, (HeadView we will not consider). You can basically give up using the gridView method.

(2) What about using gridLayout?

    gridLayout has the function of merging cells, but it can meet the basic style, but there are too many search results, because gridLayout has no reuse function, so this solution can also be abandoned.

The following is a brief introduction to my latest research solution, which is implemented with RecyclerView. The principle is very simple. It is implemented using the GridLayoutManager.SpanSizeLookup class, which is an abstract class with an abstract method of getSpanSize(). This method is easier to understand than abstract. I will post my code first, and I will post it later.

Explain in detail slowly. 

 

package tv.lesports.com.myrecyclerview;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;


import java.util.ArrayList;

/**
 * Created by liuyu8 on 2016/5/3.
 */
public class RecyclerViewActivity extends Activity {
    private RecyclerView mRecyclerView;
    private HomeAdapter mAdapter;
    private ArrayList<SearchResultBean> mDataList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        setContentView(R.layout.recyclerview_layout);
        initData ();
        mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview);
        GridLayoutManager manager = new GridLayoutManager(this, 4);
        manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
               SearchResultBean bean = mDataList.get(position);
                if (bean.getType() == 0) {
                    return 4;
                } else if(bean.getType() == 1){
                    return 2;
                }else{
                    return 1;
                }
            }
        });
        mRecyclerView.setLayoutManager (manager);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mAdapter = new HomeAdapter(this, mDataList);
        mRecyclerView.setAdapter(mAdapter);
    }

    protected void initData() {
        mDataList = new ArrayList<SearchResultBean>();
        for (int i = 0; i < 50; i++) {
            SearchResultBean bean = new SearchResultBean();
            bean.setName(i + "");
            if (i == 0) {
                bean.setType(0);
            } else if (i > 0 && i <= 5) {
                bean.setType(1);
            } else {
                bean.setType(2);
            }
            mDataList.add(bean);
        }
    }
}

 

 In the above code, the direction of RecyclerView is vertical. It is implemented by a GridLayout with a TotalspanSize of 4. One parameter in the getSpanSize method is position. We can equivalently understand this method through the weight in LinearLayout, assuming that Recycler is a For linear layout, TotalSpan is equivalent to the total weight value, and getSpanSize(int position) represents the weight value of the width of the item whose position is position to the total width of the RecyclerView.

The above code means the same as:

(1) The weight value of the item with position = 0 is 4, so the width of the item with position equal to 0 is equal to the width of the RecyclerView

(2) The weight value of the item whose position range is (0,5] is 2, so the width of the item whose position range is (0,5) is 1/2 of the width of the RecyclerView.

(3) The weight value of the item with position (5,50) is 1, so the width of the item with the position range of (5,50) is 1/4 of the width of the RecyclerView

Note: The padding value between items is ignored.

 

The effect diagram is as follows: