RecyclerView多item布局实现
第一家公司做外包,做过不少电商项目,首页设计基本都是这个样 ![](https://img-blog.csdn.net/20180623013848631?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2MDQ5NzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
从上至下分别一个轮播图框,一个横向滑动的view用来展示一些特殊的列表,几个快捷菜单,和一个显示商品的列表。
实际应用里截图:
这里就用一个基本的例子来实现如何RecyclerView怎么进行多item布局。
先看效果图:
首先,轮播图的bean,横向List的bean,和正常list的bean肯定不同,而adapter只有一个与一个数组绑定,所以三种bean要可以是统一类型的bean,所以我定义了一个三种bean的父类bean就叫它ExampleBaseBean
public class ExampleBaseBean { private int viewType; public int getViewType() { return viewType; } public void setViewType(int viewType) { this.viewType = viewType; } }
如代码所示,这个BaseBean主要作用就是提供一个int类型的vieType的对象用来区分不同类型的bean。
有了BaseBean,接下来就是三种bean了。
public class TitleBean extends ExampleBaseBean { //轮播bean,为了方便叫titleBean private List<String> titles;//轮播的数据源一般都为数组。 public List<String> getTitles() { return titles; } public void setTitles(List<String> titles) { this.titles = titles; } }
public class BodyBean extends ExampleBaseBean { //中间横向滑动的bean ,通常都有图片展示,这里用本地图片展示 private List<Integer> res; public List<Integer> getRes() { return res; } public void setRes(List<Integer> res) { this.res = res; } }
public class FootBean extends ExampleBaseBean { //正常列表的bean private String str; public FootBean(String str) { this.str = str; } public String getStr() { return str; } }
三种bean定义完,该着手adapter了。
public class ExampleAdapter extends RecyclerView.Adapter { public final static int TITLE = 1001;//标题的viewType public final static int BODY = 1002;//横向列表的viewType public final static int FOOT = 1003;//正常列表的viewType private List<ExampleBaseBean> mlist;//adapter的数据源 private Context context; private LayoutInflater inflater; public ExampleAdapter(List<ExampleBaseBean> mlist) { this.mlist = mlist; }
首先在这个adapter里将会用到viewtype写成静态常量,方便外面统一。
先写三种bean对应的ViewHolder:
private class TitleHolder extends RecyclerView.ViewHolder { ViewPager vp; public TitleHolder(View itemView) { super(itemView); vp = itemView.findViewById(R.id.vp); } } private class BodyHolder extends RecyclerView.ViewHolder { RecyclerView rv; public BodyHolder(View itemView) { super(itemView); rv = itemView.findViewById(R.id.rv); } } private class FootHolder extends RecyclerView.ViewHolder { TextView tv_foot; public FootHolder(View itemView) { super(itemView); tv_foot = itemView.findViewById(R.id.tv_foot); } }
三种ViewHolder写完了,然后就是复写RecyclerView.Adapter的getItemViewType方法来控制它返回给onCreateViewHolder的viewType:
@Override public int getItemViewType(int position) { if (mlist.size() > 0) { return mlist.get(position).getViewType(); } return super.getItemViewType(position); }
然后就是adapter的主要方法onCreateViewHolder方法:
@NonNull @Override public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { if (context == null) context = parent.getContext(); if (inflater == null) inflater = LayoutInflater.from(context); View view; switch (viewType) { case TITLE: view = inflater.inflate(R.layout.listitem_title, parent, false); return new TitleHolder(view); case BODY: view = inflater.inflate(R.layout.listitem_body, parent, false); return new BodyHolder(view); case FOOT: view = inflater.inflate(R.layout.listitem_foot, parent, false); return new FootHolder(view); } return null; }
根据onCreateViewHolder方法传来的viewType进行判断然后返回对应item布局的ViewHolder。
ViewHolder会被传到onBindViewHolder方法,接下来就只再要实现onBindViewHolder里就OK了。
@Override public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) { if (holder instanceof TitleHolder) { TitleBean titleBean = (TitleBean) mlist.get(position); ((TitleHolder) holder).vp.setAdapter(new PagerAdapter(titleBean.getTitles())); } if (holder instanceof BodyHolder) { BodyBean bodyBean = (BodyBean) mlist.get(position); ((BodyHolder) holder).rv.setLayoutManager(new LinearLayoutManager(context, LinearLayout.HORIZONTAL, false)); ((BodyHolder) holder).rv.setAdapter(new BodyAdapter(bodyBean.getRes())); } if (holder instanceof FootHolder) { FootBean footBean = (FootBean) mlist.get(position); ((FootHolder) holder).tv_foot.setText(footBean.getStr()); } }
这里的viewPager的adapter我图省事直接写成内部类了
private class PagerAdapter extends android.support.v4.view.PagerAdapter { List<String> stringList; public PagerAdapter(List<String> stringList) { this.stringList = stringList; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { ViewPager.LayoutParams params = new ViewPager.LayoutParams(); params.width = ViewPager.LayoutParams.WRAP_CONTENT; params.height = ViewPager.LayoutParams.WRAP_CONTENT; params.gravity = Gravity.CENTER; TextView textView = new TextView(container.getContext()); textView.setText(stringList.get(position)); textView.setTextSize(30); textView.setTextColor(Color.parseColor("#333333")); textView.setLayoutParams(params); container.addView(textView); return textView; } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View) object); } @Override public int getCount() { return stringList.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; } }
还有一个Body的adapter就是平时展示一种数据的adapter,这里也贴一下。
public class BodyAdapter extends RecyclerView.Adapter { private List<Integer> res; public BodyAdapter(List<Integer> res) { this.res = res; } @NonNull @Override public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.listitem_body_img, parent, false); return new ImgHolder(view); } @Override public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) { if (holder instanceof ImgHolder) { ((ImgHolder) holder).iv.setImageResource(res.get(position)); } } private class ImgHolder extends RecyclerView.ViewHolder { ImageView iv; public ImgHolder(View itemView) { super(itemView); iv = itemView.findViewById(R.id.iv); } } @Override public int getItemCount() { return res.size(); } }
还有就是Acitivy里模拟数据的添加代码:
public class ExampleActivity extends AppCompatActivity { private ExampleAdapter adapter; private List<ExampleBaseBean> mlist = new ArrayList<>(); private RecyclerView rv; private Context context; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_example); context = this; rv = findViewById(R.id.rv); initTitle(); initBody(); initFoot(); initAdapter(); } private void initFoot() { for (int i = 0; i < 10; i++) { FootBean footBean=new FootBean("foot:"+i); footBean.setViewType(ExampleAdapter.FOOT);//正常列表 mlist.add(footBean); } } private void initBody() { List<Integer> res = new ArrayList<>(6); res.add(R.mipmap.pic1); res.add(R.mipmap.pic2); res.add(R.mipmap.pic3); res.add(R.mipmap.pic4); res.add(R.mipmap.pic5); res.add(R.mipmap.pic6); BodyBean bodyBean = new BodyBean(); bodyBean.setRes(res); bodyBean.setViewType(ExampleAdapter.BODY);//设置横向列表的类型 mlist.add(bodyBean); } private void initTitle() { List<String> titles = new ArrayList<>(5); for (int i = 0; i < 5; i++) { titles.add(new StringBuilder("标题").append(i).toString()); } TitleBean titleBean = new TitleBean(); titleBean.setTitles(titles); titleBean.setViewType(ExampleAdapter.TITLE);//设置为轮播类型 mlist.add(titleBean); } private void initAdapter() { if (adapter == null) { adapter = new ExampleAdapter(mlist); rv.setLayoutManager(new LinearLayoutManager(context)); rv.setAdapter(adapter); } else { adapter.notifyDataSetChanged(); } } }
Item的xml布局也极其简单都是只有一个控件,就不贴了。