使 UI 适应各种 iPhone 屏幕尺寸的正确方法

Question

在钛经典中，我这样做是为了使 UI 适应各种 iPhone 屏幕尺寸。

return parseInt((Ti.Platform.displayCaps.platformWidth * val) / 320);

从对象在宽度为 320 磅的设备中的基本尺寸开始调整对象的尺寸。

测试代码

var win = Ti.UI.createWindow();

var testView1 = Ti.UI.createView({
    width : Ti.UI.FILL,
    height : Ti.UI.SIZE,
    top : 0,
    backgroundColor : "#2196F3",
    layout : "vertical"
});

var testView2 = Ti.UI.createView({
    width : Ti.UI.FILL,
    height : Ti.UI.SIZE,
    bottom: getSize(20),
    layout : "horizontal"
});

testView2.add(

    Ti.UI.createView({
        width : getSize(50),
        height : getSize(50),
        left : getSize(20),
        borderRadius : getSize(25),
        backgroundColor : "white"
    }),
    Ti.UI.createLabel({
        width : getSize(200),
        height : Ti.UI.SIZE,
        left : getSize(20),
        text : "Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.",
        color : "white",
        font : {
            fontSize : getSize(14)
        }
    })

);

testView1.add(

    Ti.UI.createLabel({
        width : Ti.UI.FILL,
        height : getSize(50),
        top : getSize(20),
        text : "Lorem ipsum",
        color : "white",
        font : {
            fontSize : getSize(14),
            fontWeight : "bold"
        },
        textAlign : "center",
    }),

    testView2

);

win.add(testView1);
win.open();

function getSize(val){
    return parseInt((Ti.Platform.displayCaps.platformWidth * val) / 320);
}

没有 getSize() 函数的结果

getSize() 函数的结果

这是一个好方法吗？

Answer 1

有一件事我不确定您是使用 "dp" 作为尺寸系统的标准单位还是 "pixels(px)"，但从您的第一个屏幕截图来看，您似乎没有使用 "dp" 尺寸系统，因为 "dp" 系统在不经过此 size() 的情况下为您提供相同的结果方法

不过，在考虑创建 UI 选择之前，这里需要考虑的事项很少。

第 1 点：

如果您的应用 UI 没有太多内容可在可见屏幕上显示，则选择显示足够大的元素而不进入滚动模式。

---

第 2 点：

如果您的应用的 UI 有大量内容要显示，如列表视图、表格视图或滚动视图中的其他视图，那么您应该更喜欢创建稍小的元素以滚动方式显示更多内容。

---

最佳解决方案：

坚持 Titanium 本身所做的，默认选择 "dp" 系统，这与您使用 size() 方法所做的完全相同。

这里是了解更多关于“dp”系统的链接Titanium DIP Unit System