![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Android Jetpack Compose
文章平均质量分 87
职场007
共享共赢,互利共生,尊重原创,勇于创新
展开
-
Android Jetpack Compose 实现一个电视剧选集界面
我们经常能看到爱奇艺或者腾讯视频这类的视频APP在看电视剧的时候都会有一个选集的功能。如下图所示这个功能其实很简单,就是绘制一些方块,在上面绘制上数字,还有标签啥的。当用户点击对应的数字式时可以切换到对应的剧集。如果剧集太多,屏幕展示不完,就可以滑动屏幕查看更多的剧集,就这么一个很简单的UI小组件。我们使用Compose来实现下。本文主要介绍的是一个剧集选集的功能,这里只是介绍了实现的方式,比较粗糙,读者可以按照自己的需求修改,有更好的实现方案也可以在评论区交流。原创 2024-06-11 18:46:40 · 605 阅读 · 0 评论 -
Android JetPack Compose+Room----实现搜索记录功能
搜索功能是很多APP都会重点维护的功能,因为搜索功能可以很好的帮助用户找到自己需要的内容,与此同时,为了增强用户体验,引入了搜索记录的功能,本文就是介绍一个基于Compose+Room搜索记录功的实现原创 2024-04-16 22:09:59 · 1293 阅读 · 0 评论 -
Android Jetpack Compose 沉浸式状态栏的实现
说到沉浸式状态栏,很多小伙伴可能不太熟悉,其实让Android的状态栏的颜色和APP的主题颜色相同,给人感觉状态栏和APP就是一体的。沉浸式的状态栏让页面看起来更舒服,实现沉浸式状态栏也很简单,首先就是配置主题,然后设置状态栏的颜色,之前的博客中实现沉浸式状态栏是通过将状态栏的颜色设置成页面背景的颜色,这样状态栏就和背景融为一体了,但是这种办法在每个页面都需要设置一遍,非常废了,最好的 方式就是将状态栏设置成透明的颜色,然后将我们的页面"顶"到屏幕的顶部,而不是位于状态栏下面。原创 2024-02-05 13:18:26 · 2429 阅读 · 11 评论 -
Android Jetpack Compose之底部导航栏的实现
写过一段Android jetpack compose 界面的小伙伴应该都用过Compose的脚手架Scaffold,利用它我们可以很快的实现一个现代APP的主流界面架构,即一个带顶部导航栏和底部导航栏的界面架构,我们基于这个架构可以快速的搭建出我们想要的页面效果。而今天的文章就是要介绍如何实现一个有特点的底部导航栏。原创 2024-02-01 14:58:18 · 2606 阅读 · 0 评论 -
使用Android Compose实现网格列表滑到底部的提示信息展示
目前大多数的APP都会使用列表的方式来呈现内容,例如淘宝,京东,腾讯体育的评论区等都会使用列表布局。在Android传统的View中主要是使用RecyclerView控件来实现大量数据的展示。而在Compose中使用的是LazyColumn或者是LazyGrid组件。这些组件的使用都很简单,网上有很多的例子,不是本文的重点,本文的重点是介绍实现当我们需要展示的数据展示完了后,即列表滑动到最底部的时候,我们需要展示给用户一个提示信息:比如:”已经到底“。原创 2024-01-09 14:09:45 · 1382 阅读 · 0 评论 -
Android Jetpack Compose之生命周期与副作用
借助于Kotlin的DSL语言特性,Compose可以很形象地描述UI的视图结构,视图结构对应的是一棵视图树的数据结构,这棵树在Compose中称为Composition,Composition会在Composable初次执行时被创建,当在Composable中访问State时,Compose记录其引用,当State变化时,Composition触发对应的Composable进行重组,更新视图树中的节点,然后达到刷新UI的目的。原创 2023-10-11 13:22:41 · 751 阅读 · 0 评论 -
Android Jetpack Compose之确定重组范围并优化重组
Composable函数在进行重组时会尽可能的跳过不必要的重组,只对需要变化的UI进行重组。那Compose是如何认定UI需要变化呢?或者换句话说Compose是如何确定重组的范围呢。如果重组随意的发生,那么对UI的性能会是一个很不稳定的状态,时而好,时而坏。而且如果编写的UI代码有问题,那么重组将会带来状态的混乱,导致UI显示出错。所以弄清楚Compose重组的范围确定才能更好的避免重组的坑,并且可以针对具体的范围做优化,所以本文将介绍如何确定Compose重组及性能的优化原创 2023-09-26 13:23:55 · 428 阅读 · 0 评论 -
Android Jetpack Compose之UI的重组和自动刷新
在传统的View中,若要改变UI,需要我们修改View的私有属性,比如要修改一个TextView的文字,我们需要通过它的setText(“xxx”)方法去修改。而Compose 则是通过重组来刷新UI。在之前的状态管理的文章中也提到过重组的概念。本章主要就是介绍Compose的重组和刷新相关的内容。原创 2023-09-20 13:14:17 · 422 阅读 · 0 评论 -
Android Jetpack Compose 使用 ViewModel
所以,在复杂的业务逻辑下,我们可以将Stateful的状态提到ViewModel中管理,这样Stateful Composable也就变成了一个Stateless Composable,通过参数传入不同的ViewModel即可替换具体的业务逻辑,大大增加了可复用性和可测试性原创 2023-09-13 13:22:32 · 1452 阅读 · 2 评论 -
Android Jetpack Compose之状态持久化与恢复
我们都知道remember可以缓存创建状态,避免因为重组而丢失。使用remember缓存的状态虽然可以跨越重组,但是不能跨Activity或者跨进程。比如横竖屏切换等ConfigiurationChanged事件发生时,假设没有重写对应的onConfigurationChanged函数,Activity就会被销毁重建,导致remember保存的状态丢失。为了解决这个问题,Compose提供了rememberSavable解决这个问题原创 2023-09-11 13:41:54 · 568 阅读 · 0 评论 -
Android Jetpack Compose 用计数器demo理解Compose UI 更新的关键-------状态管理(State)
假如我们把Composable的执行看成是一个函数的运算的话,那么状态就是函数的参数,输出就是生成的布局。由于唯一的参数决定唯一的输出,所以只有当函数的参数发生了变化,生成的布局才会相应的跟着变化。原创 2023-09-06 15:00:09 · 1375 阅读 · 1 评论 -
解決JetpackCompose 编译通过但是运行报错的问题
解决Compose UI 运行报错的问题,编译啥的都能通过,也能安装成功,但是就是运行无法成功,启动就闪退。原创 2023-07-22 17:35:14 · 222 阅读 · 0 评论 -
Android JetPack Compose之主题的理解与使用
根据百度百科知识,主题可以被定义为:文艺作品中所表现的中心思想。我们的APP就是一个作品,所以它的主题也代表了这个APP想要表达的思想,就比如看到京东APP的红色,我们就能明确的知道这是京东系的购物APP,看到淘宝的橙色我们就可以想到是阿里系旗下的产品……,现在的Android手机还有深色主题和亮色主题。分别代表不同的场景。所以主题可以理解为app的整体对外的一个形象,不同风格的主题会展现给人不同的形象。包括颜色,字体,形状等,当然也包括其他类型的多媒体资源,例如文本,声音,和图像等。原创 2023-07-18 13:56:49 · 519 阅读 · 0 评论 -
Android Compose UI实战练手----Google Bloom 主页实现(完结)
主页的页面比前面的欢迎页和登录页面要复杂得多,假设使用传统的view,即使用xml布局的方式,我们可能需要书写很多的代码,但是使用Compose UI,这一切都会变得很简单,有了前面的页面开发经验,我们拿到这个主页的页面时首先想到的第一步就是拆分页面。然后将拆分后的页面使用Compose UI中对应的组件来实现。原创 2023-07-08 14:05:08 · 399 阅读 · 3 评论 -
Android Compose UI实战练手----Google Bloom登录页实现
在之前的章节中我们已经介绍了如何实现Google Bloom练手项目的欢迎页,本文介绍如何使用Compose UI实现登录页,登录页使用传统的View去开发的时候需要先去使用XML定义好布局界面,然后在Activity中去加载布局界面,最后拿到对应的输入框ID,按钮ID等去实现登录功能,但是使用Compose UI来实现这些就显得很简单,我们只需要使用Compose UI 的相关组件根据Compose提供的布局组件,组合到一起就可以了,最主要的是拆分页面,让其分成不同的小组件,然后分别用Compose U原创 2023-06-29 13:20:19 · 974 阅读 · 0 评论 -
Android Compose UI实战练手----Google Bloom欢迎页
在之前的博客中,我已经介绍了Compose 的基础UI和布局组件,现在我们就利用这些基础UI和布局组件去做一个实战项目。Bloom是Google提供的一个假想产品,我们可以作为练手项目使用,这个产品的详细UI设计稿大家可以自行去百度下,个人决定这里主要是熟练去使用Compose UI,不必要纠结设计稿,文末我会贴出项目的github地址,供读者参考。原创 2023-06-16 13:18:34 · 1199 阅读 · 0 评论 -
Android Jetpack Compose之列表的使用
在Android的传统View中,当我们需要展示大量的数据时,一般都会使用ListView或者是更高级的RecyclerView。在Compose中我们可以通过Column来实现这一需求,并且还可以让列表实现滚动,懒加载,快速定位到具体位置等功能。非常灵活,下文就是使用Column来实现列表的内容原创 2023-05-26 13:23:20 · 1492 阅读 · 0 评论 -
Android Jetpack Compose之使用脚手架快速搭建APP布局结构
使用脚手架可以极大的节约我们开发的时间,让我们快速的搭建一个app的界面结构,并且代码也比使用传统view少了很多,而且添加侧边栏还非常简便,非常适合快速实现需求原创 2023-05-15 13:08:07 · 974 阅读 · 1 评论 -
Android jetpack Compose之约束布局
我们都知道ConstraintLayout在构建嵌套层级复杂的视图界面时可以有效降低视图树的高度,使视图树扁平化,约束布局在测量布局耗时上比传统的相对布局具有更好的性能,并且约束布局可以根据百分比自适应各种尺寸的终端设备。因为约束布局确实很好用,所以,官方也为我们将约束布局迁移到了Compose平台。本文就是介绍约束布局在Compose中的使用。原创 2023-04-28 13:49:04 · 1842 阅读 · 0 评论 -
Jetpack Compose之线性布局和帧布局
Compose 中的线性布局对应的是Android传统视图中的LinearLayout,不一样的地方是,Compose根据Orientation的不同又将布局分为Column和Row, Column对应传统视图LinearLayout中orientation = “vertical”的情况,Row对应传统视图LinearLayout中orientation = “horizontal”的情况.由于两者内部元素在父容器中的布局和对其方式不同,分成两个组件有助于提供类型安全的Modifier修饰符。而Compo原创 2023-04-23 21:30:52 · 395 阅读 · 0 评论 -
Jetpack Compose之对话框和进度条
对话框和进度条其实并无多大联系,放在一起写是因为两者的内容都不多,所以凑到一起,对话框是我们平时开发使用得比较多的组件,像隐私授权,用户点击删除时给用户提示这是一个危险操作等,进度条的使用频率也很高,比如下载文件,上传文件,处理任务时都可以使用进度条,让用户知道系统还在运行,没有死机。本文将介绍在Compose中如何使用对话框和进度条原创 2023-04-10 23:36:57 · 1066 阅读 · 0 评论 -
Jetpack Compose之选择器
选择器主要是指Checkbox复选框,单选开关Switch,滑杆组件Slider等用于提供给用户选择一些值和程序交互的组件,比如像复选框Checkbox,可以让用户选择一个或者多个选项,它可以将一个选项打开或者是关闭,通常用来做线上调查问卷或者是模拟考试的场景程序中,再比如滑杆组件可以用来作为调节音量和亮度的数值调整,或者是做进度条。原创 2023-04-10 22:51:23 · 581 阅读 · 0 评论 -
Jetpack Compose基础组件之按钮组件
Button组件的第一个参数onClick是必填项,这是按钮组件最重要的功能,通过回调响应用户的点击事件,最后一个参数content也是必填项,展示按钮的内容。Compose 的Button组件默认没有任何UI,它仅仅是一个响应onClick的容器,它的UI需要在content中通过其他组件实现原创 2023-04-07 22:20:58 · 646 阅读 · 0 评论 -
Jetpack Compose基础组件之图片组件
在Compose中,图片组件主要有两种,分别是显示图标的Icon组件和显示图片的Image组件,当我们显示一系列的小图标的时候,我们可以使用Icon组件,当显示图片时,我们就用专用的Image组件。在Android传统的View中,我们显示图片和图标都是使用ImageView。我个人比较喜欢Compose的这种分开的方式,增加了代码的可读性。原创 2023-04-07 13:15:10 · 1323 阅读 · 3 评论 -
Jetpack Compose基础组件之文字组件
文本是UI界面中最常见的元素之一,在Compose中,文字组件扮演着重要的角色,文字组件是遵循Material Design规范设计的上层组件,如果我们不想使用Material Design,我们也可以直接使用更底层的文本组件,如Text组件对应的更底层的文本组件是BasicText,文本组件不得不提输入框的使用,本文会主要介绍Text和输入框,并且实现一个现在App中都在用的好看的输入框原创 2023-03-31 21:19:24 · 1058 阅读 · 0 评论 -
JetPack Compose之Modifier修饰符
在Compose中,每一个组件都是带有@Compose注解的函数,被称为Composable。Compose已经预置了很多的Compose UI组件,这些组件都是基于Material Design规范设计的,例如Button,TextField,TopAPPBar等。在布局上,Compose提供了Column,Row,Box三种布局组件,这些布局组件的使用类似于传统视图开发的LinearLayout(Vertical),LinearLayout(Horizontal),FrameLayout。而这些UI组件原创 2023-03-28 22:16:12 · 426 阅读 · 0 评论 -
JetPack Compose入门知识
Jetpack Compose 是Android新一代UI开发框架,采用声明式开发范式,开发者只需要将注意力放在如何编写UI界面上,当需要渲染的数据发生变化时,框架会自动完成UI刷新,其次它使用Kotlin DSL来编写API,相对于传统的试图开发方式来说,代码的效率更高,并且实现同样的功能只需要以前一半的代码量。可能有读者会说,有些项目就是使用以前的XML+View的方式来开发的,项目比较大,总不能全部用Compose重写一遍吧,这个其实不用担心,因为Compse有良好的兼容性,可以和AndroidVie原创 2023-03-17 21:51:14 · 924 阅读 · 0 评论