0%

练手项目小结之 crystallite

开始

在还是夏天的时候,自己心血来潮开了一个 Android 练手项目,如今已经秋天了,Crystallite 这个项目已经实现得七七八八了。

我上一次动手开发 Android 应用还是在大学时,用 xml 实现样式布局,然后再用 Java 实现界面逻辑。这次重新着手 Android 应用开发,本以为只是编程语言从 Java 迁移到了 Kotlin 罢了。然而在使用 Android Studio 创建完项目后才发现,项目里默认生成了一堆注解为 @Composable 的奇怪代码。

Google 后才发现,大人,时代变了。

免责声明:个人资历尚浅,对 Android 开发和 Web 前端开发都理解有限,欢迎指出问题或者提出不同的看法。

Jetpack Compose

@Composable 注解是 Jetpack Compose 工具包所提供的一个工具。
而至于 Jetpack Compose 工具包,下面是官网上对它的一段介绍。

Jetpack Compose 是一个适用于 Android 的新式声明性界面工具包。Compose 提供声明性 API,让您可在不以命令方式改变前端视图的情况下呈现应用界面,从而使编写和维护应用界面变得更加容易。

重点在于”声明式 UI“。

在传统的 Android 应用开发中,界面和 UI 逻辑被分割在不同的文件里。如果用户的操作导致界面需要更新,那么开发者需要在 UI 逻辑里手动获取到对应的 UI 节点,然后再执行更新操作。作为一名 Web 前端开发者,个人感觉这有点像 jQuery 时代的前端开发方式。

在 React 出现之后,Web 前端开发者不再需要手动获取并操作界面 UI 节点。相反,动态的前端界面被抽象为了随时间变化的数据 —— 状态,需要更新界面时,开发者直接修改状态即可。这就是很多人提到过的 UI = F(State)

声明式 UI 让开发者通过状态来声明当前的 UI 界面应该是什么样,而不是直接手动修改界面到我们期望的状态。这使得开发者可以避开大量烦琐的手工 UI 操作。

就个人的开发体验而言,使用 Jetpack Compose 开发用户界面是非常舒适的。不仅可以使用官方提供的 Material UI,而且 Android Studio 默认支持通过 @Preview 注解来直接预览当前的自定义组件。作为一名 Web 前端开发者,写 Jetpack Compose 组件时总有种在写 React 的熟悉感。实际上两者的用法非常像,网上甚至有人总结了一份对照表:React to Jetpack Compose Dictionary

可能会有人提 Flutter,不过我因为接触 Flutter 不多,这里就不比较 Flutter 和 Jetpack Compose 了。

Crystallite

Crystallite 这个项目我一开始是打算用来复习一下 Android 开发的。不过在了解到 Jetpack Compose 之后,我就转向从头学习 Jetpack Compose 的用法了。事实上,如果有 React 开发经验的话,上手 Jetpack Compose 其实不太费时间。

写代码的时候我参考了 Google 官方的 Now in Android 这个学习仓库,使用了官方推荐的 Hilt 来进行依赖注入,同时用 DataStore 和 Room 来做数据持久化。至于 Kotlin 我基本没系统地学习,不过好在我也没用到什么高级特性。Kotlin 本身语法也很简洁,Kotlin Flow 用起来也和 RxJs 很像,个人感觉入门门槛或许不是很高。

Crystallite 这个项目是一个非官方的漫画阅读器,使用了 Comick Swagger UI 上的提供的接口。一开始我有抱着学英语的想法来看翻译成英语的漫画,不过后来感觉学习效果甚至不如直接看编程相关的英语文档。好在这个项目本身没有半途而废,目前初步的功能都完成了。

其他

我其实不想在每篇文章里都抱怨一下国内的网络情况。不过事实却是,当我打开上大学时收藏在书签里的 Android Developers 官网时,却发现 Android Developers 官网现在国内已经访问不了了。我记得上大学时还能裸连,当时我还觉得 Google 官方是特意为 Android 开发者官网使用了一个不是以 “google.com” 结尾的域名,这样方便国内用户也能直接访问。没想到现在连这个域名也被阻止访问了。不过好在 “https://developer.android.google.cn/” 这个域名还能访问,只是不知道下个五年后这个域名还能不能访问。(总感觉像是在玩打地鼠)

最后,推荐一下郭霖大佬的文章:
给移动开发者的声明式 UI 入门手册