设计图如下：
image
当设计师提出如图需求时，我开始的想法是scrollview嵌套3个recyclerview和1个viewpager 然后对最下面的recyclerview做分页加载既可。然而谷歌是不建议这样做的,因为这样无法复用。那么1个recyclerview能否实现这样的效果呢？我当时最大的疑问就是1个recyclerview怎样能同时让itemview显示1列、2列、3列呢？带着这个疑问我寻找到了GridLayoutManager的setSpanSizeLookup方法。首先介绍GridLayoutManger：
GridLayoutManager，网格布局构造方法：
GridLayoutManager(Context context, int spanCount）或
GridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout)
需要说明的是，最后一个参数表示的是是否逆向布局（意思是将数据反向显示，原先从左向右，从上至下。设为true之后全部逆转；默认的orientation为vertical，reverseLayout为false）。
其中第2个参数 spanCount 表示itemview的列数。setSpanSizeLookup方法返回当前位置的itemview跨度大小。
示例代码：
示例图.png
gridManager = new GridLayoutManager(getActivity(), 2, GridLayoutManager.VERTICAL, false);
gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
int type = getItemViewType(position);
switch (type) {
case TOP:
return 6; //spanCount=6 spanSize=6 6/6=1 表示此位置的itemview有1列
case CENTER:
return 2; //spanCount=6 spanSize=2 6/6=3 表示此位置的itemview有3列
case BOTTOM:
return 3; //spanCount=6 spanSize=3 6/3=2 表示此位置的itemview有2列
default:
return 6;
}
}
});
有了以上基础我们就可以实现具体代码了。
1.完整的Activity代码如下：
public class RecyclerViewActivity extends Activity {
private RecyclerView recyclerView;
private GridLayoutManager gridLayoutManager;
private List<PositionBean> list = new ArrayList<>();
private RecyclerViewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler_view);
initView();
getData();
}
private void initView() {
recyclerView = findViewById(R.id.recyclerview);
gridLayoutManager = new GridLayoutManager(this,6,GridLayoutManager.VERTICAL,false);
recyclerView.setLayoutManager(gridLayoutManager);
}
/**
* 模拟数据
*/
private void getData() {
PositionBean p1 = new PositionBean("top","1");
PositionBean p2 = new PositionBean("center","2");
PositionBean p3 = new PositionBean("center","3");
PositionBean p4 = new PositionBean("center","4");
PositionBean p5 = new PositionBean("bottom","5");
PositionBean p6 = new PositionBean("bottom","6");
PositionBean p7 = new PositionBean("bottom","7");
PositionBean p8 = new PositionBean("bottom","8");
list.add(p1);
list.add(p2);
list.add(p3);
list.add(p4);
list.add(p5);
list.add(p6);
list.add(p7);
list.add(p8);
adapter = new RecyclerViewAdapter(list,this);
recyclerView.setAdapter(adapter);
}
}
2.RecyclerViewAdapter代码如下：
public class RecyclerViewAdapter extends RecyclerView.Adapter {
private List<PositionBean> list;
private Context context;
private final int TOP = 0;
private final int CENTER = 1;
private final int BOTTOM = 2;
private LayoutInflater mInflater;
/**
* 当itemview移入界面可视区域
* @param holder
*/
@Override
public void onViewAttachedToWindow(@NonNull RecyclerView.ViewHolder holder) {
super.onViewAttachedToWindow(holder);
// TODO: 2019/5/28
}
/**
* 当itemview移出界面可视区域
* @param holder
*/
@Override
public void onViewDetachedFromWindow(@NonNull RecyclerView.ViewHolder holder) {
super.onViewDetachedFromWindow(holder);
// TODO: 2019/5/28
}
public RecyclerViewAdapter(List<PositionBean> list, Context context) {
this.list = list;
this.context = context;
mInflater = LayoutInflater.from(context);
}
@Override
public void onAttachedToRecyclerView(@NonNull 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 TOP:
return 6; //spanCount=6 spanSize=6 6/6=1 表示此位置的itemview有1列
case CENTER:
return 2;
case BOTTOM:
return 3;
default:
return 6;
}
}
});
}
}
@Override
public int getItemViewType(int position) {
if (list.get(position).getType().equals("top")){
return TOP;
}else if (list.get(position).getType().equals("center")){
return CENTER;
}else {
return BOTTOM;
}
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
//根据不同的type类型加载不同的ViewHolder,此例不做展示
if (viewType == TOP){
return new ViewHolder(mInflater.inflate(R.layout.item_recyclerview,parent,false));
}else if (viewType == CENTER){
return new ViewHolder(mInflater.inflate(R.layout.item_recyclerview,parent,false));
}else {
return new ViewHolder(mInflater.inflate(R.layout.item_recyclerview,parent,false));
}
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
if (holder instanceof ViewHolder){
((ViewHolder) holder).textView.setText(list.get(position).getNum());
}
}
@Override
public int getItemCount() {
return list.size();
}
class ViewHolder extends RecyclerView.ViewHolder{
private TextView textView;
public ViewHolder(View itemView) {
super(itemView);
textView = itemView.findViewById(R.id.text);
}
}
}
activity布局里一个recyclerview、itemview布局里一个textview，代码就不贴了。最后实现效果如图：
示例图.png
在实际开发中，我们经常有如下需求：当recyclerview的某个itemview出现在屏幕可视区域时，调用一些方法。当itemview移出屏幕时停止调用（例如我第一张设计图所示：当某个itemview移入屏幕可视区域时，这个itemview上播放一段视频，当这个itemview移出屏幕可视区域，视频停止播放）。
我们看到在RecyclerViewAdapter里我复写了onViewAttachedToWindow()和onViewDetachedFromWindow()这2个方法。我们可以在onViewAttachedToWindow()里做初始化播放器、播放等操作，在onViewDetachedFromWindow()里暂停或者销毁播放器。
网友评论