首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原创|Android Jetpack Compose 最全上手指南

二、Jetpack Compose 介绍 Jetpack Compose 是一个用于构建原生Android UI 的现代化工具包,它基于声明式的编程模型,因此你可以简单描述UI的外观,而Compose...注意,语言下来菜单中,Kotlin 是唯一一个可选项,因为Jetpack Compose 只能用Kotlin来写的才能运行。 c....Android的xml布局中,如果要显示一个垂直结构的布局,最常用的就是LinearLayout, 设置android:orientation 值为vertical, 子元素就会垂直排列,那么,Jetpack...Text("Android技术杂货铺") Text("依然范特西") } } 效果如下: 可以看到,前面重叠的布局,现在已经垂直排列了,但是,默认情况下,从左上角开始,一个一个的排列...但是有一个限制,那就是composable函数不能有参数 满足下面两条件: 函数没有参数 函数前面添加@Preview注解 预览效果图如下: 当布局改变了之后,顶部会出现一个导航条,显示预览已经过期

6.1K20

用纯 CSS 实现文本打字机效果,一定很酷!

首先我们来解释一下打字机效果的实现方式: 打字机动画将通过使用CSS steps()函数一步一步文本元素的宽度从0更改为100%,从而显示文本元素。 一个闪烁动画将使光标动起来。...产生输入效果之前,为了输入完的元素的最后一个字母处停止光标,就像打字机所做的那样,我们将为输入的元素创建一个容器,并添加display: inline-block;: .container {...display: inline-block; } 制作显示文本动画 打字机动画将创建一个效果一个字母一个字母打印出输入元素中的文本。...: 添加步骤以实现打字机效果 到目前为止,我们的文本被揭示了,但是是以一种平滑的方式,不是一个字母一个字母揭示文本。...为了让这个动画一个字母一个字母显示我们的文本元素,或者像打字机那样以步骤显示文本元素,我们需要将typed-out类包含的typing动画拆分为步骤,以便它看起来像是被键入的。

2.6K10
您找到你想要的搜索结果了吗?
是的
没有找到

Kotlin入门(20)几种常见的对话框

下拉选择框 对于某些固定值的条件选择,比如红绿蓝三原色选择其一,一月份到十二月份选择其中一个月份等等,这些情况Android中用到了下拉框Spinner。...界面上的Spinner控件一开始是右侧带向下箭头的文本,点击该文本会弹出一个选择对话框,选中某一项之后,对话框消失,同时界面上的文本替换为刚才选中的文本内容。...既然此路不通,那就试试别的办法呗,前面提到Spinner其实由两部分组成,一部分是直接显示界面上的带箭头文本,另一部分是点击后弹出的选择对话框,所以能不能绕过Spinner,运用所见即所得的理念,干脆把下拉框分离成两控件好了...倘若仅仅是一个带箭头的文本,毫无疑问使用文本视图TextView就可以了,箭头图标可以布局文件中通过drawableRight属性来指定。...,但是二者功能使用上是没什么区别的,同样支持点击文本弹出选择框,同样支持选中某项的回调。

1.6K10

Kotlin入门(20)几种常见的对话框

下拉选择框 对于某些固定值的条件选择,比如红绿蓝三原色选择其一,一月份到十二月份选择其中一个月份等等,这些情况Android中用到了下拉框Spinner。...界面上的Spinner控件一开始是右侧带向下箭头的文本,点击该文本会弹出一个选择对话框,选中某一项之后,对话框消失,同时界面上的文本替换为刚才选中的文本内容。...既然此路不通,那就试试别的办法呗,前面提到Spinner其实由两部分组成,一部分是直接显示界面上的带箭头文本,另一部分是点击后弹出的选择对话框,所以能不能绕过Spinner,运用所见即所得的理念,干脆把下拉框分离成两控件好了...倘若仅仅是一个带箭头的文本,毫无疑问使用文本视图TextView就可以了,箭头图标可以布局文件中通过drawableRight属性来指定。...,但是二者功能使用上是没什么区别的,同样支持点击文本弹出选择框,同样支持选中某项的回调。

2.7K30

入坑 Kotlin前,这些框架能让你少走弯路

目前支持连接到 LastFm 并检索一些音乐乐队,以及显示歌手详情。该项目旨在展示如何使用 Kotlin 完整的编写复杂(至少架构中)项目。 ?...4、Konfetti 这是一个轻量的纸屑粒子效果动画,非常易于使用,能简便快捷的用来构建五彩纸屑效果。 ? 5、Simple-Calendar 一个简单、可定制的日历与事件小部件。...日历是离线的,没有其他任何集成,可以轻松创建定期事件并设置提醒,还可以显示周数。项目包含一个可调整大小的 4x4 小部件,可在其中自定义文本的颜色,以及背景的颜色。 ? ? ?...7、Kotlin-Android-Template 使用 Kotlin / MVP / ReactiveX 构建的 Android 项目模板,提供了一个生成器来快速创建 Kotlin Android 项目...只需终端执行简单的命令,就能轻松 Android 开发中开始使用 Kotlin 。 ? 8、Anko 这是一个使 Android 应用开发更快、更容易的 Kotlin 库。

