AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

玩安卓从 0 到 1 之项目首页

2022-12-30 462
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 玩安卓从 0 到 1 之项目首页

前言

上一篇文章玩安卓从 0 到 1 之总体概览感觉没写好。当然也正常，既没有好看的页面（只是最简单的md文档），又因为好久没写文章了，国庆假期也刚过，有点懵逼，写的时候有好多地方想好好说一说但不知道该怎样描述，于是乎一通粘贴代码。结果。。。

以后写文章可不能这样了，好看的文章不太会排版，还是尽量注重内容吧。现在写文章不仅仅是自己的笔记了，写的不对的话有可能误人子弟；不过反过来说，想要不被误导直接去看官网不得了，那里虽然又可能也有错误但毕竟是少数。

牢骚发到此为止，下面就开始今天的正文吧。

正文

这篇文章说的依然是玩安卓这个 app，按照惯例，还是放一下 Github 地址和 apk 下载地址吧。

apk 下载地址：www.pgyer.com/llj2

Github地址：github.com/zhujiang521…

看到标题应该清楚咱们今天要实现的项目的首页，先来看一下实现好的样子吧！

3397bb04c188d2b8267e444628e143b.png

看起来是不是很简单！结构很清晰，最上面是标题栏，往下是 Banner ，再往下就是文章列表了，很简单的一个首页。实现方式有几种，要么直接使用 RecyclerView 直接排列下来，要么用 LinearLayout 一个一个往下排，其实并没有哪种实现方式更好，喜欢使用哪种就用哪种不得了！我在这里选择的使用 LinearLayout 一个一个往下排，简单清晰明了，挺好！

TitleBar 标题栏

咱们就一个一个来吧！先来看下 TitleBar 在首页需要的功能：中间的标题、右上角的搜索和点击事件，之前写过一篇文章就写的怎样自定义 TitleBar ：构建安卓项目通用TitleBar，有需要的可以看下。

来看下怎样使用吧：

<com.zj.core.util.TitleBar
        android:id="@+id/homeTitleBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:backImageVisiable="false"
        app:titleName="首页" />

很简单吧，在布局中可以直接指定标题名称和是否显示返回按钮，这里的首页明显不需要返回按钮，所以设置的 false 。咱们来看下在代码中怎样设置这两个属性：

homeTitleBar.setTitle("标题")
    homeTitleBar.setBackImageVisiable(false)

刚才还提到右上角要显示一个搜索的文本并要有点击事件，咱们来看下怎样写：

homeTitleBar.setRightText("搜索")
    homeTitleBar.setRightTextOnClickListener {
        // 点击事件要实现的逻辑
    }

是不是很简单，这就完事了，当然如果想写一个布局每个页面进行 include 也不是不可以，只是有点麻烦而已，实现效果其实是一样的，没有什么对错好坏之分。

Banner

Banner 的话为了简单省事就直接使用三方库了，之前也写过一篇这个三方库的简单使用，可以参考：安卓实现Banner轮播图自定义图片（非网络图片）。

三方库的依赖如下：

implementation 'com.youth.banner:banner:2.1.0'

写一下使用吧：

<com.youth.banner.Banner
    android:id="@+id/homeBanner"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_180" />

布局很简单，直接写上就可以了。代码也不难，只需要写一个适配器然后放进去设置开始即可。

先写一个适配器吧：

open class ImageAdapter(private val mContext: Context, mData: List<BannerBean>) :
    BannerAdapter<BannerBean?, ImageAdapter.BannerViewHolder?>(mData) {
    override fun onCreateHolder(parent: ViewGroup,viewType: Int): BannerViewHolder {
        val imageView = ImageView(parent.context)
        imageView.layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        imageView.scaleType = ImageView.ScaleType.CENTER_CROP
        return BannerViewHolder(imageView)
    }
    class BannerViewHolder(view: ImageView) :
        RecyclerView.ViewHolder(view) {
        var imageView: ImageView = view
    }
    override fun onBindView(holder: BannerViewHolder?,data: BannerBean?,
                            position: Int,size: Int) {
        Glide.with(mContext).load(if (data?.filePath == null) data?.imagePath else data.filePath).into(holder!!.imageView)
    }
}

二十来行代码，核心就是通过 Glide 加载一下图片。

