如何将CameraView与Jetpack Compose一起使用? [英] How can I use a CameraView with Jetpack Compose?

问题描述

当前在Compose中没有等效于CameraView(和PreviewView)的东西.是否可以将其包装并以组合布局显示?

Currently there's no equivalent to CameraView (and PreviewView) in Compose. Is it possible to wrap it and display it in a compose layout?

推荐答案

目前没有任何官方资料 Camerax的可组合功能，因此我们必须在compose内填充旧版android视图.

At the moment there isn't any official Comosable function for Camerax so we have to inflate the legacy android view inside compose.

要实现这一目标 我们可以使用AndroidView可组合函数 它接受两个参数

To achieve that we can use AndroidView composable function, it accepts two parameters

• @param resId要膨胀的布局资源的ID.
• @param postInflationCallback在布局后要调用的回调 膨胀了.

• @param resId The id of the layout resource to be inflated.
• @param postInflationCallback The callback to be invoked after the layout is inflated.

并使用环境来访问生命周期和上下文

and to access the lifecycle and context we use the ambients

val lifecycleOwner = LifecycleOwnerAmbient.current
val context = ContextAmbient.current

有了我们需要的一切，就开始做吧:

As we have everything we need let's do it:

创建布局camera_host.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.camera.view.PreviewView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/previewView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

并使用AndroidView Composable函数对其进行充气.

and inflate it using AndroidView Composable function.

@Composable
fun SimpleCameraPreview() {
    val lifecycleOwner = LifecycleOwnerAmbient.current
    val context = ContextAmbient.current
    val cameraProviderFuture = remember { ProcessCameraProvider.getInstance(context) }
    AndroidView(resId = R.layout.camera_host) { inflatedLayout ->
       //You can call
      // findViewById<>() and etc ... on inflatedLayout
      // here PreviewView is the root of my layout so I just cast it to
      // the PreviewView and no findViewById is required

        cameraProviderFuture.addListener(Runnable {
            val cameraProvider = cameraProviderFuture.get()
            bindPreview(
                 lifecycleOwner,
                 inflatedLayout as PreviewView /*the inflated layout*/,
                 cameraProvider)
        }, ContextCompat.getMainExecutor(context))

    }
}

fun bindPreview(
    lifecycleOwner: LifecycleOwner,
    previewView: PreviewView,
    cameraProvider: ProcessCameraProvider
) {
    var preview: Preview = Preview.Builder().build()

    var cameraSelector: CameraSelector = CameraSelector.Builder()
        .requireLensFacing(CameraSelector.LENS_FACING_BACK)
        .build()

    preview.setSurfaceProvider(previewView.createSurfaceProvider())

    var camera = cameraProvider.bindToLifecycle(lifecycleOwner, cameraSelector, preview)
}

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SimpleCameraPreview()
        }
    }
}

这篇关于如何将CameraView与Jetpack Compose一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！