compose ui

他是什么

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API,可以帮助您简化并加快 Android 界面开发,打造生动而精彩的应用。

缺点

包体积增大, aab 集成compose之前:266451kb downloadsize 256.8MB
272052kb 262.2mb。为其支持的第三方库少

优势

  • 减少耦合 增加内聚, 用更少的代码实现功能。编写代码只需要采用 Kotlin,而不必拆分成 Kotlin 和 XML 部分。

  • 在 Compose 中,状态是显式的,并且会传递给相应的可组合项。这样一来,状态便具有单一可信来源。

  • Compose 使用声明性 API,这意味着您只需描述界面,Compose 会负责完成其余工作。这类 API 十分直观 。

  • 声明式UI 相对于命令式UI 更加直观和逻辑清晰。您可以构建不与特定 activity 或 fragment 相关联的小型无状态组件。(比如实现recylerView ),
    recyclerView 在布局加入

 <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/recycler_view"
        android:layout_height="wrap_content" />

对应的item 布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:textColor="@color/red"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

初始化 recyclerView

        mbinding.recyclerView.apply {
            layoutManager=LinearLayoutManager(this@TestActivity)
            adapter=TestAdapter(mutableListOf("test--->","test1--->", "test2--->"))
        }

对应的Adapter

class TestAdapter(val mData: MutableList<String>) :
    RecyclerView.Adapter<TestAdapter.TestViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TestViewHolder {
        ItemTestAdapterItemBinding.inflate(LayoutInflater.from(parent.context)).apply {
            return TestViewHolder(this)
        }
    }

    override fun getItemCount(): Int {
        return mData.size
    }

    override fun onBindViewHolder(holder: TestViewHolder, position: Int) {
        val data = mData.get(position)
        holder.bindData(data)
    }

    inner class TestViewHolder(val itemBinding: ItemTestAdapterItemBinding) :
        RecyclerView.ViewHolder(itemBinding.root) {
        fun bindData(data: String) {
            itemBinding.textView.text = data
        }

    }
}

compose 实现

   @Composable
    fun testRecyclerView() {
        val list = listOf("a", "b", "c")
        LazyColumn {
            items(list) {
                Text(text = it, color = Color.Red,modifier = Modifier.fillMaxSize())
            }
        }
    }

和当前View 体系的平替关系

布局:

RecyclerView ->LazyColum/LazyRow/LazyVerticalGrid/LazyHorizontalGrid/LazyVerticalStaggeredGrid /LazyHorizontalStaggeredGrid

LinearLayout->Row/Colum
FramLayout->Box
ViewPager->HorizontalPager/VerticalPager
FlowLayout(非官方)->FlowRow /FlowColumn
ConstraintLayout->ConstraintLayout

控件

TextView ->Text
EditTextView->TextField/OutlinedTextField
ImageView->Image/Icon/GlideImage(网络图)/AsyncImage(Coil网络图)
Button->Button/TextButton/ElevatedButton/OutlinedButton/FilledTonalButton
FloatingActionButton->FloatingActionButton/SmallFloatingActionButton/LargeFloatingActionButton/ExtendedFloatingActionButton
ProgressBar->LinearProgressIndicator /CircularProgressIndicator
SeekBar->Slider

修饰符

借助修饰符,您可以修饰或扩充可组合项。您可以使用修饰符来执行以下操作:

更改可组合项的大小、布局、行为和外观
添加信息,如无障碍标签
处理用户输入
添加高级互动,如使元素可点击、可滚动、可拖动或可缩放
修饰符是标准的 Kotlin 对象。您可以通过调用某个 Modifier类函数来创建修饰符:
常见的align,border,alpha,background,clip,padding,size,clickable等

修饰符顺序影响:


layout-padding-clickable.gif
 Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
layout-padding-not-clickable.gif

更多。。https://developer.android.google.cn/develop/ui/compose/modifiers?hl=zh-cn

绘制不规则背景

image.png
      Box(
                    Modifier
                        .drawBehind {
                            Path().apply {
                                val lineSize=15.dp()
                                moveTo(size.width/8f,size.height-2.dp())
                                lineTo(size.width/8f+lineSize/2,size.height+lineSize/2-2.dp())
                                lineTo(size.width/8f+lineSize,size.height-2.dp())
                                close()
                                drawPath(path = this, color = color_fotor_blue)

                            }
                        }
                        .clip(RoundedCornerShape(8.dp))
                        .background(color_fotor_blue)
                        .padding(horizontal = 8.dp, vertical = 2.dp)
                ) {
                    Text("请先阅读并同意后登录", color = white, fontSize = 11.sp)
                }

重组触发顺序如下:

重组

智能重组:每当状态更新时,都会发生重组重组通常由对 State<T> 对象的更改触发

通过remember 关键字 创建MutableState<T> ,对MutableState的 value 所做的任何更改都会安排对读取 value 的所有可组合函数进行重组。

首先携带状态数据触发重组的View >> Compose的其他View重组 >> DisposableEffect >> SideEffect >> LaunchedEffect

Compose和View体系互相调用

在xml 种使用composeview

<androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

在代码种对他调用

setContent {
          // 需要使用的compose 组件
        }

在compose 中使用xml

 AndroidView(factory = {
        val view = LayoutInflater.from(it).inflate(R.layout.xxx, null)
        view
    }, modifier = Modifier.fillMaxSize())

Compose 中的附带效应

附带效应是指发生在可组合作用域之外的应用状态的变化,可组合项在理想情况下应该是无附带效应的,不过,有时附带效应是必要的,例如,触发一次性事件(例如显示信息提示控件),或在满足特定状态条件时进入另一个屏幕。
LaunchedEffect可以传递一个参数key,如果key发生变化,系统将取消现有协程,并在新的协程中启动新的挂起函数。
rememberCoroutineScope:获取组合感知作用域,以在可组合项外启动协程,比如onClick 代码块
rememberUpdatedState:在效应中引用值,该值在值发生更改时不应重启
DisposableEffect:需要清理的效果
SideEffect :使用 SideEffect 可确保在每次成功重组后执行该效果。
produceState:使用此协程将非 Compose 状态转换为 Compose 状态,例如将外部订阅驱动的状态(如 Flow、LiveData 或 RxJava)引入组合。
snapshotFlow:使用 [snapshotFlow] 将[State<T>] 对象转换为冷 Flow。

derivedStateOf:当可组合项输入的变化频率超过您需要的重组频率时,就应该使用 derivedStateOf 函数。这种情况通常是指,某些内容(例如滚动位置)频繁变化,但可组合项只有在超过某个阈值时才需要对其做出响应。

 val showButton by remember {
            derivedStateOf {
                listState.firstVisibleItemIndex > 0
            }
        }
最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,992评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,212评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,535评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,197评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,310评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,383评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,409评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,191评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,621评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,763评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,403评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2 351

推荐阅读更多精彩内容