【Android从零撸美团四】美团首页布局解析及实现 - Banner+自定义View+SmartRefreshLayout下拉刷新上拉加载更多

最新推荐文章于 2024-08-18 10:17:41 发布

solocoder222

最新推荐文章于 2024-08-18 10:17:41 发布

阅读量8.3k

点赞数 1

分类专栏： Android 安卓文章标签：美团首页布局 SmartRefreshLayout 自定义view 下拉刷新

本文链接：https://blog.csdn.net/solocoder/article/details/83686026

版权

本文介绍了如何从零开始实现美团首页布局，包括使用Banner库实现轮播条，动态添加View创建大模块BigModule，自定义View封装HomeAdsView，使用RecyclerView实现小模块SmallModule，结合SmartRefreshLayout实现下拉刷新和上拉加载更多功能。通过源码分析和步骤分解，展示了Android布局设计和组件化的实践。

摘要由CSDN通过智能技术生成

这是【从零撸美团】系列文章第四篇。
项目地址：https://github.com/cachecats/LikeMeiTuan

仿美团开源项目整体架构和首页其实早就完成了，前段时间家里各种事情搞得心力交瘁，停更了一段时间。甚至一度动摇继续这个项目的决心，因为最近在学前端，在技术的深度和广度之间一直纠结摇摆不定。一个声音是继续完成这个项目，把安卓玩的更深入一些；另一个声音是赶紧学前端吧，抓紧拓展技术栈，不要在这个项目上浪费太多精力。

思来想去还是继续完成项目吧，自己开的项目跪着也要走完〒▽〒

最后确定了继续写项目和学前端同时进行的战略方针~

老规矩，先上图，再分析原理 --> 准备材料 --> 具体实现三步走一步步的搞定。

在这里插入图片描述

一、分析

相比于普通的应用，美团、去哪儿这样的平台性 App 的首页还是相当复杂的，简直想把全世界都包进去~

在这里插入图片描述

刚开始看可能觉得眼花缭乱，但仔细观察，可以把它抽象成六个模块：

最上面的轮播广告条，里面包含若干个广告图片自动无限轮播。暂时称之为 Banner（注意这几个模块起的英文名对应着代码中的模块名）。
轮播条下面的美食、电影/演出、酒店住宿、休闲娱乐、外卖等五个大模块入口，暂时称之为大模块 BigModule。
再往下类似 GridView 的两排小图标，KTV、周边游……暂时称之为小模块 SmallModule。
小模块下面四张广告图片，乍一看是没有规则的瀑布布局，其实是互相对齐的简单规则布局。暂时称之为 HomeAdsView。
最后就是列表 RecyclerView 了，显示附近团购信息。
还有一个不太明显的，上拉刷新下拉加载更多，也算一个模块吧。

抽丝剥茧后就是这六个模块啦，是不是一下清爽很多？

实现思路

轮播条选用了第三方的库：Banner, 有 5.2k 颗 star，非常优秀的库。

大模块 BigModule 采用代码中动态添加 View 的方式实现，好处在于能快速响应变化，假如需求变成一行放4个图标，只需要在 java 文件中改一句代码就好，不用修改资源文件。

两行小模块 SmallModule 是 RecyclerView 实现的 GridView。

四张广告图片 HomeAdsView 是封装的自定义 View，高度封装优点是完全解耦，简化了主页的布局，使用配置简单，后期维护方便。

最下面的列表用的是 RecyclerView，BaseRecyclerViewAdapterHelper 作为辅助。

下拉刷新组件用的是 SmartRefreshLayout

二、准备

主页中用到了三个框架，在 app/build.gradle 下添加如下依赖：

//Banner
implementation "com.youth.banner:banner:1.4.10"
//BaseRecyclerViewAdapterHelper
implementation "com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.30"
//SmartRefreshLayout
implementation "com.scwang.smartrefresh:SmartRefreshLayout:1.0.4"

注：AndroidStudio 3.0 以上用 implementation，3.0以下用 compile。
项目中还用到了很多其他库，如 Dagger、RxJava、ButterKnife、Glide 等，就不一一贴出来了，具体的使用方式请自行查阅资料或看本项目源码 https://github.com/cachecats/LikeMeiTuan

三、实现

项目采用 MVP 架构，主页代码在 app/home 目录下的 HomeFragment 和 HomeFragmentPresenter 中。

布局文件是 fragment_home.xml，布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@color/white"
    android:orientation="vertical">

    <!--下拉刷新组件-->
    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/smartRefreshLayout_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <!--Banner轮播条-->
                <com.youth.banner.Banner
                    android:id="@+id/home_banner"
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    app:image_scale_type="center_crop"
                    app:scroll_time="500" />

                <!--5个大模块布局-->
                <LinearLayout
                    android:id="@+id/ll_big_module_fragment_home"
                    androi