android-fragments 原生子系检视未占据FrameLayout的完整高度和长度

wtlkbnrh 于 2022-11-13 发布在 Android

关注(0)|答案(2)|浏览(127)

我正在尝试将camera-x集成到react-native中的android fragment中
这是我的本地代码

class CealScanQrView(context: Context): FrameLayout(context) {

 init {
        val frameLayoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        layoutParams = frameLayoutParams
       setLayoutParams(layoutParams)
        setBackgroundColor(Color.parseColor("#5FD3F3"))

        preview = PreviewView(context)
        preview.id = View.generateViewId()
        preview.layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        addView(preview)
}
//other non related code
......
}

我尝试使用Linearlayout和ConstraintLayout而不是Framelayout，但同样的问题仍然存在
在react-native端，我将按如下方式使用它

const App = () => {
//non-related code here
.....

 return (
    <SafeAreaView>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

      {isCameraPermissionGranted ? (
        <CealScanQrViewManager
          style={{
            // converts dpi to px, provide desired height
            height: PixelRatio.getPixelSizeForLayoutSize(200),
            // converts dpi to px, provide desired width
            width: PixelRatio.getPixelSizeForLayoutSize(200),
          }}
          ref={ref}
          onChange={readQr}
        />
      ) : (
        <View style={{backgroundColor: 'red'}} />
      )}
      <Text style={{color: 'red', fontSize: 25}}>{firstText}</Text>
      <Text style={{color: 'red', fontSize: 25}}>{secondText}</Text>
    </SafeAreaView>
  );
}

这是我的UI外观

你可以看到相机和第一个红色文本之间有一个空间，这个空间是Framelayout，但是相机没有占据Framelayout的整个空间，我不明白为什么
完整的源代码here

android-fragments

来源：https://stackoverflow.com/questions/73673218/native-child-view-does-not-occupy-full-height-and-width-of-framelayout

2条答案

按热度按时间

hujrc8aj1#

您的代码的第一个问题是，您在此处使用200 x200像素对其进行样式设置：

<CealScanQrViewManager
          style={{
            // You intentionally scale it to be small
            height: PixelRatio.getPixelSizeForLayoutSize(200),
            width: PixelRatio.getPixelSizeForLayoutSize(200),
          }}

第二件事是你使用的是androidx相机包中的PreviewView，它不是一个简单的SurfaceView或TextureView，而是一个 Package 器。它是什么意思-文档中说
它在内部使用TextureView或SurfaceView来显示摄像机馈送，并对它们应用所需的变换以正确显示预览，这涉及到校正它们的纵横比、缩放和旋转。
这意味着，如果将只使用正确的视图，而不考虑与预览容器大小相关的任何扭曲，因为它以前是与表面纹理视图。因此，如果预览大小或纵横比不同于您的屏幕（或您的预览的父组件），它将不匹配父尺寸，但将被缩放到看起来“正确”和预览大小范围内。
在普通的“曲面”或“纹理”视图内通道化摄影机预览将没有此限制，但如果容器与预览的尺寸或纵横比不匹配，则会发生扭曲。
这不是解决方案，但在您的情况下没有简单的解决方案-您必须考虑上面的信息来调整您的代码。

编辑

还有一个方法，但它很复杂，我不会给予你一个实现-只是一个通用的方法。你可以做的是，你可以得到你的预览的长宽比和大小，并通过负填充或自定义视图容器剪切它，其中有一些相关的逻辑。这不是一个简单的方法，也不是很难-它只是很复杂，似乎非常多余。
例如，如果您的预览长宽比（h/w）= 1.20和屏幕宽高比（高/宽）= 1.40，你的预览会在顶部和底部有间隙，如果居中的话。现在你的目标是使预览的纵横比为1.40，而不扭曲渲染在上面的图像-你将不得不从左和右剪切预览，这样它就不会在顶部和底部有间隙。2反之亦然，如果你的预览长宽比比大于屏幕的长宽比
差不多吧。

赞(0）回复(0）举报 2022-11-13

a11xaf1n2#

帕夫洛的回答帮了我的忙，但如果有人对确切的答案感兴趣，我会告诉你
我从本机端删除了style prop并更改了manuallyLayoutChildren方法，如下所示

private fun manuallyLayoutChildren(view: ViewGroup) {
        for (i in 0 until view.childCount) {
            val child = view.getChildAt(i)
            child.measure(
                View.MeasureSpec.makeMeasureSpec(view.measuredWidth, View.MeasureSpec.EXACTLY),
                View.MeasureSpec.makeMeasureSpec(view.measuredHeight, View.MeasureSpec.EXACTLY))
            child.layout(0, 0, child.measuredWidth, child.measuredHeight)
        }

    }

赞(0）回复(0）举报 2022-11-13

我来回答

android-fragments 原生子系检视未占据FrameLayout的完整高度和长度

2条答案

相关问题

热门标签

最新问答