Jetpack Compose 是新 Android 应用程序的首选 UI 框架。它的声明式编程模型使编写漂亮的用户界面变得轻而易举。但是，如果您想重用依赖于传统View系统的现有代码怎么办？多年来，已经开发出无数精彩的定制组件。有一天可能会有它们的 Compose 版本。但是，无需等待。Jetpack Compose 包含功能强大但易于使用的互操作性 API。
在这篇简短的文章中，我将向您展示如何将 ZXing Android Embedded 集成到 Compose 应用程序中。该示例应用程序是我即将出版的《使用 Jetpack Compose 进行 Android UI 开发》一书的一部分。它将由 Packt 发布，预计 2022 年初可用。您可以在GitHub 上找到源代码。
ZxingDemo使用基于 ZXing 解码器的ZXing Android Embedded Barcode Scanner library for Android。它是根据 Apache-2.0 许可条款发布的，并托管在GitHub 上。
ZximgDemo的目的是展示Views 在 Compose 应用程序中的集成，而不是真正提供有用的应用程序。它使用 ZXing Android Embedded 连续扫描 Barcodes 和 QR-Codes 并将结果打印在屏幕上。
要使用该库，只需将其作为实现依赖项添加到您的模块级build.gradle文件中。
implementation 'com.journeyapps:zxing-android-embedded:4.3.0'
我们需要访问相机，所以我们需要请求权限。这是这样做的首选方法：
private lateinit var barcodeView: DecoratedBarcodeView
private val requestPermission =
registerForActivityResult(ActivityResultContracts.RequestPermission()) { isGranted ->
if (isGranted) {
barcodeView.resume()
}
}
override fun onResume() {
super.onResume()
requestPermission.launch(Manifest.permission.CAMERA)
}
override fun onPause() {
super.onPause()
barcodeView.pause()
}
ActivityResultContracts.RequestPermission替换围绕覆盖的过程onRequestPermissionsResult()。
barcodeView在 中初始化onCreate()。让我们来看看。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val beepManager = BeepManager(this)
val root = layoutInflater.inflate(R.layout.layout, null)
barcodeView = root.findViewById(R.id.barcode_scanner)
val formats = listOf(BarcodeFormat.QR_CODE, BarcodeFormat.CODE_39)
barcodeView.barcodeView.decoderFactory = DefaultDecoderFactory(formats)
barcodeView.initializeFromIntent(intent)
val callback = object : BarcodeCallback {
override fun barcodeResult(result: BarcodeResult) {
if (result.text == null || result.text == text.value) {
return
}
text.value = result.text
beepManager.playBeepSoundAndVibrate()
}
}
barcodeView.decodeContinuous(callback)
setContent {
val state = text.observeAsState()
state.value?.let {
ZxingDemo(root, it)
}
}
}
barcodeView引用组件树中的一个子元素，我使用 膨胀layoutInflater.inflate()并分配给root. 布局（R.layout.layout代表layout.xml）非常简单：
<?xml version="1.0" encoding="utf-8"?>
<com.journeyapps.barcodescanner.DecoratedBarcodeView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/barcode_scanner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" />
因此，条形码视图DecoratedBarcodeView作为其子项之一提供。一旦我们获得了对孩子的引用，我们就对其进行配置。您可以在 ZXing Android Embedded 文档中找到更多信息。
特定于 Compose 的部分发生在setContent {}.
- 我们使用创建状态
observeAsState() - 我们调用一个可组合的命名
ZxingDemo()并传递状态的值，并且root
text定义如下：
private val text = MutableLiveData("")
callback当扫描仪引擎提供结果时，它会在内部更新。
在我们看之前ZxingDemo()，让我们简要回顾一下：
-
root代表扫描仪 ui - 当扫描仪有结果时，它会更新
text（一个MutableLiveData实例 -
ZxingDemo()接收基于text扫描仪 ui 和根的状态值
现在是时候看看如何实现集成了：
@Composable
fun ZxingDemo(root: View, value: String) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopCenter
) {
AndroidView(modifier = Modifier.fillMaxSize(),
factory = {
root
})
if (value.isNotBlank()) {
Text(
modifier = Modifier.padding(16.dp),
text = value,
color = Color.White,
style = MaterialTheme.typography.h4
)
}
}
}
我们定义 aBox()有两个孩子，AndroidView()并且Text()。AndroidView()接收一个工厂，它只是返回root（扫描仪 ui）。文档说：
组成一个
View从factory. 该factory块将只被调用一次以获得View要组合的块，并且它也保证在 UI 线程上被调用。因此，除了创建factory，该块还可用于执行一次性初始化和查看常量属性的设置。
您可能想知道为什么我在 lambda 中onCreate()而不是在factorylambda 中膨胀对象树。好吧，配置条形码扫描仪不应该在可组合中完成，因为它可能是固有的（准备相机和预览，...）。此外，组件树的某些部分是从外部访问的（在活动级别上），因此无论如何我们都需要对子项的引用（barcodeView.
您还可以提供一个update块，我的示例没有。它在factory块完成后立即运行，并且由于重组可以运行多次。您可以使用它来设置View属性，具体取决于状态。
我的应用程序的 Compose 部分不会改变需要应用于扫描仪组件树的状态。
结论
正如ZxingDemo所示，集成提供自定义组件的库非常容易。您需要构建代码的结构取决于库的设置和配置方式。您是否打算使用 Jetpack Compose 互操作 API？请在评论中分享您的想法。
作者：Thomas Künneth
链接：https://dev.to/tkuenneth/integrating-zxing-android-embedded-in-a-compose-app-5ela
