Skip to content

创建一个简单的页面

DONG edited this page Oct 23, 2019 · 1 revision

步骤:

  1. 根据设计稿规划出 Section 以及各个 Section 对应的 Header, Footer.
  2. 创建各个 Section, Header, Footer 对应的 provider.
  3. 创建 Adapter 配置各个 provider.
  4. 将该 Adapter 设置给 RecycleView.

创建 SectionProvider

Demo 中的 NewsItemProvider 为例, 该 Section 显示一个新闻的列表, 对应的数据源为 List<NewsBean>, 所以列表里元素的个数就是 List 的大小:

// 注意指定外部传入的数据类型
public class NewsItemProvider extends BaseItemProvider<List<NewsBean>> {

    // 内部持有数据源的引用
    private List<NewsBean> mData;

    public NewsItemProvider(Context context) {
        super(context);
        mData = new ArrayList<>();
    }

    @Override
    public int getItemCount() {
        return mData.size(); // 内部元素的个数等于数据源的个数
    }

    @Override
    public int getLayout() {
        return R.layout.item_complex_news_item; // 内部元素的 Layout
    }

    @Override
    public void onBind(BaseViewHolder holder, IndexPath indexPath) {
        // 通过 IndexPath 获得数据源里对应位置的元素数据
        // IndexPath 是通过 Section, Row 两个坐标构成的
        // Section 代表从 0 开始的第几个区块
        // Row 代表该区块中的第几行. (header/footer不计算在内)
        NewsBean news = mData.get(indexPath.getRow());

        holder.setText(R.id.tv_title, news.getTitle());
        holder.setText(R.id.tv_content, news.getContent());
    }
    
    // 这里覆写了 setData/addData
    // 但其实用户可以自定义方法来传入参数
    // 这里 setData/addData 只是为了规范数据入口. 
    // setData 是传入新数据源, addData 是在原来的数据源上增加
    @Override
    public void setData(List<NewsBean> newData) {
        this.mData = newData;
    }

    @Override
    public void addData(List<NewsBean> moreData) {
        this.mData.addAll(moreData);
    }
}

我们推荐使用者遵循 setData/addData 的规范. 提高程序的可读性.

配置 Adapter

各个需要的 Provider 创建好后, 就可以开始配置 Adapter, 必须要继承 BaseAdapter:

public class DemoAdapter extends BaseAdapter {

    private BannerProvider mImageProvider;
    private ButtonGroupProvider mButtonGroupProvider;
    private NewsItemProvider mNewsItemProvider;
    private ProjectItemProvider mProjectItemProvider;

    public ComplexAdapter(Context context) {
        super(context);
        
        // 初始化各个 Section
        mImageProvider = new BannerProvider(context);
        mButtonGroupProvider = new ButtonGroupProvider(context);
        mNewsItemProvider = new NewsItemProvider(context);
        mProjectItemProvider = new ProjectItemProvider(context);
        
        // 一定要在最后调用此方法通知初始化完成
        finishInitialize();
    }

    @Override
    public void registerItemProvider() {
        // 按显示顺序注册各个 Section
        mProviderDelegate.registerProviders(
                mImageProvider,
                mButtonGroupProvider,
                mNewsItemProvider,
                mProjectItemProvider
        );
    }
    
    // 暴露给外部传入数据的方法
    public void setNewsData(List<NewsBean> newData) {
        mNewsItemProvider.setData(newData);
        notifySectionChanged(2); // 通知刷新. 因为是列表当中第 3 个 Section
    }
}

设置 RecyclerView

mAdapter = new DemoAdapter(this);
mRecyclerView.setAdapter(mAdapter);