2.2K20

Kotlin学习日志(六)控件使用

然后密码当然不能明文显示不能明文传输啊,不能是纯数字或者纯字母,特殊符号什么的,这里又涉及到了密码的安全登录,常见的是三级,纯数字是不行的,这一步你注册的时候就过不去,然后是最短和最长的密码位数限制...1.3 单选按钮RadioButton 单选按钮要在一组按钮中选择其中一项,并且不能多选,这要求有容器确定这组按钮的范围,这个容器便是单选组RadioGroup,单选组RadioGroup实质上是一个布局...1.5 文本视图TextView 有没有人觉得TextView很简单呢?但实际并不简单,比如常见的文字跑马灯效果,一行文本的内容太多,导致无法完全显示,但也不想分行显示,于是就有这个跑马灯效果了。...当然这些效果可以直接在布局文件中写好 ? 这里设置也是一样的效果。...1.7 文本编辑框EditText 文件编辑框通俗的说就是输入框,实际的开发中应用广泛,基本每一个APP都会有,常见的一些登录、注册、个人信息编辑的地方使用,EditText是可以限制用户的输入方式的

1.7K30

文本打字机效果

打字机效果也就是让文字逐个屏幕中显示,直到把整段话说完,常常被应用到人物对话,角色旁白以及引导教程等高频场景中。 ?...,我们就不能单纯截取每个字符串然后再动态添加补充,因为富文本的字符串里面带有标签,单纯截取字符的方式无法保证标签的闭合,如果标签无法闭合,那呈现的字体效果就不是带有格式的富文本字段。...所以要实现富文本打字机效果,首先需要针对富文本进行文字提取,保留标签,然后再把文字动态塞到它原本存在的位置当中,这就转化成了一个简单的“找位置”问题,假定我们当前的富文本字符串如下: 我是异名\n这是富文本打字机效果 我们需要把字符串里面的标签找出来,然后替换成一个容器,然后按顺序往每个容器内添加文字,提炼和动态添加的过程如下所示...result 可以留意到字符片段里面也有换行符\n,虽然它是由两个字符组成,但是反斜杠是js里面的特殊字符,字符串的处理中像\n、\"、\\等等都会被算作一个字符。

1.8K30

【网页特效】11 文本输入和 6 按钮操作 特效库

上已经收录,文章的已分类,整理了很多我的文档,和教程资料。 文本输入特效 1.power-mode-input PowerModeInput 可以让你的文本输入框更引人注目。...3.typewriterjs 一个简单而强大的原生javascript插件,具有很酷的打字机效果。 地址:https://github.com/tameemsafi/typewriterjs ?...该插件鼠标滑过指定的文本时,文字会不停的逐个进行翻转,类似洗牌效果,非常炫酷。 地址: https://github.com/ics-ikeda/shuffle-text ?...无相关性,超轻量,仅 1.5 缩小,或者 0.8 KB缩小和压缩 9.tinytyper TinyTyper 一个微小的库用于一段指定的文本元素上创建打字效果。...10.jquery.typer typer.js插件是一个非常有意思的jQuery插件,实现一个一个字输出,类似打字的效果。typer.js是一个比较小的插件,依赖于jQuery。

2.7K40

Android 11 Beta 版正式发布!以及众多面向开发者的重磅更新

今天发布的 Android 11 第一个 Beta 版聚焦于三主题: 以人为本、灵活控制以及隐私安全。 以人为本 Android 现在更突显人的要素,更善于沟通。... Android 11 中,可更新的模块数量增加了一倍有余,新增的 12 可更新模块会更有力确保隐私和安全,以及为用户和开发者带来更好的一致性。...Android 11 第一个 Beta 版本现已发布,您可以自己的应用中体验终版 SDK 和 NDK API,以及各种全新功能。...Android 模拟器现在直接集成 IDE 中,您可以并排显示测试中的应用,同时查看不同设备上的运行结果。我们还改进了设备管理器,让您更轻松管理多个设备。...我们持续推动 Jetpack 的演进,这套开发库涵盖了多个 Android 版本,并帮助大家更快速、更轻松实现常见的移动开发范式。

1.7K50

机器学习为核心,DeepMind助力谷歌开发的安卓 9「Pie」今日上线

