RecyclerView让列表嵌套如此简单

Posted 2020-10-02 星辰

平常开发时，相信像这样的页面，大家一定是遇到过的。这里比较坑爹的地方在于呢：列表嵌套。订单列表中的每一项，都包含一个商品列表。像这种需求，大家会如何实现呢？

这里呢，说一下我自己的思路，我没有使用列表嵌套，而是，将原有的Order拆分成了三个布局类型：Head、Body、Foot，一个Body就是一个商品，有多个商品就有多个Body。

然后，使用我自己封装的一套Adapter,让多布局更加简单易用。关于我的这个Adapter库,详见：Adapter的封装之路

不过，这里稍稍麻烦的一点就是，得到网络数据之后，我们需要对原始的List<Order>进行加工，转换成我们需要的List<LayoutWrapper>，具体转换的方法，类似于我这里的mockData里面的方法。

每一个LayoutWrapper都会持有：布局id、实体类、实体的展示类

其实，这里的实体展示类，如果是公用的，最好不要做成内部类，做成外部类

/**
 * 今日订单数
 * <p>
 * 作者：余天然 on 2017/3/6 下午12:01
 */
@Route(path = "/home/order")
public class TodayOrderActivity extends BaseActivity {

    @BindView(R.id.rv_content)
    RecyclerView rvContent;

    int[] layoutIds = {
            R.layout.item_home_order_head,
            R.layout.item_home_order_body,
            R.layout.item_home_order_foot,
            R.layout.item_divider10_gray,
            R.layout.item_divider10_white,
    };

    SuperAdapter adapter;

    @Override
    protected int createLayoutId() {
        return R.layout.activity_today_order;
    }

    @Override
    public void initWidget() {
        setTitleText("今日订单");

        rvContent.setLayoutManager(new LinearLayoutManager(this));
        adapter = new SuperAdapter(this, layoutIds);
        rvContent.setAdapter(adapter);
        DividerFactory.setDivider(rvContent, DividerType.FOOT, R.color.gray_divider, R.dimen.divider_1, LinearLayoutManager.VERTICAL);

        adapter.setData(mockData());
    }

    private List<LayoutWrapper> mockData() {
        List<LayoutWrapper> wrappers = new ArrayList<>();
        wrappers.add(new LayoutWrapper(R.layout.item_divider10_gray, "", null));
        wrappers.add(new LayoutWrapper(R.layout.item_home_order_head, "广州尚都布业", headDisplayer));
        wrappers.add(new LayoutWrapper(R.layout.item_home_order_body, "一键开单", bodyDisplayer));
        wrappers.add(new LayoutWrapper(R.layout.item_home_order_foot, new FootItem(1, "90.00"), footDisplayer));

        wrappers.add(new LayoutWrapper(R.layout.item_divider10_gray, "", null));
        wrappers.add(new LayoutWrapper(R.layout.item_home_order_head, "王鹏", headDisplayer));
        wrappers.add(new LayoutWrapper(R.layout.item_home_order_body, "全棉色织格子布", bodyDisplayer));
        wrappers.add(new LayoutWrapper(R.layout.item_divider10_white, "", null));
        wrappers.add(new LayoutWrapper(R.layout.item_home_order_body, "尼龙", bodyDisplayer));
        wrappers.add(new LayoutWrapper(R.layout.item_home_order_foot, new FootItem(2, "170.00"), footDisplayer));

        return wrappers;
    }

    DataDisplayer<String> headDisplayer = new DataDisplayer<String>() {
        @Override
        public void bindData(BaseViewHolder holder, String item, int position) {
            holder.setText(R.id.tv_name, item);
        }
    };

    DataDisplayer<String> bodyDisplayer = new DataDisplayer<String>() {
        @Override
        public void bindData(BaseViewHolder holder, String item, int position) {
            holder.setText(R.id.tv_goods, item);
        }
    };


    DataDisplayer<FootItem> footDisplayer = new DataDisplayer<FootItem>() {
        @Override
        public void bindData(BaseViewHolder holder, FootItem item, int position) {
            String price = String.format("合计  ¥%s", item.price);
            String number = String.format("(共%s件商品 优惠¥12 运费到付)", item.number);
            holder.setText(R.id.tv_total_price, price);
            holder.setText(R.id.tv_total_number, number);
        }
    };

    class FootItem {
        Integer number;
        String price;

        public FootItem(Integer number, String price) {
            this.number = number;
            this.price = price;
        }
    }
}