主要为大家介绍如何用RecycleView来实现淘宝首页复杂的布局,做电商类app的小伙伴们可以略作参考。
首先上效果图:
下面说一下实现方式,主要思路就是根据不同的数据类型去制定不同的item类型,然后动态地去设置这些item的宽高,设置item的类型相信大家都会,我这里就不做阐述了,主要是说一下给不同类型的item设置不同的宽度。
首先,我们给RecyclerView设置一个列数为x的GridLayoutManager,然后再动态地为不同类型的item分别设置SpanSize。比如GridLayoutManager列数为4,item的SpanSize也为4,那么这个item的宽度就是RecyclerView宽度的100%,最终的效果就跟列表一样。同理,item的SpanSize如果是2,那么就占一行的一半宽度,item的SpanSize是1,占1/4宽度…
比如我在demo里面是把列数设为12:
HomeAdapter adapter = new HomeAdapter(this);
GridLayoutManager layoutManger = new GridLayoutManager(this, 12);
rcHome.setLayoutManager(layoutManger);
rcHome.setAdapter(adapter);
然后在adapter里面重写onAttachedToRecyclerView方法,为不同的ItemViewType设置不同的SpanSize:
@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
super.onAttachedToRecyclerView(recyclerView);
RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
if (manager instanceof GridLayoutManager) {
final GridLayoutManager gridManager = ((GridLayoutManager) manager);
gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
int type = getItemViewType(position);
switch (type) {
case BANNER:
return 12;
case COLUMN:
return 3;
case MARQUEE:
return 12;
case NUM_TWO:
return 6;
case TITLE:
return 12;
case NUM_THREE:
return 4;
case NORMAL:
return 6;
default:
return 12;
}
}
});
}
}
12代表宽度占满全屏,3代表占屏幕的1/4,6代表占屏幕的1/2等等,最终就可以实现上图中的效果。
代码不多,就直接贴在下面了:
MainActivity
public class MainActivity extends AppCompatActivity {
private Unbinder mUnBinder;
@BindView(R.id.rc_home)
RecyclerView rcHome;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mUnBinder = ButterKnife.bind(this);
initView();
}