仿电商App：笔记（八）：主界面-首页UI与数据解析器开发（RecyclerView）

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
//有商品展示，因此界面会出出现上拉刷新，下拉加载更多
    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/srl_index"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_index"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
//写在下面，防止嵌套滑动，会被新的元素遮住，两边是字体图标：扫描、信息，中间是搜索框
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tb_index"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@android:color/transparent"
        app:layout_behavior="com.example.latte.ec.main.index.TranslucentBehavior">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <com.joanzapata.iconify.widget.IconTextView
                android:id="@+id/icon_index_scan"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="left"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingRight="10dp"
                android:text="{icon-scan}"
                android:textColor="@android:color/white"
                android:textSize="25sp" />

            <androidx.appcompat.widget.AppCompatEditText
                android:id="@+id/et_search_view"
                android:layout_width="0dp"
                android:layout_height="40dp"
                android:layout_gravity="center"
                android:layout_weight="4"
                android:background="@android:color/white"
                android:gravity="center_vertical"
                android:hint="搜索"
                android:paddingLeft="20dp" />

            <com.joanzapata.iconify.widget.IconTextView
                android:id="@+id/icon_index_message"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="right"
                android:layout_weight="1"
                android:gravity="center"
                android:paddingLeft="10dp"
                android:text="{fa-bullhorn}"
                android:textColor="@android:color/white"
                android:textSize="25sp" />

        </androidx.appcompat.widget.LinearLayoutCompat>
    </androidx.appcompat.widget.Toolbar>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2、首页下拉刷新实现

2.1 刷新助手

位于latte-ui模块refresh包下的RefreshHandler。

主要作用：下拉刷新功能，使用Handler延时2s模拟网络请求。

public class RefreshHandler implements
        SwipeRefreshLayout.OnRefreshListener,
        BaseQuickAdapter.RequestLoadMoreListener{

    private final SwipeRefreshLayout REFRESH_LAYOUT;
    private final PagingBean BEAN;
    private final RecyclerView RECYCLERVIEW;
    private MultipleRecyclerAdapter mAdapter = null;
    private final DataConverter CONVERTER;

    private RefreshHandler(SwipeRefreshLayout swipeRefreshLayout,
                           RecyclerView recyclerView,
                           DataConverter converter, PagingBean bean) {
        REFRESH_LAYOUT = swipeRefreshLayout;//传入布局
        this.RECYCLERVIEW = recyclerView;
        this.BEAN = bean;
        this.CONVERTER = converter;
        REFRESH_LAYOUT.setOnRefreshListener(this);//滑动监听
    }

    public static RefreshHandler create(SwipeRefreshLayout swipeRefreshLayout,
                                        RecyclerView recyclerView, DataConverter converter) {
        return new RefreshHandler(swipeRefreshLayout, recyclerView, converter, new PagingBean());
    }


    private void refresh() {
        REFRESH_LAYOUT.setRefreshing(true);//开始加载
        Latte.getHandler().postDelayed(new Runnable() {//用handler模拟请求
            @Override
            public void run() {
                //进行一些网络请求
                REFRESH_LAYOUT.setRefreshing(false);
            }
        }, 2000);//延时2s，能看出效果
    }

    @Override
    public void onRefresh() {
        refresh();
    }
}

2.2 初始化刷新功能

位于latte-ec模块main->index包下的IndexDelegate。

主要作用：主页页面的根fragment，完成刷新功能的初始化。

public class IndexDelegate extends BottomItemDelegate implements View.OnFocusChangeListener {

    @BindView(R2.id.rv_index)
    RecyclerView mRecyclerView = null;
    @BindView(R2.id.srl_index)
    SwipeRefreshLayout mRefreshLayout = null;
    @BindView(R2.id.tb_index)
    Toolbar mToolbar = null;
    @BindView(R2.id.icon_index_scan)
    IconTextView mIconScan = null;
    @BindView(R2.id.et_search_view)
    AppCompatEditText mSearchView = null;

    private RefreshHandler mRefreshHandler = null;//刷新功能

    @Override
    public void onBindView(@Nullable Bundle savedInstanceState, View rootView) {
        mRefreshHandler = RefreshHandler.create(mRefreshLayout,mRecyclerView,new IndexDataConverter()); 
    }

    private void initRefreshLayout() {//初始化下拉的图标
        mRefreshLayout.setColorSchemeResources(
                android.R.color.holo_blue_bright,
                android.R.color.holo_orange_light,
                android.R.color.holo_red_light
        );//设置渐变的颜色
        mRefreshLayout.setProgressViewOffset(true, 120, 300);
//true：下拉圆球由小变大，回弹由大变小；120：起始高度；300：下降终止的高度。
    }

    @Override
    public void onLazyInitView(@Nullable Bundle savedInstanceState) {//懒加载，不用不加载
        super.onLazyInitView(savedInstanceState);
        initRefreshLayout();
    }

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

2.3 效果图：

3、首页数据结构分析

3.1 获取本地json数据

在D:\Apache\Apache24\htdocs\RestServer\api中放入php数据

在D:\Apache\Apache24\htdocs\RestServer\data中放入json数据

打开Apache服务器，在浏览器中输入：例如http://127.0.0.1:8081/RestServer/api/index.php网址，可以看到json数据

ExampleApp中，.withApiHost("http://127.0.0.1:8081/RestServer/api/")中传入访问的地址

3.2 在刷新功能中进行数据访问

位于latte-ui模块refresh包下的RefreshHandler。

主要作用：下拉刷新功能，通过访问本地json数据，获取第一页数据。

public void firstPage(String url){//第一页的第一个数据
        RestClient.builder()
                .url(url)
                .success(new ISuccess() {
                    @Override
                    public void onSuccess(String response) {
                        Toast.makeText(Latte.getApplicationContext(),response,Toast.LENGTH_SHORT).show();
                    }
                })
                .build()
                .get();
    }
}

3.3 初始化第一页数据

位于latte-ec模块main->index包下的IndexDelegate。

主要作用：主页页面的根fragment，初始化刷新功能的第一页数据。

@Override
public void onLazyInitView(@Nullable Bundle savedInstanceState) {
    super.onLazyInitView(savedInstanceState);
    initRefreshLayout();
**  mRefreshHandler.firstPage("index.php");//url进行拼接，然后访问
}