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
            }
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容