上面说了，要把适配器放进去，放到哪呢？当然是 Banner 中了：

val bannerAdapter = ImageAdapter(context!!, viewModel.bannerList)
homeBanner.adapter = bannerAdapter
// 设置为圆形指示器并开始
homeBanner.setIndicator(CircleIndicator(context)).start()

到这里就差不多了，但是为了避免内存泄露和提升性能，需要在 onResume 页面可见的时候开始滚动，在 onPause 页面不可见的时候停止滚动：

override fun onResume() {
        super.onResume()
        homeBanner.start()
    }
    override fun onPause() {
        super.onPause()
        homeBanner.stop()
    }

RecyclerView

排到这里就该用 RecyclerView 来展示文章了，这个布局就不贴了，太简单了，但想了想还是需要贴一下，因为这里需要有下拉刷新和上拉加载，这里用到了一个三方库，大家应该都不陌生，下面是依赖：

implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.2'

接下来是布局使用方法：

<com.scwang.smartrefresh.layout.SmartRefreshLayout
    android:id="@+id/homeSmartRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/homeRecycleView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</com.scwang.smartrefresh.layout.SmartRefreshLayout>

RecyclerView 的适配器我用的是泓洋大神的开源库，下面是依赖：

api 'com.zhy:base-rvadapter:3.0.3'

先来看一下下拉刷新和上拉加载怎么使用吧：

homeSmartRefreshLayout.apply {
    setOnRefreshListener { reLayout ->
        reLayout.finishRefresh(measureTimeMillis {
             page = 1
             getArticleList(true)
        }.toInt())
    }
    setOnLoadMoreListener { reLayout ->
        val time = measureTimeMillis {
             page++
             getArticleList(true)
        }.toInt()
        reLayout.finishLoadMore(if (time > 1000) time else 1000)
    }
}

通过回调的名称也能猜出来怎么调用。

适配器的代码就不往上贴了，大家感兴趣的话可以去上面 Github 中下载代码看。

OK了，首页布局这就完成了，接下来就该获取数据了！

获取数据

Banner数据

这里需要思考一下，Banner 数据是否会实时更新，据我所知，Banner 数据最多一周更新一回，目前市面上的玩安卓 app 大部分都是每次进入都会请求下网络，然后再重新加载，这样无疑会增加网络成本，更何况都是图片，会消耗用户的 money 啊，虽然说现在流量不值钱，但也需要尽可能地省啊！

所以这里的 Banner 数据我进行了一些操作，先去本地数据库中查看是否有 Banner 的数据，如果有，并且和上回刷新的时间间隔在一天以内（这里为了预防更新，所以暂定的一天），那么就把数据库中的数据返回，如果没有数据或者和上回刷新的时间间隔在一天以外的话就去请求网络数据，请求网络数据又分为成功或失败，如果失败则返回失败信息，页面进行显示对应页面；如果成功则记录下当前的时间，如果数据库查出来有数据并且和请求到的数据一样，那么就还返回数据库中的数据；反之，则把数据库中的 Banner 数据删除，并且把请求到的数据插入到数据库中，然后把数据返回。

这里说的有点绕，我还是画个图给大家看看吧，好理解一些：

95d3faf5060fc9ddf58298fc2076e7b.png

没怎么画过类似的流程图，之前画过都是在大学的时候，平时话也就是在本上随便画画，画的不好或者不对的地方各位多多包涵！大概说下这张图，意思其实和上面那段话描述的意思一致，从中间粉色的 查看本地数据库 开始，分为各种情况下的数据获取方式。

好了，说了这么多又画了这么多，是时候看看代码实现了：

fun getBanner(application: Application) = fire {
        val spUtils = SPUtils.getInstance()
        val downImageTime by Preference(DOWN_IMAGE_TIME, System.currentTimeMillis())
        val bannerBeanDao = PlayDatabase.getDatabase(application).bannerBeanDao()
        val bannerBeanList = bannerBeanDao.getBannerBeanList()
        if (bannerBeanList.isNotEmpty() && downImageTime > 0 && downImageTime - System.currentTimeMillis() < ONE_DAY) {
            Result.success(bannerBeanList)
        } else {
            val bannerResponse = PlayAndroidNetwork.getBanner()
            if (bannerResponse.errorCode == 0) {
                val bannerList = bannerResponse.data
                spUtils.put(DOWN_IMAGE_TIME, System.currentTimeMillis())
                if (bannerBeanList.isNotEmpty() && bannerBeanList[0].url == bannerList[0].url) {
                    Result.success(bannerBeanList)
                } else {
                    bannerBeanDao.deleteAll()
                    insertBannerList(application, bannerBeanDao, bannerList)
                    Result.success(bannerList)
                }
            } else {
                Result.failure(RuntimeException("response status is ${bannerResponse.errorCode}  msg is ${bannerResponse.errorMsg}"))
            }
        }
    }

