当前位置：文江博客话题详情

titanium android-layout resolution

钛处理不同的分辨率

发布于 2024-12-03 15:31:24 字数 110 浏览 1 评论 0 原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

金兰素衣 2024-12-10 15:31:24

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

//=============================================================================
// 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 已经可用，因此屏幕功能没有异常处理。如果您需要提前查询，您可能还需要在其中进行异常处理。

希望这有帮助！

Another/additional option we have been successful with is a small set of functions which use the screen density value to compute display sizes... this is of course only an approximation, as there are only the four densities, but we have found this to be very helpful.

//=============================================================================
// 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;
}

So if you want something to be 3/4 inch high on the screen....

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

...or if you want to scale things by point size, one could make some constants...

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"},...

We also created a couple of functions to get the screen height and width, so if we wanted a better layout on a tablet or something tiny we could better understand what we were dealing with.

//=============================================================================
// 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;
}

You can go on and on from there... but this really helped us nail down how we laid out our screens on the different densities and platforms. The inch function has exception handling only because we use it early in the app, and sometimes the Ti.Platform is still undefined. By the time we are laying out our reports Ti.Platform is available and so the screen functions do not have the exception handling. If you need to query earlier you may need exception handling in those as well.

Hope this helps!

回复收藏 0 原文

遥远的她 2024-12-10 15:31:24

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

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

这将使应用程序默认为旧版本的 titan 使用的相同样式，它基本上根据设备进行缩放在使用中。有关更改的更多详细信息，请访问：http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html

You'll want to modify your tiapp.xml - in the android section you add a manifest record like so:

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

That will make the app default to the same style that the older versions of titanium used, where it basically scales them according to the device in use. More details on the change can be found here: http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html

回复收藏 0 原文

半世晨晓 2024-12-10 15:31:24

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

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

well, as far as I googled, the solution is :

1.detect the specific screen resolution:

// 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.write query style 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'
}

refer to: http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-Platform-SpecificStyles

回复收藏 0 原文

~没有更多了~