钛处理不同的分辨率答案

【问题标题】：Titanium handling different resoutions钛处理不同的分辨率
【发布时间】：2011-11-11 16:50:31
【问题描述】：

简单的问题，确保应用程序在不同的屏幕分辨率下运行而不会看起来很糟糕的最佳方法是什么？我不能使用静态值，然后它想根据分辨率进行调整。现在我正在使用相对测量值（屏幕百分比），但想知道这是否真的是处理它的最佳方法！？

【问题讨论】：

3.5 年过去了，这个问题的答案还是一样吗？钛现在是 3.5.0GA，合金也是 1.x。

【解决方案1】：

好吧，据我谷歌搜索，解决方案是：

1.检测具体屏幕分辨率：

// app/alloy.js
Alloy.Globals.isIos7Plus = (OS_IOS && parseInt(Ti.Platform.version.split(".")[0]) >= 7);
Alloy.Globals.iPhoneTall = (OS_IOS && Ti.Platform.osname == "iphone" && Ti.Platform.displayCaps.platformHeight == 568);

2.编写查询样式tss：

// Query styles
"#info[if=Alloy.Globals.isIos7Plus]" : {
    font : { textStyle : Ti.UI.TEXT_STYLE_FOOTNOTE }
},
"#title[if=Alloy.Globals.isIos7Plus]" : {
    top: '25dp', // compensate for the status bar on iOS 7
    font : { textStyle : Ti.UI.TEXT_STYLE_HEADLINE }
},
"#content[if=Alloy.Globals.isIos7Plus]" : {
    font : { textStyle : Ti.UI.TEXT_STYLE_CAPTION1 }
},
"ScrollView[if=Alloy.Globals.iPhoneTall]" : {
    height : '500dp'
}

参考：http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-Platform-SpecificStyles

【讨论】：

【解决方案2】：

我们成功使用的另一个/附加选项是一小组函数，它们使用屏幕密度值来计算显示尺寸......这当然只是一个近似值，因为只有四种密度，但我们有发现这很有帮助。

//=============================================================================
// inch
//
// compute approximate number of pixels for the specified physical on-screen
// size based on the density reported by the OS
//=============================================================================
function inch(size)
{
    // default to 160 dpi if unavailable
    var height = size * 160.0; 

    try
    { 
        // compute header height based on screen density ... target .25" height
        height = size * Ti.Platform.displayCaps.dpi; 
    }
    catch(e) { warn("Error accessing display caps for screen density calculation: " + e); }

    return height;
}

因此，如果您希望某些东西在屏幕上高 3/4 英寸......

Ti.UI.createThing({ height: inch(.75)});

...或者如果您想按点大小缩放事物，可以制作一些常量...

const g_12pt = inch(12/72); //0.166667
const g_10pt = inch(10/72); //0.138889
const g_8pt = inch(8/72);   //0.111111
const g_6pt = inch(6/72);   //0.083333
...
...font:{fontSize: g_10pt, fontWeight:"bold"},...

我们还创建了几个函数来获取屏幕高度和宽度，因此，如果我们想要在平板电脑或其他小型设备上获得更好的布局，我们可以更好地了解我们正在处理的内容。

//=============================================================================
// screenWidth - return screen width in inches
//=============================================================================
function screenWidth()
{
    return Titanium.Platform.displayCaps.platformWidth / Titanium.Platform.displayCaps.dpi;
}

//=============================================================================
// screenHeight - return screen height in inches
//=============================================================================
function screenHeight()
{
    return Titanium.Platform.displayCaps.platformHeight / Titanium.Platform.displayCaps.dpi;
}

你可以从那里继续……但这确实帮助我们确定了我们如何在不同的密度和平台上布置屏幕。 inch 函数有异常处理只是因为我们在应用程序早期使用它，有时 Ti.Platform 仍然未定义。在我们布置报告时，Ti.Platform 可用，因此屏幕功能没有异常处理。如果您需要提前查询，您可能还需要在这些中进行异常处理。

希望这会有所帮助！

【讨论】：

【解决方案3】：

您需要修改您的 tiapp.xml - 在 android 部分中添加一个清单记录，如下所示：

<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <supports-screens android:anyDensity="false"/>
    </manifest>
</android>

这将使应用程序默认使用与旧版钛合金相同的样式，它基本上会根据使用的设备对其进行缩放。可以在此处找到有关更改的更多详细信息：http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html

【讨论】：

没问题 - Appcelerator 在这类事情上提供的信息量非常少！