其实刚才的逻辑如果看懂了的话这段代码应该看着很简单，就是按照上面的逻辑来写的，对了，插入数据库的 insertBannerList 方法还没写：

private suspend fun insertBannerList(
        application: Application,
        bannerBeanDao: BannerBeanDao,
        bannerList: List<BannerBean>
    ) {
        bannerList.forEach {
            val file = Glide.with(application)
                .load(it.imagePath)
                .downloadOnly(SIZE_ORIGINAL, SIZE_ORIGINAL)
                .get()
            it.filePath = file.absolutePath
            bannerBeanDao.insert(it)
        }
    }

代码都很简单，重要的是这块的思路，接下来该看文章列表的数据了。

文章列表数据

文章的数据获取其实和 Banner 差不多，逻辑基本一样，都是从数据库中读取文件，然后判断是否需要刷新，这块的时间改为了四小时，因为文章可能一直在更新，所以取了个比较小的值，可以根据需求自己来定义。文章列表的数据和 Banner 的不同之处在于文章列表需要请求两次，需要判断当前是第几页，如果是第 0 页的话需要把置顶的文章添加到最前面，如果不是第 0 页的话则只需要把后面的文章添加上。

这里的实现其实我偷懒了，但也不算是偷懒。。。为什么这样说呢？因为我只缓存了第一页的文章列表数据，但其实并不是偷懒，因为文章列表数据不定，可能更新频率很快，缓存了太多页的数据到后来又需要全部更新，亦或者全部删除再重新插入，得不偿失。缓存第一页的数据在于用户之前已经打开过项目了，数据也都正常显示，如果突然没网了，再次重新打开应用不至于大白页或者显示没有网络，显示出缓存的数据比较优雅，如果用户下拉刷新或者上拉加载的话提醒用户当前没有网络即可。

既然 Banner 的数据都画了个图，那么文章列表的数据也得来画一个！

b12f1444859353e065d5b73a13f974e.png

这张图其实有偷懒了，这里判断完是否为第一页之后还要依次判断置顶文章和列表文章，根据数据库的数据和网络请求数据是否一致来判断是否更新数据库的数据，再将数据返回到 ViewModel。

来吧，看下代码吧，这块代码有点多，我只展示下大概的逻辑吧，如果想看完整代码，还是去 Github 上直接下载代码就行

fun getArticleList(application: Application, query: QueryHomeArticle) = fire {
        coroutineScope {
            val res = arrayListOf<Article>()
            if (query.page == 1) {
                val spUtils = SPUtils.getInstance()
                val downArticleTime by Preference(DOWN_ARTICLE_TIME, System.currentTimeMillis())
                val articleListDao = PlayDatabase.getDatabase(application).browseHistoryDao()
                val articleListTop = articleListDao.getTopArticleList(HOME_TOP)
                val downTopArticleTime by Preference(
                    DOWN_TOP_ARTICLE_TIME,
                    System.currentTimeMillis()
                )
                if (articleListTop.isNotEmpty() && downTopArticleTime > 0 &&
                    downTopArticleTime - System.currentTimeMillis() < FOUR_HOUR && !query.isRefresh
                ) {
                    res.addAll(articleListTop)
                } else {
                    val topArticleListDeferred =
                        async { PlayAndroidNetwork.getTopArticleList() }
                    val topArticleList = topArticleListDeferred.await()
                    if (topArticleList.errorCode == 0) {
                        if (articleListTop.isNotEmpty() && articleListTop[0].link == topArticleList.data[0].link && !query.isRefresh) {
                            res.addAll(articleListTop)
                        } else {
                            res.addAll(topArticleList.data)
                            topArticleList.data.forEach {
                                it.localType = HOME_TOP
                            }
                            spUtils.put(DOWN_TOP_ARTICLE_TIME, System.currentTimeMillis())
                            articleListDao.deleteAll(HOME_TOP)
                            articleListDao.insertList(topArticleList.data)
                        }
                    }
                }
            } else {
                val articleListDeferred =
                    async { PlayAndroidNetwork.getArticleList(query.page - 1) }
                val articleList = articleListDeferred.await()
                if (articleList.errorCode == 0) {
                    res.addAll(articleList.data.datas)
                    Result.success(res)
                } else {
                    Result.failure(
                        RuntimeException(
                            "response status is ${articleList.errorCode}" + "  msg is ${articleList.errorMsg}"
                        )
                    )
                }
            }
        }
    }

