Android Jectpack-Compose 库的粗略学习

Posted 2022-01-04 匆忙拥挤repeat

断断续续的看了几天的文档，测试过一部分的官网示例代码，使用的是1.0.5版本。

文章目录

• Compose 相较于View的体系
• 状态(State) 与修饰符(Modifier)
• 关于预览
• 关于手势、动画、Canvas绘制
• 关于xml类型的drawable资源
• 关于主题
• 关于一些可用的支持库和功能函数
• 和View的混用
• • Activity中使用setContent()
  • 组合一个View
  • ComposeView在Fragment中的应用

Compose 相较于View的体系

优点是：一次测量，一次绘制，组合灵活多变。它不需要编写xml文件，纯代码编写界面，不用分窗口编码，导致分散开发人员的注意力。
缺点是：牺牲了代码可读性，大量嵌套。预览不太及时。

在一个项目中，或多个风格类似的项目中，定义一套基础组件视图的公共库，它们都是由一个个@Composable 函数构成的，从前的一堆xml和View源码文件，变成了一个个".kt"源文件。再有一套说明文档，那应用起来应该会酸爽一些。

状态(State) 与修饰符(Modifier)

提供了一些函数，来记忆需要的自定义的视图的状态变量。(androidx.compose.runtime.State)

提供了非常多的修饰符(Modifier)。通过修饰符，您可以更改可组合项的大小、布局、外观，还可以添加高级互动，例如使元素可点击。您可以将这些修饰符链接起来，以创建更丰富的可组合项。

关于预览

当增删了可组合项时，需要再次build，不一定要部署到设备上。当仅是修改可组合项中某个已添加的属性的值时，不需要再次build，会立即看到属性变化引起的界面更新效果。

这点比起xml布局，实时效果就有不如了。每次build，都是需要耗费一定时间的。
此外，能预览为可组合项添加的动画效果。这点xml布局，当然是没有的。

关于手势、动画、Canvas绘制

手势：单击、双击、长按、拖动，快速滑动等解决方案，文档中都能找到。
动画：提供各种基础动画的实现与自定义动画的文档。
Canvas：提供了Canvas()可组合函数。

关于xml类型的drawable资源

Compose中无法使用，以前xml类型的drawable资源。

关于主题

当然是主推Material 主题。根据实际情况自定义。

关于一些可用的支持库和功能函数

• lib: ConstraintLayout
• lib: ViewModel
• lib: rxjava2
• lib: LiveData 可观察数据
• lib: Navigation 导航
• lib: Hilt 依赖注入
• lib: Paging 分页
• lib: io.coil-kt:coil-compose 图片加载
• CameraX
• @Composable fun rememberLauncherForActivityResult(ActivityResultContracts)
  ···

和View的混用

Compose的可组合项，最终会组成一个ComposeView，它最上层的继承是ViewGroup。
如要在某个 activity 中使用 Compose，必须使用 ComponentActivity，一般使用FragmentActivity、AppCompatActivity当然没问题。

Activity中使用setContent()

// sdk 提供
fun ComponentActivity.setContent(
    parent: CompositionContext? = null,
    content: @Composable () -> Unit
) 

组合一个View

// sdk 提供
@Composable
fun <T : View> AndroidView(
    factory: (Context) -> T,
    modifier: Modifier = Modifier,
    update: (T) -> Unit = NoOpUpdate
)
在factory实现中，加载一个xml layout。

ComposeView在Fragment中的应用

// sdk 提供
class ComposeView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AbstractComposeView(context, attrs, defStyleAttr)

• 在fragment#onCreateView() 返回一个 ComposeView

override fun onCreateView(
    inflater: LayoutInflater, 
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? 
    return ComposeView(requireContext()).apply 
        setContent 
            Text(text = "Hello world.")
        
    

• 在fragment#onCreateView() 返回一个xml-View，xml中含有 ComposeView

return inflater.inflate(R.layout.fragment_compose_ui, container, false).apply 
    findViewById<ComposeView>(R.id.composeView).setContent 
        Text(text = "Hello world.")