用户在手机上向上滑动,就可以查看最近使用的应用全屏预览,只需点击就可以跳转回其中一个 app。...为了帮助开发和测试,谷歌添加了一个 Developer Option,可以在任何设备上模拟多个 cutout shapes。 ? 带有沉浸式内容的 APP 可以使用显示切换功能在设备上全屏显示。...文本放大 ? Android 9 中,谷歌添加了一个放大镜部件来提高用户选择文本的体验。放大镜部件允许用户通过可拖动窗口查看放大的文本,从而精确定位光标或者文本选择句柄。...Android 9 引入了一个系统管理的对话框,提示用户输入任何支持的生物认证类型。...我们正在与一些伙伴合作今年将设备更新为 Android 9。

2K10

Android 9 Pie 现已面向全球正式发布!

MessagingStyle 通知中,您可以显示对话和智能回复 (左) 或添加图片和表情 (右) 文本放大镜 Android 9 中添加文字放大镜工具 (Magnifier widget),以提升文本选择方面的用户体验...由于该放大器提供了可以文本上方拖拽的文本放大面板,所以有助于用户精准定位光标或文本选择手柄。该功能可以灵活运用在所有附加在窗口的视图上,个性化小部件和定制文本呈现均是不错的应用场景。...HEIF 是目前比较流行的一种的压缩格式,它改善了图片的压缩效果,并减少了图片的储存空间以及网络流量。引入平台支持后,开发者能更加方便从后台服务器传输并使用 HEIF 图像。...该 API 提供了多声场、多频段的动态处理效果,包括一个预均衡器、一个多频段压缩器,一个后均衡器以及一个串联的音量限制器。 ?...请获取进一步信息 网络连接与位置 使用 Wi-Fi RTT ,进行室内定位 Android 9 为 IEEE 802.11mc Wi-Fi 协议添加了平台支持 (称为 Wi-Fi 往返时间,RTT),

9.1K10

KMM跨平台开发入门,看这一篇就够了~

而KMM却与之相反,接下来让我们来一起了解一下吧~ 什么是KMM KMM 即 Kotlin Multiplatform Mobile 是一个 SDK,旨在简化跨平台移动应用程序的开发。...创建项目  安装好插件并重启后,我们可以创建一个Kotlin Multiplatform App,如下图所示。...这里我们仍然以Android实现为例。 实现页面层 androidApp下编写Compose代码,代码比较简单,就是点击按钮请求数据,展示展示文本中,代码如下所示。...(text)                     }                 }             }         } 这里我们并没有解析数据,仅仅是将请求的数据转化为Json串显示文本中...写在最后 到这里,恭喜你,已经入门了KMM的使用,更多的使用方法需要在实际项目中不断去总结,去尝试,Jetpack目前开发KMM版本,这对KMM发展将会是一个推进~

4.3K20

干货 | 携程机票 App KMM 跨端生产实践

Kotlin 依据其运行的平台不同拥有不同的名字,例如编译为 class 字节码运行于 JVM 及 Android 平台的称为 Kotlin/JVM,编译为原生二进制码无虚拟机环境直接运行于操作系统上的则称为...Kotlin 移动端的跨平台框架子集叫做 Kotlin Multiplatform Mobile,简称为 KMM。...机票 KMM 工程作为一个无需兼容旧代码的新工程,决定直接封装 MMKV API 来作为工程的底层存储框架,这里作为一个简单的 demo 来说明如何桥封装现有的 Android、iOS 库。...更让人头疼的是,数据 Store 内流转时每经过一个组件就会变一个名字,这丛概念上讲确实没有什么问题,因为数据不同的组件间流转时从概念上来说会有区别,但在 MVIKotlin 的设计中每种概念都由一个...3.2 Kotlin/Native 调用非虚函数使用静态分派 JVM 上为了实现多态调用非虚函数的机制称为动态分派,即仅在运行时才知道被调用的函数到底是哪一个版本(继承类、实现接口会覆盖函数)。

3.2K10

移动跨平台开发深度解析

VM虚拟机:与其他方案不同,kotlin提供的kotlin-native技术拥有自己的VM,可以同时支持Android、iOS 和 Web 开发。...打包与发布 React Native混合项目中,JS代码会被打包成一个 bundle 文件,自动添加到 App 的资源目录下。...bundle 部署至云端,然后通过网络请求或预下发的方式加载至用户的移动应用客户端;移动应用客户端里,Weex SDK 会准备好一个 JavaScript 执行环境,并且在用户打开一个 Weex 页面时在这个执行环境中执行相应的...Flutter Flutter是Google用以帮助开发者Ios和Android平台开发高质量原生应用的全新移动UI框架。...不过,Flutter 上 Android 自带了 Skia,Skia是一个 2D的绘图引擎库,跨平台,所以可以被嵌入到 Flutter的 iOS SDK中,使得 Flutter Android SDK