大家可以看到我只展示了置顶文章的数据缓存，文章列表的原理一样，就不赘述了。

再放一下这几个模块用到的常量吧：

const val ONE_DAY = 1000 * 60 * 60 * 24
const val FOUR_HOUR = 1000 * 60 * 60 * 4
const val DOWN_IMAGE_TIME = "DownImageTime"
const val DOWN_TOP_ARTICLE_TIME = "DownTopArticleTime"
const val DOWN_ARTICLE_TIME = "DownArticleTime"
const val DOWN_PROJECT_ARTICLE_TIME = "DownProjectArticleTime"
const val DOWN_OFFICIAL_ARTICLE_TIME = "DownOfficialArticleTime"

ViewModel

都写的差不多了就该 ViewModel 登场了，ViewModel 的代码比较简单，我直接放上，然后下面简单描述下吧：

class HomePageViewModel(application: Application) : AndroidViewModel(application) {
    private val pageLiveData = MutableLiveData<QueryHomeArticle>()
    private val refreshLiveData = MutableLiveData<Boolean>()
    val bannerList = ArrayList<BannerBean>()
    val articleList = ArrayList<Article>()
    val articleLiveData = Transformations.switchMap(pageLiveData) { query ->
        HomeRepository.getArticleList(application, query)
    }
    val bannerLiveData = Transformations.switchMap(refreshLiveData) { isRefresh ->
        Homeepository.getBanner(application,isRefresh)
    }
    fun getBanner(isRefresh: Boolean) {
        refreshLiveData.value = isRefresh
    }
    fun getArticleList(page: Int, isRefresh: Boolean) {
        pageLiveData.value = QueryHomeArticle(page, isRefresh)
    }
}
data class QueryHomeArticle(var page: Int, var isRefresh: Boolean)

和上一篇文章一样，同样用的是 AndroidViewModel ，因为在 Repository 中需要用到数据库，所以要使用。

ViewModel 中的逻辑很清晰，定义两个 ArrayList 来存放数据，使用 LiveData 来观察数据的改变，两个 get 方法来调动方法执行以改变数据。

横竖屏适配

到这里应该整个逻辑都理通了，代码应该也都写的差不多了，那么来运行下看看吧！

运行之后发现竖屏运行显示正常，但当横屏显示的时候，页面完全无法正常使用！Banner 基本上把所有的空间都占了，文章列表根本无法进行使用！

这个时候就需要横竖屏适配了，其实横竖屏适配很简单，只需要在 res 目录下建立一个 layout-land 的文件夹，把横屏的布局放入进去即可，和竖屏布局的名称一样就行。

在这里大家可以根据需求来重新摆放横屏布局的控件位置。我在这里将屏幕分为两半，左边用来显示 Banner ，右面用来显示文章列表，大家来简单看下布局：

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <com.youth.banner.Banner
                android:id="@+id/homeBanner"
                android:layout_width="0dp"
                android:layout_weight="1.5"
                android:layout_height="match_parent" />
            <com.scwang.smartrefresh.layout.SmartRefreshLayout
                android:id="@+id/homeSmartRefreshLayout"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2">
                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/homeRecycleView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
            </com.scwang.smartrefresh.layout.SmartRefreshLayout>
        </LinearLayout>

完成之后变为如下样式，是不是比刚才好看的多，而且更加容易操作了。

404d16d0f67421d8956468cb59e7afd.png

差不多就先写到这里吧，其他的下一篇文章再来！

总结

