首页 > 代码库 > RecycleView混合布局
RecycleView混合布局
本来想把公司的UI图放上来，考虑到版权等未知因素，就拿网上的图来说了：
类似的这种布局，有的一行只有一张图片，有的一行有两个元素，有个一行有三个元素。。就是混合的布局方式
参考文献：
https://github.com/CymChad/BaseRecyclerViewAdapterHelper/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%8D%E5%90%8C%E7%9A%84item%E7%B1%BB%E5%9E%8B
http://blog.csdn.net/walterzhoukick/article/details/52687957
原理：
BaseRecyclerViewAdapterHelper是封装好的Adapter框架，使用网格布局，每行所占格子数是1/2/3的最小公倍数，如果一张图占6格，就是一行，如果一张图占2格，就是一行3张图，如果一张图占3格，就是一行两张图；
代码：（未完成，待续）
public class First3Fragment extends BaseFragment { @BindView(R.id.search) ImageView search; @BindView(R.id.recyclerView) XRecyclerView recyclerView; private Fp3Adapter adapter; private List<String> list; @Override public int getContentId() { return R.layout.fragment_first3; } @Override public void initData() { super.initData(); list = new ArrayList<>(); for (int i = 0; i < 50; i++) { list.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492579882060&di=1c2b75e87149909884f75ad013ceb4c0&imgtype=0&src=http://www.mamicode.com/http%3A%2F%2Fimg.sj33.cn%2Fuploads%2Fallimg%2F201302%2F1-130201105204.jpg"); } recyclerView.setLayoutManager(new GridLayoutManager(recyclerView.getContext(), 6, GridLayoutManager.VERTICAL, false)); recyclerView.setAdapter(adapter = new Fp3Adapter(list, getActivity())); } }
public class Fp3Adapter extends BaseMultiItemQuickAdapter { private Context context; private List<String> list; public static final int TYPE_BANNER = 0xff01;//banner public static final int TYPE_TOP_ENTER = 0xff02;//顶部导航 public static final int TYPE_TODAY_LIVE = 0xff03;//一张图片 public static final int TYPE_TITLE = 0xff04;//标题 public static final int TYPE_HOT_POINT = 0xff05;//热点培训item public static final int TYPE_ASK_ADVICE = 0xff06;//问道求教item public static final int TYPE_MORE_CHANGE = 0xff07;//查看更多和换一批 public static final int TYPE_MIX_LIGHT_COURSE = 0xff08;//混学课和轻学课item public static final int TYPE_MIN_COURSE = 0xff09;//微训课item public static final int TYPE_SOLUTION = 0xff0a;//解决方案item public static final int TYPE_CLASSIC_REVIEW = 0xff0b;//经典回顾item public static final int TYPE_SALON_ACTIVE = 0xff0c;//沙龙活动item public static final int TYPE_CLASSIC_TOOL = 0xff0d;//经典工具item public static final int TYPE_BUTTOM_ADS = 0xff0e;//底部广告 public Fp3Adapter(List list, Context context) { super(list); this.context = context; addItemLayout(); } @Override protected int getDefItemViewType(int position) { if (position == 0) { return TYPE_BANNER; } else if (position == 1) { return TYPE_TOP_ENTER; } else if (position == 2) { return TYPE_TODAY_LIVE; } else if (position == 3 || position == 9 || position == 14 || position == 18 || position == 22 || position == 26 || position == 31 || position == 34 || position == 38) { return TYPE_TITLE; } else if (position >= 4 && position <= 8) { return TYPE_HOT_POINT; } else if (position >= 10 && position <= 12) { return TYPE_ASK_ADVICE; } else if (position == 13 || position == 17 || position == 21 || position == 25 || position == 30 || position == 37) { return TYPE_MORE_CHANGE; } else if ((position >= 15 && position <= 16) || (position >= 19 && position <= 20)) { return TYPE_MIX_LIGHT_COURSE; } else if (position >= 23 && position <= 24) { return TYPE_MIN_COURSE; } else if (position >= 27 && position <= 29) { return TYPE_SOLUTION; } else if (position >= 32 && position <= 33) { return TYPE_CLASSIC_REVIEW; } else if (position >= 35 && position <= 36) { return TYPE_SALON_ACTIVE; } else if (position >= 39 && position <= 41) { return TYPE_CLASSIC_TOOL; } else { return TYPE_BUTTOM_ADS; } } @Override protected void convert(BaseViewHolder holder, MultiItemEntity item) { switch (holder.getItemViewType()) { case TYPE_BANNER: setBanner(holder); break; case TYPE_TOP_ENTER: setTopEnter(holder); break; case TYPE_TODAY_LIVE: setTodayLive(holder, (MultipleItem) item); break; case TYPE_TITLE: setTitle(holder); break; case TYPE_HOT_POINT: setHotPoint(holder, (MultipleItem) item); break; case TYPE_ASK_ADVICE: setAskAdvice(holder, (MultipleItem) item); break; case TYPE_MORE_CHANGE: setMoreChange(holder); break; case TYPE_MIX_LIGHT_COURSE: break; case TYPE_MIN_COURSE: break; case TYPE_SOLUTION: break; case TYPE_CLASSIC_REVIEW: break; case TYPE_SALON_ACTIVE: break; case TYPE_CLASSIC_TOOL: break; case TYPE_BUTTOM_ADS: break; } } /** * 更多和换一批 */ private void setMoreChange(BaseViewHolder holder) { final int position = holder.getAdapterPosition(); holder.setOnClickListener(R.id.more, new View.OnClickListener() { @Override public void onClick(View v) { switch (position) { case 13: break; case 17: break; case 21: break; case 25: break; case 30: break; case 37: break; } } }); holder.setOnClickListener(R.id.change, new View.OnClickListener() { @Override public void onClick(View v) { switch (position) { case 13: break; case 17: break; case 21: break; case 25: break; case 30: break; case 37: break; } } }); } /** * 问道求教 */ private void setAskAdvice(BaseViewHolder holder, MultipleItem item) { holder.setOnClickListener(R.id.ask_layout, new View.OnClickListener() { @Override public void onClick(View v) { } }); } /** * 培训热点 */ private void setHotPoint(BaseViewHolder holder, MultipleItem item) { holder.setText(R.id.title, "");// TODO: 2017/4/21 } /** * 标题 */ private void setTitle(BaseViewHolder holder) { int position = holder.getAdapterPosition(); switch (position) { case 3: holder.setImageResource(R.id.title, R.drawable.index_icon_title_news); holder.setImageResource(R.id.operate, R.drawable.index_btn_more); holder.setVisible(R.id.operate, true); holder.setOnClickListener(R.id.operate, new View.OnClickListener() { @Override public void onClick(View v) { } }); break; case 9: holder.setImageResource(R.id.title, R.drawable.index_icon_title_wendao); holder.setVisible(R.id.operate, false); break; case 14: holder.setImageResource(R.id.title, R.drawable.index_icon_title_hunxue); holder.setVisible(R.id.operate, false); break; case 18: holder.setImageResource(R.id.title, R.drawable.index_icon_title_qinxue); holder.setVisible(R.id.operate, false); break; case 22: holder.setImageResource(R.id.title, R.drawable.index_icon_title_weixun); holder.setVisible(R.id.operate, false); break; case 26: holder.setImageResource(R.id.title, R.drawable.index_icon_title_solution); holder.setVisible(R.id.operate, false); break; case 31: holder.setImageResource(R.id.title, R.drawable.index_icon_title_classic); holder.setVisible(R.id.operate, false); break; case 34: holder.setImageResource(R.id.title, R.drawable.index_icon_title_salon); holder.setVisible(R.id.operate, false); break; case 38: holder.setImageResource(R.id.title, R.drawable.index_icon_title_tool); holder.setImageResource(R.id.operate, R.drawable.index_btn_change); holder.setVisible(R.id.operate, true); holder.setOnClickListener(R.id.operate, new View.OnClickListener() { @Override public void onClick(View v) { } }); break; } } /** * 今日直播 */ private void setTodayLive(BaseViewHolder holder, MultipleItem item) { Picasso.with(context).load(item.getUrl()).into((ImageView) holder.getView(R.id.pic)); } /** * 顶部导航 */ private void setTopEnter(BaseViewHolder holder) { holder.setOnClickListener(R.id.hr, new View.OnClickListener() { @Override public void onClick(View v) { } }); holder.setOnClickListener(R.id.leaderShip, new View.OnClickListener() { @Override public void onClick(View v) { } }); holder.setOnClickListener(R.id.marketing, new View.OnClickListener() { @Override public void onClick(View v) { } }); holder.setOnClickListener(R.id.finance, new View.OnClickListener() { @Override public void onClick(View v) { } }); holder.setOnClickListener(R.id.all, new View.OnClickListener() { @Override public void onClick(View v) { } }); } /** * 轮播图 */ private void setBanner(BaseViewHolder holder) { List<String> images = initImages(); Banner banner = holder.getView(R.id.banner); //设置banner样式 banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR); //设置图片加载器 banner.setImageLoader(new GlideImageLoader()); //设置图片集合 banner.setImages(images); //设置banner动画效果 banner.setBannerAnimation(Transformer.ZoomOutSlide); //设置自动轮播，默认为true banner.isAutoPlay(true); //设置轮播时间 banner.setDelayTime(1500); banner.setOnBannerClickListener(new OnBannerClickListener() { @Override public void OnBannerClick(int position) { } }); //设置指示器位置（当banner模式中有指示器时） banner.setIndicatorGravity(BannerConfig.CENTER); //banner设置方法全部调用完毕时最后调用 banner.start(); } private List<String> initImages() { List<String> images = new ArrayList<>(); images.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492579882061&di=8cb3791dc56819697520bd12a10e248a&imgtype=0&src=http://www.mamicode.com/http%3A%2F%2Fs8.sinaimg.cn%2Flarge%2F001fLzaQzy7aa4u3tSR85"); images.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492579882060&di=1c2b75e87149909884f75ad013ceb4c0&imgtype=0&src=http://www.mamicode.com/http%3A%2F%2Fimg.sj33.cn%2Fuploads%2Fallimg%2F201302%2F1-130201105204.jpg"); images.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492579882058&di=33baccb62904b5f556770bf90ec9a1c8&imgtype=0&src=http://www.mamicode.com/http%3A%2F%2Fimg.sj33.cn%2Fuploads%2Fallimg%2F201302%2F1-130201105055.jpg"); images.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492579882054&di=cfe48b38f5c1ead1f8e9a3c9ccaa5299&imgtype=0&src=http://www.mamicode.com/http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F39%2F85%2F74C58PICgy4_1024.jpg"); return images; } @Override public void onAttachedToRecyclerView(RecyclerView recyclerView) { super.onAttachedToRecyclerView(recyclerView); final 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 TYPE_BANNER: case TYPE_TOP_ENTER: case TYPE_TODAY_LIVE: case TYPE_TITLE: case TYPE_HOT_POINT: case TYPE_MIX_LIGHT_COURSE: case TYPE_MORE_CHANGE: case TYPE_MIN_COURSE: case TYPE_SALON_ACTIVE: return gridManager.getSpanCount(); case TYPE_ASK_ADVICE: case TYPE_SOLUTION: case TYPE_CLASSIC_TOOL: return 2; case TYPE_CLASSIC_REVIEW: case TYPE_BUTTOM_ADS: return 3; default: return 6; } } }); } } /** * 绑定不同布局 */ private void addItemLayout() { addItemType(TYPE_BANNER, R.layout.fp3_banner); addItemType(TYPE_TOP_ENTER, R.layout.fp3_top_enters); addItemType(TYPE_TODAY_LIVE, R.layout.fp3_image); addItemType(TYPE_TITLE, R.layout.fp3_title); addItemType(TYPE_HOT_POINT, R.layout.fp3_hot_point_item); addItemType(TYPE_ASK_ADVICE, R.layout.fp3_ask_item); addItemType(TYPE_MORE_CHANGE, R.layout.fp3_more_change); addItemType(TYPE_MIX_LIGHT_COURSE, R.layout.fp3_mix_light_course_item); addItemType(TYPE_MIN_COURSE, R.layout.fp3_min_course_item); addItemType(TYPE_SOLUTION, R.layout.fp3_solution_item); addItemType(TYPE_CLASSIC_REVIEW, R.layout.fp3_classic_review_item); addItemType(TYPE_SALON_ACTIVE, R.layout.fp3_salon_item); addItemType(TYPE_CLASSIC_TOOL, R.layout.fp3_classic_tool_item); addItemType(TYPE_BUTTOM_ADS, R.layout.fp3_image); } }
RecycleView混合布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。