检查元素是否适合屏幕答案

【问题标题】：Check if element fits on the screen检查元素是否适合屏幕
【发布时间】：2013-11-21 15:54:53
【问题描述】：

我在我的应用中添加了一个视图，定义如下：

Ti.UI.createView({
    top: 0,
    left: 0,
    width: '50%'
    height: '460dp',
    backgroundColor: 'red'
});

我想知道的是上面的视图是否适合屏幕。 IE。用户的屏幕是否足够高以完全显示我的整个视图。我尝试了以下方式：

function getPixels(dp) {
    return (dp + (Ti.Platform.displayCaps.dpi / 160));
}

alert(460); // 920
alert(Ti.Platform.displayCaps.platformHeight); // 1136

这在 iphone 模拟器上似乎是正确的。但是，在我的 android 设备上运行完全相同的代码时，我得到了结果：

屏幕高度：1200
视图高度：690

这似乎不正确，因为带有红色背景的视图在 iphone 模拟器上占用的空间几乎与在我的 android 设备上一样多。

有什么方法可以在所有设备（ios 和 android）上获得一致的结果。或者有其他方法可以解决我的问题吗？

【问题讨论】：

标签： android ios titanium

【解决方案1】：

如果您尝试支持所有尺寸，为什么不将您的高度也设置为 % 值？

在回答您的问题时，您需要考虑的主要问题是Ti.Platform.displayCaps.platformHeight 返回值以特定于平台的单位；所以 Android 上的像素和 iOS 上与密度无关的像素 (dip)。由于您使用与密度无关的像素设置视图高度，因此您希望将这些平台单位转换为与密度无关和平台无关的单位。

我通常只使用 Titanium and Alloy 的 measurement library provided。

var measurement = require('alloy/measurement');
var dpHeight = measurement.pxToDP(Ti.Platform.displayCaps.platformHeight);
if(460 < dpHeight) {
    alert('Fits');
} else {
    alert("does not fit');
}

但实际上我发现只使用带有百分比值的相对布局要容易得多。

确定视图是否在边界内（事后）的另一种方法是在触发此事件时添加postlayout event listener,，这意味着布局边界已以系统单位计算并且现在可以访问：

view.addEventListener('postlayout', function(e) {
    if(view.rect.height + view.rect.y > Ti.Platform.displayCaps.platformHeight) {
        alert('Does not fit")
    }
});

【讨论】：

【解决方案2】：

要获得平台之间宽度和高度属性的恒定结果，您必须添加

<property name="ti.ui.defaultunit" type="string">dip</property>

到 tiapp.xml 并以纯数字形式提供大小：

Ti.UI.createView({
    top: 0,
    left: 0,
    width: 50,
    height: 460,
});

【讨论】：