每次觉得没多少东西的地方写着写着就写多了，每回想着要好好写的东西却死活不知道如何下手写。这一篇文章简单走了一遍一个应用首页的简单实现逻辑，并带给大家横竖屏的简单实现。



文章标签：
Android开发
数据库
缓存
关键词：
Android项目
Android首页
Zhujiang
目录
相关文章
shuj
|
2月前
|
Java Android开发 Swift
安卓与iOS开发对比：平台选择对项目成功的影响
【10月更文挑战第4天】在移动应用开发的世界中，选择合适的平台是至关重要的。本文将深入探讨安卓和iOS两大主流平台的开发环境、用户基础、市场份额和开发成本等方面的差异，并分析这些差异如何影响项目的最终成果。通过比较这两个平台的优势与挑战，开发者可以更好地决定哪个平台更适合他们的项目需求。
shuj
121 1
聚优云惠
|
2月前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么？是MVVM吗？如果不是，是什么？
android做中大型项目完美的架构模式是什么？是MVVM吗？如果不是，是什么？
聚优云惠
122 2
nanshaws
|
2月前
|
XML Java 数据库
安卓项目：app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面，包括布局文件的创建、登录和注册逻辑的实现，以及运行效果的展示。
nanshaws
195 0
安卓项目：app注册/登录界面设计
游客moiomvrp3vyac2
|
3月前
|
IDE Android开发 iOS开发
探索Android与iOS开发的差异：平台选择对项目成功的影响
【9月更文挑战第27天】在移动应用开发的世界中，Android和iOS是两个主要的操作系统平台。每个系统都有其独特的开发环境、工具和用户群体。本文将深入探讨这两个平台的关键差异点，并分析这些差异如何影响应用的性能、用户体验和最终的市场表现。通过对比分析，我们将揭示选择正确的开发平台对于确保项目成功的重要作用。
游客moiomvrp3vyac2
57 4
悟道了凡
|
1月前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么？是MVVM吗？如果不是，是什么？
在 Android 开发中，选择合适的架构模式对于构建中大型项目至关重要。常见的架构模式有 MVVM、MVP、MVI、Clean Architecture 和 Flux/Redux。每种模式都有其优缺点和适用场景，例如 MVVM 适用于复杂 UI 状态和频繁更新，而 Clean Architecture 适合大型项目和多平台开发。选择合适的架构应考虑项目需求、团队熟悉度和可维护性。
悟道了凡
53 6
聚优云惠
|
2月前
|
前端开发 JavaScript 测试技术
Android适合构建中大型项目的架构模式全面对比
Android适合构建中大型项目的架构模式全面对比
聚优云惠
51 2
yantuguiguziPGJ
|
3月前
|
Java Maven 开发工具
第一个安卓项目 | 中国象棋demo学习
本文是作者关于其第一个安卓项目——中国象棋demo的学习记录，展示了demo的运行结果、爬坑记录以及参考资料，包括解决Android Studio和maven相关问题的方法。
yantuguiguziPGJ
59 6
第一个安卓项目 | 中国象棋demo学习
游客cxtb2yf2r55as
|
2月前
|
编译器 Android开发
配置环境变量，使CMakeLists.txt可直接使用Android NDK工具链编译项目
配置环境变量，使CMakeLists.txt可直接使用Android NDK工具链编译项目
游客cxtb2yf2r55as
102 1
德国都芳最好
|
3月前
|
JavaScript 前端开发 Android开发
让Vite+Vue3项目在Android端离线打开（不需要起服务）
让Vite+Vue3项目在Android端离线打开（不需要起服务）
德国都芳最好
118 10
肥猪肥猪-17824
|
3月前
|
IDE 开发工具 Android开发
安卓与iOS开发对比：平台选择对项目成功的影响
【9月更文挑战第10天】在移动应用开发的世界中，选择正确的平台是至关重要的。本文将深入探讨安卓和iOS这两大主要移动操作系统的开发环境，通过比较它们的市场份额、开发工具、编程语言和用户群体等方面，为开发者提供一个清晰的指南。我们将分析这两个平台的优势和劣势，并讨论如何根据项目需求和目标受众来做出最佳选择。无论你是初学者还是有经验的开发者，这篇文章都将帮助你更好地理解每个平台的特性，并指导你做出明智的决策。
肥猪肥猪-17824
63 10