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

Jetpack-Compose 学习笔记(二)—— Compose 布局你学会了么?

用法 Surface 位于 androidx.compose.material 包中,很显然它是 Material Design 风格的,可以将它理解为一个容器,我们可以设置容器的高度(带阴影效果)、...这可以确保一个 Surface 的叠加高度永远不会比它的祖先低,因为它是所有先前 Surface 的高度总和。...,如果只声明一个,则可用 createRef() 方法 // 这里声明的类似于 View 的 id val (button, text) = createRefs()...: Spread:所有子元素平均分布在父布局空间中,是默认类型; SpreadInside:第一个和最后一个分布在链条的两端,其余子元素平均分布剩下的空间; Packed:所有子元素打包在一起,并放在链条的中间.../ https://compose.net.cn/elements/surface/ https://developer.android.google.cn/reference/kotlin/androidx

3.3K31

写给初学者的Jetpack Compose教程,基础控件和布局

打开Android Studio,创建一个名叫ComposeTest的新项目,然后选择Compose Empty Activity,如下图所示: 这样Android Studio就会为我们创建一个拥有...由于目前我们还是初学者,暂时没有必要对这个Surface函数了解太多,这里就不做过多解释了。 除此之外,你会发现Android Studio还为我们生成了一个DefaultPreview函数。...而到了Compose的Image上,则变成了一个强制性的参数。 当然,如果你就是不想要为图片指定contentDescription,也可以直接传null。...需要注意的是,Image接收的是Compose中专有的ImageBitmap对象,而不是传统的Bitmap对象。...那么可能有些朋友会感到疑惑,为什么Compose的核心布局就只有这几个?RelativeLayout和ConstraintLayout也很常用,Compose就没有对应的布局吗?

