怎么实现让RecyclerView有不同尺寸的item
如何实现让RecyclerView有不同尺寸的item
我们的项目开发中有一个需求是这样的:我们左边有一排关键字,用户用遥控器滑动到某个关键字后,后边就要求出相应的搜索结果,搜索结果是一个gridView,一般情况下,gridView每行排列着是4个相同尺寸的item,但是针对特殊的搜索结果的item要求,每行排列2个。
分析:
(1) 可不可以用GridView实现呢?
我们都知道GridView的每个布局的宽和高必须是一样的,(HeadView咱们就不考虑了)。用gridView的方式基本可以放弃了。
(2) 用gridLayout实现呢?
gridLayout有合并单元格的功能,倒是可以满足基本的样式,但是搜索结果一多,由于gridLayout没有复用功能,所以这种方案也可以放弃了。
下面介绍我最新研究出来的方案,用RecyclerView来实现,原理很简单,利用的是GridLayoutManager.SpanSizeLookup这个类来实现,该类是一个抽象类,里面有个getSpanSize()的抽象方法。这个方法理解起来比抽象,我先贴出我的代码,后面会
慢慢再详细解释。
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);
}
}
}
上面代码中,RecyclerView的方向是垂直的,它由通过一个TotalspanSize为4的GridLayout实现的,getSpanSize方法中有一个参数是position,我们可以等价的通过LinearLayout中weight来理解该方法,假设Recycler是一个线性布局,TotalSpan等同于总的weight值,getSpanSize(int position)代表的是位置为position的item宽度占RecyclerView总宽度的weight值。
上面代码的意思等同于:
(1)position = 0 的item的weight值为4,所以position等于0的item宽等于RecyclerView的宽度
(2)position范围在(0,5]的item的weight值为2,所以position范围在(0,5]的item的宽度为RecyclerView宽度的1/2
(3)position(5,50)的item的weight值为1,所以position范围在(5,50)的item的宽度为RecyclerView宽度的1/4
注明:忽略item之间的padding值。
效果图如下: