仿电商App：笔记（九）：主界面-商品分类开发（多布局Section RecyclerView）

最新推荐文章于 2024-08-30 08:27:36 发布

qq_41853047

最新推荐文章于 2024-08-30 08:27:36 发布

阅读量998

点赞数

分类专栏： latte项目

本文链接：https://blog.youkuaiyun.com/qq_41853047/article/details/107549399

版权

主界面-商品分类开发（多布局Section RecyclerView）

3、多布局Section列表实现与分类列表点击事件

逻辑：分类界面里面分为左侧列表和右侧内容两个Fragment，点击左侧列表每个item会对应切换右侧内容的fragment。id通过Bundle在fragment中传递（可通过分类界面显示指定默认右侧content页面），左侧的每个item包含id属性，点击不同item，id不同，切换右侧content页面。

1、分类页面结构解析和开发

1.1 分页结构布局

位于latte-ec模块res->layout包下delegate_sort.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:paddingTop="6dp"
            android:text="分类"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </androidx.appcompat.widget.Toolbar>

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/app_background"
        android:baselineAligned="true"
        android:orientation="horizontal">

        <FrameLayout
            android:id="@+id/vertical_list_container"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <FrameLayout
            android:id="@+id/sort_content_container"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_weight="2.5" />
    </androidx.appcompat.widget.LinearLayoutCompat>

</androidx.appcompat.widget.LinearLayoutCompat>

1.2 分类根界面逻辑

位于latte-ec模块main->sort包下的SortDelegate。

主要作用：分类页面的根fragment，将页面分为左侧列表和右侧内容两个相关联的fragment。

public class SortDelegate extends BottomItemDelegate {
    @Override
    public Object setLayout() {
        return R.layout.delegate_sort;
    }

    @Override
    public void onBindView(@Nullable Bundle savedInstanceState, View rootView) {
    }

    @Override
    public void onLazyInitView(@Nullable Bundle savedInstanceState) {
        super.onLazyInitView(savedInstanceState);
        final VerticalListDelegate listDelegate = new VerticalListDelegate();//右侧分类列表
        getSupportDelegate().loadRootFragment(R.id.vertical_list_container, listDelegate);
        //设置右侧第一个分类显示，默认显示分类一
        getSupportDelegate().loadRootFragment(R.id.sort_content_container, ContentDelegate.newInstance(1));
    }
}

1.3 右侧内容Fragment

位于latte-ec模块main->sort->content包下的ContentDelegate。

主要作用：分类界面中右侧内容根fragment。

public class ContentDelegate extends LatteDelegate {
    //左侧list每点击一个item要切换到的的哪个recyclerView的布局id
    private static final String ARG_CONTENT_ID = "CONTENT_ID";
    private int mContentId = -1;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        final Bundle args = getArguments();
        if (args!=null){//有id传入
            mContentId = args.getInt(ARG_CONTENT_ID);//通过key获取值
        }
    }
//创建新的实例，向Bundle中传入值，key已经定了。key不影响数据传递,每次只需要传入不同的值即可
    public static ContentDelegate newInstance(int contentId){
        final Bundle args = new Bundle();
        args.putInt(ARG_CONTENT_ID,contentId);
        final ContentDelegate delegate = new ContentDelegate();
        delegate.setArguments(args);
        return delegate;
    }

    @Override
    public Object setLayout() {
        return R.layout.delegate_list_content;
    }

    @Override
    public void onBindView(@Nullable Bundle savedInstanceState, View rootView) {
    }
}

1.4 效果图

2、分类左侧列表数据解析与UI呈现

2.1 分类左侧列表数据解析类

位于latte-ec模块main->sort->list包下的VerticalListDataConverter。

主要作用：分类界面中左侧列表根fragment的数据解析类，将JSON数据解析出来进行保存。

将JSON数据解析成一个一个entity数据

public final class VerticalListDataConverter extends DataConverter {

    @Override
    public ArrayList<MultipleItemEntity> convert() {

        final ArrayList<MultipleItemEntity> dataList = new ArrayList<>();
        final JSONArray dataArray = JSON
                .parseObject(getJsonData())
                .getJSONObject("data")
                .getJSONArray("list");
        final int size = dataArray.size();
        for (int i = 0; i < size; i++) {
            final JSONObject data = d

最低0.47元/天解锁文章