检查元素是否适合屏幕

时间:2013-11-21 15:54:54

标签: android ios titanium

我已经为我的应用添加了一个视图,其定义如下:

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

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

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)上获得一致的结果。或者还有其他方法可以解决我的问题吗?

2 个答案:

答案 0 :(得分:1)

如果您尝试支持所有尺码,为什么不将高度设定为%值?

在回答您的问题时,您需要考虑的主要事项是Ti.Platform.displayCaps.platformHeight在特定于平台的单元中返回值 ; Android上的像素和iOS上与密度无关的像素(下降)。由于您使用与密度无关的像素设置视图高度,因此您希望将这些平台单元转换为与密度无关且与平台无关的单元。

我通常只使用Titanium和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,,这意味着布局边界已经以系统单位计算,现在可以访问:< / p>

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

答案 1 :(得分:1)

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

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

到tiapp.xml并将大小提供为普通数字:

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