3.4K20

Kotlin入门(2)让App开发变得更容易

比如现在有名为tv_hello的TextView控件,准备代码中把tv_hello的显示文本改为“你好呀”,这用Java编码的话即是下面两行代码: TextView tv_hello =...比如修改TextView的显示文本,采用Kotlin编码只要下面一行: tv_hello.setText("你好呀") 如此一来,原来的两行代码精简到一行代码,去掉了原先获取控件对象的冗余代码...Button是Android的常用按钮控件,代码中经常要处理Button控件的点击事件,下面的Java代码就是响应Button点击的一个例子: final Button btn_click =...第三局换个Button控件的长按事件,下面的Java代码是响应Button长按的一个例子: final Button btn_click_long = (Button) findViewById...以上初步介绍了Kotlin的几种常见用法,从下一篇文章开始,将系统讲解Kotlin的基本语法知识。 点此查看Kotlin入门教程的完整目录

1.2K30

Android开发未来的出路何在

图中是每个大版本中最具代表性的特征标记在图中,并不代表着该版本全部特征,同样专项计划不是只一个版本执行,比如续航和性能优化,每一个版本都在持续改进中,Treble计划一直迭代至今。...FreeType:位图(bitmap)和矢量(vector)字体显示。 SQLite:一个对于所有应用程序可用,功能强劲的轻型关系型数据库引擎。...Dalvik被设计成一个设备可以同时高效运行多个虚拟系统。Dalvik虚拟机执行(.dex)的Dalvik可执行文件,该税文件针对小内存使用做了优化。...大前端方向,对于跨平台开发中一不断迭代中寻找更好、更优的解决方案,目前来看Flutter还是更有优势。...只要一个领域做到极致,即便Android被淘汰了,换新领域面试官依然会相信你能做到极致。

68230

Jetpack Compose Alpha 版现已发布!

图片 作者 / Google 产品总监 Karen Ng Jetpack Compose 是一个现代化的 UI 工具包,旨在帮助开发者通过原生平台 API 简单快捷Android 平台构建精美应用...进而,我们还了解到 Kotlin 深受开发者的喜爱,如今排名前一千名的应用中,有超过 70% 的应用使用了 Kotlin,60% 的专业 Android 开发者都在使用 Kotlin。...UI 组件 性能优化 测试 文本和可编辑文本 主题和图形 Window 管理 与 JetBrains Kotlin 团队 的紧密合作下,我们Android Studio 4.2 canary...我们发布了一个新库 MDC Compose 主题适配器,它可以让您在 Compose UI 中复用现有的 Material Components 主题。...Android Studio 提供了 交互式预览模式 。交互式预览模式下,您可以 UI 元素中点击或输入,UI 将会响应,就像是已安装的应用中一样。

4K30

最新 Android 热门开源项目公布

LeanCloud 工程师收集了 2019 年 5 月 GitHub 上比较流行的 9 Android 开发相关的开源项目,分享给各位开发者,内容包括对话框、日历、矢量绘图组件,内存泄露检测库,Kotlin...[1240] 使用起来极为便捷,只需 build.gradle 中引入依赖: dependencies { LeakCanary 会自动检测 debug build 中的内存泄露,并显示提示。...官网:ktlint.github.io mockk Kotlin 的 mock 测试库,不仅支持常规的单元测试,还支持真机或模拟器上运行的 instrumented 测试。...顺便提一下,由于 Android components 使用 Kotlin 开发,Firefox Fenix 顺理成章使用 Kotlin 开发。...很巧,上面介绍的 9 开源项目,均使用 Kotlin 编写。当然,其中不少是专门面向 Kotlin 的辅助开发工具,使用 Kotlin 编写理所当然。

1.3K00

一起看 IO | Jetpack 组件的新特性

,即 MAD 之门的钥匙,它是一个包含超过 100 库、工具及指南的套件,以帮助开发者遵循最佳实践、减少模板代码,以及编写在不同 Android 版本和设备上表现一致的代码,从而使您可以专注于应用中实现独特的功能...Room 2.4 还内建了对枚举和 RxJava3 的支持,同时全面支持 Kotlin 1.6。 我们从 Room 2.5 开始使用 Kotlin 对整个库进行重写。...其中,@Database 注解新加入了一个属性,可以用于定义需要在哪两版本间进行自动迁移。...这一 Fragment 使用 SlidingPaneLayout 管理一个列表窗格 (由您的子类管理),以及一个由 NavHostFragment 实现的详情窗格。...这其中一些状态是由一些 Jetpack 库自动提供的,但我们鼓励开发者提供自己应用特定的状态。

3.1K20
领券