Titanium appcelerator android和ios平台高度(以像素为单位)和dp

时间:2016-06-01 12:23:31

标签: appcelerator appcelerator-mobile appcelerator-titanium appcelerator-alloy

我即将使用appcelerator钛框架测试应用程序,我必须将视图置于屏幕中心:

我的index.xml:

<Alloy>
<!-- Anddroid Window -->
<Window id="index" platform="android">
    <Require type="view" id="firstscreen" src="firstscreen"/>
</Window>

<!-- iOS Window -->
<NavigationWindow id="nav" platform="ios">
    <Window id="win1" backgroundColor="white">
        <Require type="view" id="firstscreen" src="firstscreen"/>
    </Window>
</NavigationWindow>

第一次屏幕xml:

&#13;
&#13;
<Alloy>
	<ScrollView scrollingEnabled="false" contentWidth="Ti.UI.FILL">
		<ImageView class="fullBgImage" image="/images/login/bg2.png" />
		<View layout="vertical">
			<View id="loginView" class="heightAuto" layout="vertical">
				<ImageView id="localImage" image="/images/logo.png"  />
				<Label class="logoLabel" text="Karma" />
				<Label class="logoSlogan" text="Faits confiance à votre Karma pour booster votre carrière" />
				<View class="btn btnVert"  onClick="openCandidat"><Label class="btnLabel" text="Je recherche un job" /></View>
				<View class="btn btnBlanc" ><Label class="btnLabel bleu" text="Je suis recruteur" /></View>
			</View>
		</View>
	</ScrollView>
</Alloy>
&#13;
&#13;
&#13;

index.js:     要实现的公式是:viewTopPosition =(platformheight - viewheight)/ 2

&#13;
&#13;
if (OS_ANDROID) {
	$.index.addEventListener('open', after_win_load);
	$.index.open();
} else {
	$.nav.addEventListener('open', after_win_load);
	$.nav.open();
}

function after_win_load() {
	// Platform height
	var platformHeight = Ti.Platform.displayCaps.platformHeight;
	// The view
	var firstscreen = $.firstscreen;
	/* Taille du logo */
	firstscreenViewHeight = firstscreen.loginView.size;
	/* Centrer la vue verticalement */
	firstScreenTop = platformHeight - firstscreenViewHeight.height;
	//firstscreen.top = firstScreenTop;
	
	var style = $.createStyle({
		classes : 'firstScreenTop',
		apiName : 'View',
		top : firstScreenTop / 2
	});

	firstscreen.loginView.applyProperties(style);
}
&#13;
&#13;
&#13;

在iO上它看起来很棒,视图是垂直居中的,但在android中:Ti.Platform.displayCaps.platformHeight是一个太大的像素值= 1920

在我已指定的tiapp.xml文件中:

&#13;
&#13;
<property name="ti.ui.defaultunit" type="string">dp</property>
&#13;
&#13;
&#13;

我知道android是像素单位但iOs使用dp单位,所以我该如何实现这一点呢?有人有想法吗? 现在为android我替换了

&#13;
&#13;
var platformHeight = Ti.Platform.displayCaps.platformHeight;
&#13;
&#13;
&#13;

&#13;
&#13;
var platformHeight = Ti.Platform.displayCaps.dpi;
&#13;
&#13;
&#13;

但我问自己是否对所有Android屏幕分辨率都有好处?如果这是最佳做法?

感谢您的帮助。

1 个答案:

答案 0 :(得分:5)

 var densityFactor = OS_IOS ? 1 : Ti.Platform.displayCaps.logicalDensityFactor;

 var platformHeight = Ti.Platform.displayCaps.platformHeight / densityFactor;

或者您可以直接将top设置为50%

var style = $.createStyle({
    classes : 'firstScreenTop',
    apiName : 'View',
    top : "50%"
});