3.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android | Compose 初上手

    Compose 编程思想 Jetpack COmpose 是一个适用于 android 的新式声明性界面工具包。...声明式范式转变 在 Compose 的声明方法中,微件相对无状态,并且不提供 get,set 方法。实际上,微件微件不会以对象的形式提供。你可以通过调用带有不同参数的统一可组合函数来更新界面。...重组跳过尽可能多的内容 如果界面某些部分无需,Compose 会尽力只重组需要更新的部分。这意味着,他可以跳过某些内容以重新运行单个按钮的可组合项,而不执行树中其上面或下面的任何可组合项。...contentColor:此 Surface 为其子级提供的首选内容颜色。...参考资料 developer.android.google.cn/jetpack/com… 以及网上的一些文章 如果本文对你有帮助,请点赞支持,谢谢!如果有任何问题,可直接在下方评论,谢谢

    5.4K20

    Compose 事件分发(上) 寻找触摸点

    pointerInput 即可 分析: 根据上篇《Compose 中嵌套原生 View 原理》中,我们梳理出了 Compose 的布局层级,我们再把这个图拿出来: 承载于 Compose 的布局为...AndroidComposeView,Android 事件的分发都会通过 AndroidComposeView 的 dispatchTouchEvent 分发给 Compose: override fun...这个数据 bean 中,我们直接来看处理事件的 process 方法, @OptIn(InternalCoreApi::class) // 1、root 为 AndroidComposeView 传进来的根节点...InnerPlaceable,他是专门用来遍历子 LayoutNode 的 hitTest 操作,他被放在 wrapper 链的最后一个。...Surface 源码的时候发现,Surface 原来默认添加了个没有处理事件的 pointerInput 总结 本节完成了对触摸点的 PointerInputFilters 收集,下一章我们来讲下事件的分发处理

    1K10

    android的surfaceflinger原理学习「建议收藏」

    在这里还存在一个问题,那就是当存在图形重合的时候应该如何处理呢,而且可能有些surface 还带有透明信息,这里就是我们SurfaceFlinger 需要解决问题,它要把各个surface 组合(compose...不 过在实际中我们不一定需要实现Overlay hal,如果了解硬件的话,可以在驱动中直接把这些信息送到Overlay Buffer,而不需要走上层的Android。...3.1 、Surface 的创建过程 前面提到了每个应用程序可能有一个或者多个Surface , 我们需要一些数据结构来存储我们的窗口信息,我们还需要buffer 来存储我们的窗口内容, 而且最主要的是我们应该确定一个方案来和...在这个处理子过程中 Android 会根据标志位来对所有 layer 进行遍历,一旦发现哪个窗口的状态发生了变化就设置标志位以在将来重新计算这个窗口的可见区域。...在完成所有子 layer 的遍历以后, Android 还会根据标志位来处理主 layer ,举个例子,比如说传感器感应到手机横过来了,会将窗口横向显示,此时就要重新设置主 layer 的方向。

    2K10

    Android Jetpack Compose开发体验

    总之目前来说每种路线各有优势,kotlin生成dart 字节码理论上也是可以的,反过来,如果使用graal vm,dart也可以直接在android上跑。...Compose UI中的Text对富文本的支持其实是弱化了的,当然可行的方法是使用Flow布局去实现,但另一个问题是,html解析如果沿用android 的span标记,就无法适应其他平台,因此这是一种妥协了...第二点我们看到,Brush的作用,其类似android Paint的Shader,不过上面的代码使用Brush的会频繁创建对象,这点没有android传统View的Shader#setLocalMatrix...动画偏移效果 下面是一个简单的位置偏移动画,也是来自JetPack Compose官方教程中的 在这个动画中,还有一点需要注意的是,偏移方式是通过Offset方式,类似Android中的View修改Left...不过,这不是重点,重点是我们可以看到,在Modifier中直接修改Compose UI的相对位置。

    32710

    Jetpack-Compose 学习笔记(三)—— Compose 的自定义“View”

    App 结构的 Scaffold 脚手架组件,顺便学习了 Surface、Modifier 的一些使用,还有 ConstraintLayout 在Compose 中的使用方法。...如果一个 Layout 元素需要测量两次它的所有子元素,子元素中的子元素就会被测量四次,以此类推,测量的次数就会随着布局深度成指数级增长!...Compose 自定义一个 “View” Compose 中的自定义 Layout 跟 View 体系是很不同的。我们需要自定义的 Layout 居然就是自定义一个 Modifier 属性!...) // 首先是测量 ... } ) 当调用 measurable 的 measure 方法后,就会返回一个 Placeable 对象。...width 直接由 Placeable 对象就可获得(placeable.width),而高度由示意图可以得出计算方法:height = placeable.height + d,即普通 Text 的高度再加上

    1.5K21

    设计图转Compose代码,Relay帮你轻松搞定

    说了这么多,晦涩难懂,简单的说就是借助Relay可以直接根据UI图生成Compose代码,我们来看如何使用。...基础体验 创建Android项目 首先我们来创建一个Compose项目,项目创建完成后,我们在模块中的Gradle文件中添加Relay Gradle 插件。...我们直接将下载好的HelloFigma.fig拖入到Figma中,我们可以看到示例是一个图片与文本组件垂直摆放。 创建组件 我们首先需要将其转换为一个组件。...UI更新 我们在Figma中将文字颜色改为红色,并且再多添加一个文本显示任意内容。 更改完之后我们重复上述步骤,发布UI包。 发布完之后我们直接在Android Studio中更新UI包。...添加好之后按照之前的步骤保存,然后通过Android Studio更新。重新build,生成的代码就会多一个userName参数,默认是空值。

    51410

    compose--动画

    compose中本身封装了很多动画,我们可以拿来直接使用,动画也可以从官网进行学习:Compose动画 一、AnimationSpec compose中的动画效果都是由AnimationSpec定义的...就是一个弹弹乐效果的插值器,stiffness 定义弹簧应向结束值移动的速度,dampingRatio 定义弹簧的弹性,官方给出的效果图示如下: 例子: @Preview @Composable fun...transition进而自定义一些动画,该对象为Transition,可管理一个或多个动画作为其子项,并在多个状态之间同时运行这些动画,通过Transition也可以直接使用AnimatedVisibility...和 AnimatedContent 6.1 基本使用updateTransition 通过updateTransition获取一个Transition对象,结合状态定义动画效果: @Preview @...:低级别动画 高级动画已经和compose进行了结合,而低级动画都是基于协程的API,也就是在使用过程中,我们需要手动启动协程,我们可以使用附带效应的LaunchedEffect()在compose中启动一个协程

    1K10

    理清 Activity、View 及 Window 之间关系

    可能有人会说因为WindowManager管理的就是Window对象呀,那我想问,既然这样,Android系统直接让WindowManager去管理View不就好了?...Surface其实就是一个持有像素点矩阵的对象,这个像素点矩阵是组成显示在屏幕的图像的一部分。...Window只attach一个View Tree,当Window需要重绘(如,当View调用invalidate)时,最终转为Window的Surface,Surface被锁住(locked)并返回Canvas...个人理解: Android中的应用中,里面对各个窗口的管理相当复杂(任务栈、状态等等),Android系统当然可以不用Activity,让用户自己直接操作Window来开发自己的应用。...为了让大家能简单、快速的开发应用,Android通过定义Activity,让Activity帮我们管理好,我们只需简单的去重写几个回调函数,无需直接与Window对象接触。

    1.3K90

    Android窗口管理分析(2):WindowManagerService窗口管理之Window添加流程

    PopupWindow、Dialog、Activity、Toast等都有窗口的概念,但又各有不同,Android将窗口大致分为三类:应用窗口、子窗口、系统窗口。...相对的,mWindow是一个W extends IWindow.Stub Binder服务对象,其实可以看做是App端的窗口对象,主要作用是传递给WMS,并作为WMS向APP端发送消息的通道,在Android...如下,这里只关心一个重要的参数mSurface,在Binder通信中mSurface是一个out类型的参数,也就是Surface内部的内容需要WMS端负责填充,并回传给APP端: private...Layer,这里会新建一个Layer对象,Layer中包含着与这个图层对应的Handle及Producer对象,Handle可以看做是Surface的唯一性标识,不过好像没太大的作用,最多是一个标识,将来清理的时候有用...的拷贝函数其实就是直接修改Surface native对象指针值,native的Surface对象中包含mGraphicBufferProducer对象,很重要,会被传递给APP端。

    3K50

    Jetpack Compose开篇 之 HelloWorld

    Compose系列的文章,Compose将会是原生开发的下一个重大改变!...它基于声明性编程模型,因此您只需描述界面的外观,Compose 会负责完成其余工作,界面会随着应用状态的变化而自动更新。 上述是官方的描述,简单的说,在此之前,我们如何实现一个功能?...Jetpack Compose相比,更喜欢和Android相比,并得出了一些结论,那些结论我不去评判对错,我也没有资格去评判,但是如果你问我,一个Android开发者 Flutter、Jetpack Compose...Jetpack Compose HelloWorld 新建项目 使用Compose我们需要下载Android studio4.2的最新预览版本,我们可以直接新建一个Compose项目,也可以在已有项目中添加配置...,这里我们来直接新建一个项目 ?

    1.9K20

    Compose 中嵌套原生 View 原理

    Compose 是用于构建原生 Android UI 的现代工具包,他只需要在 xml 布局中添加 ComposeView,或是通过 setContent 扩展函数,即可将 Compose 组件绘制界面中...来创建一个 Node 节点来参与 Compose 的绘制。...,AndroidViewHolder 是一个继承自 ViewGroup 的原生组件 将原生 view 赋值给幕后字段,也即 view 的实体是 ImageView 移除所有的子 View,看来,AndroidViewHolder...只支持添加一个原生 View 判断原生 view 是否为空,我们提供了 ImageView ,所以该判断为 true 将原生 view 添加到当前的 ViewGroup,也即我们的 ImageView...这里先小结下:AndroidViewHolder 中的 layoutNode 是一个不可见的 Compose 代理节点,他将 Compose 中触发的回调结果应用到 ViewGroup 中,以此来控制

    91720

    Compose也能开发iOS了,快来体验~

    搭建项目 创建项目 因为目前Compose for iOS阶段还在试验阶段,所以我们无法使用Android Studio或者IDEA直接创建Compose支持iOS的项目,这里我们采用之前的方法,先使用...Android Studio创建一个KMM项目,如果你不知道如何创建一个KMM项目,可以参照之前的这篇文章KMM的初次尝试~ ,项目目录结构如下所示。...uikit就是compose-jb暴露的UIKit对象。...、密码输入框和一个登录按钮,就是简单的Compose代码。...一个尴尬的问题 我一直认为存在一个比较尴尬的问题,那就是像上面实现一个完整的双端网络请求功能需要用到KMM + Compose-jb,但是KMM与Compose-jb并不是一个东西,但是用的时候呢基本上都是一起用

    1.4K30

    Android相机快速使用

    由于摄像头可调参数极多,又涉及硬件厂商的各种兼容性。在Android中,这并不是一个简单的工作。本文只记录一种快速使用,能够简单的预览画面,录制视频。...一般在这里将画图的线程停止销毁 * * @param surfaceHolder 持有当前 Surface 的 SurfaceHolder 对象 *...只在此列出,引起注意。 在Android6.0及以上,需要动态申请权限。在权限获得同意后,才能初始化相机相关组件,否则会直接报错 相机中有很多参数可以设置,如闪光灯,录制码率,预览尺寸等。...但所有的参数设置,都需要先获取硬件的支持情况。如果硬件不支持,则可能报错。 Camera.open()在大部分手机上,可以在子线程中启动,减少主线程的卡帧情况。但在部分机型如魅族上,只能在主线程启动。...相机相关的组件,需要非常注意机型适配的问题。 以上就是Android Camera组件的快速使用。如有间题,欢迎指正。

    98130

    Jetpack-Compose 学习笔记(六)—— Compose 主题 Theme 一探究竟,换肤还能如此 Easy?

    Jetpack Compose 的主题 Theme 就是一套 UI 风格,其中包括字体、字号、色值等等,类比于 Android View 体系中的 Theme.MaterialComponents.DayNight.DarkActionBar...其实,在 Compose 中,我们可以将当前主题用一个 MutableState对象来保存,然后将主题中的色值集合与这个状态相关联,当用户切换主题改变了这个 MutableState值之后,与之关联的色值集合就会收到回调进行切换...其实,所谓的色值组就是一个 Colors对象,Compose 中默认就有 lightColors和 darkColors两种 Colors对象,分别用于暗夜模式和白天模式的主题色值的设置,我们这里统一是以白天模式的...返回值是一个 State状态对象,所以它可以不断地去更新值,直至动画完成。 需要注意的是,只要动画所作用的可组合项没有从 Compose 组件树上被移除,那么这个动画方法不会被取消或被停止。...Android Jetpack Compose 实现主题切换(换肤);九狼 https://juejin.cn/post/7057418707357663246 Jetpack Compose -

    2.2K20

    Android 图形架构

    因此,Android图形架构的就是把各个应用创建的一个个window组合显示到显示屏上的架构。 首先我们要理解Android系统中以下概念: Window:代表显示器上一个单独的视图区域的对象。...它是指java对象,c++对应的对象是ANativeWindow。 简而言之,就是,Window中的view被绘制或渲染到Surface中,才能被显示在Display上。...这些Window可以设置父子关系,如一般的Dialog会是它所属Activity的子Window。这些子Window会拥有自己单独的Surface。...另外一些如MediaCodec之类的API,直接操作Surface。 View 构建用户界面的基础元素,每个View占据屏幕上的一个矩形,并负责这个矩形区域的绘图和事件处理。...一个Surface一次只能和一个EGLSurface关联(只能有一个生产方连接到BufferQueue),只有当关联的EGLSurface被销毁后(它将断开与BufferQueue的连接),才允许其它的

    2.3K32
    领券