設(shè)計圖如下：
image
??當設(shè)計師提出如圖需求時，我開始的想法是scrollview嵌套3個recyclerview和1個viewpager 然后對最下面的recyclerview做分頁加載既可砚著。然而谷歌是不建議這樣做的,因為這樣無法復(fù)用辕漂。那么1個recyclerview能否實現(xiàn)這樣的效果呢？我當時最大的疑問就是1個recyclerview怎樣能同時讓itemview顯示1列、2列、3列呢？帶著這個疑問我尋找到了GridLayoutManager的setSpanSizeLookup方法禽拔。首先介紹GridLayoutManger：
??GridLayoutManager，網(wǎng)格布局構(gòu)造方法：
??GridLayoutManager(Context context, int spanCount）或
??GridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout)
??需要說明的是室叉，最后一個參數(shù)表示的是是否逆向布局（意思是將數(shù)據(jù)反向顯示睹栖，原先從左向右，從上至下茧痕。設(shè)為true之后全部逆轉(zhuǎn)野来；默認的orientation為vertical，reverseLayout為false）踪旷。
其中第2個參數(shù) spanCount 表示itemview的列數(shù)曼氛。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/2=3 表示此位置的itemview有3列
case BOTTOM:
return 3; //spanCount=6 spanSize=3 6/3=2 表示此位置的itemview有2列
default:
return 6;
}
}
});
??有了以上基礎(chǔ)我們就可以實現(xiàn)具體代碼了令野。
??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);
}
/**
* 模擬數(shù)據(jù)
*/
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移入界面可視區(qū)域
* @param holder
*/
@Override
public void onViewAttachedToWindow(@NonNull RecyclerView.ViewHolder holder) {
super.onViewAttachedToWindow(holder);
// TODO: 2019/5/28
}
/**
* 當itemview移出界面可視區(qū)域
* @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) {
//根據(jù)不同的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，代碼就不貼了气破。最后實現(xiàn)效果如圖：
示例圖.png
??在實際開發(fā)中聊浅，我們經(jīng)常有如下需求：當recyclerview的某個itemview出現(xiàn)在屏幕可視區(qū)域時，調(diào)用一些方法现使。當itemview移出屏幕時停止調(diào)用（例如我第一張設(shè)計圖所示：當某個itemview移入屏幕可視區(qū)域時低匙，這個itemview上播放一段視頻，當這個itemview移出屏幕可視區(qū)域碳锈，視頻停止播放）顽冶。
??我們看到在RecyclerViewAdapter里我復(fù)寫了onViewAttachedToWindow()和onViewDetachedFromWindow()這2個方法。我們可以在onViewAttachedToWindow()里做初始化播放器殴胧、播放等操作渗稍，在onViewDetachedFromWindow()里暫团宄伲或者銷毀播放器团滥。
