嵌套视图会降低图像质量

Question

当艺术部门的人员注意到图像质量下降时,我在最近的一个项目中遇到了这个问题.我不确定是什么导致它,但是我们能够通过删除它嵌套的ScrollView来解决问题.但这不是一个可行的解决方案,因为我们需要在嵌套在scrollviews中的视图中嵌套图像.

我的代码看起来像:

<View>
    <ScrollView>
         <View>
              <ImageView image="someImage.png" />
         </View>
    </ScrollView>
</View>

当我们从嵌套的ScrollView和它的直接父视图中删除ImageView时它渲染得很好.我用一个简单的项目创建了一个repo来说明这一点.暗淡效果最明显的是字母的颜色,文本上的白色阴影和灰色边框的模糊.

https://bitbucket.org/bwellons/blurry-images

这是一个需要报告的错误,还是某个地方的文档说"不要这样做",我不知道？

关心布兰特

Answer 1

我认为这是由于没有以一致的方式定义视图的边界（宽度、高度）和锚点（顶部、左侧、右侧、底部）引起的，例如，如果我只是更改此：

".parent": {
    width: '100%',
    height : 59,
}

对此：

".parent": {
    top : 0,
    width: '100%',
    height : 59
}

模糊消失了。我认为发生这种情况是因为您在紧密绑定的框中混合了相对和绝对视图布局技术（百分比和绝对像素）（.parent 视图与子图像视图的高度完全相同），这导致下面的布局计算当他们在父视图中绘制图像时稍微做一些修改。

我这样说是因为这也可以通过为转换错误留出更多空间来显着消除模糊：

".parent": {
    width: '100%',
    height : 62 // Added 3 pixels of padding
}

以下是一些其他也有效的方法，可以对宽度和高度使用相同的布局机制，或者为转换提供更多空间：

".parent": {
    width: '100%',
    height : '50%' // Dont do this, but shows the point
}

".parent": {
    bottom : 0,
    width: Ti.UI.FILL, // I use Ti.UI.FILL instead of 100% generally
    height : 59
}

因此，一般来说，不要在嵌套视图链尺寸中混合百分比和绝对值，除非您愿意在父级中提供一些回旋空间，或者定义锚点（上、左、右、下）以使绘图转换顺利进行。

免责声明：我的这一说法仅基于大约 15-20 种不同的有限布局测试和我自己的经验（我还没有通过本机代码），所以这绝不是科学。