【问题标题】:Titanium appcelerator android and ios platform height in pixels and dpTitanium appcelerator android 和 ios 平台高度(以像素和 dp 为单位)
【发布时间】:2016-06-01 12:23:30
【问题描述】:

我即将使用 appcelerator Titan 框架测试一个应用程序,我必须在屏幕上居中显示一个视图:

我的 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:

<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>

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

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);
}

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

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

&lt;property name="ti.ui.defaultunit" type="string"&gt;dp&lt;/property&gt;

我知道 android 是像素单位,但 iOs 使用 dp 单位,那么我该如何实现呢?有人有想法吗? 现在对于 android 我替换了

var platformHeight = Ti.Platform.displayCaps.platformHeight;

var platformHeight = Ti.Platform.displayCaps.dpi;

但我问自己这是否适用于所有 android 屏幕分辨率?如果这是最佳做法?

感谢您的帮助。

【问题讨论】:

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


    【解决方案1】:
     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%"
    });
    

    【讨论】:

    • 您好,感谢您的回复,直接将顶部设置为 50% 不会使视图居中,而是将其从屏幕顶部推到 50%,或者我错了吗?
    • 1) Ti.Platform.displayCaps.logicalDensityFactor 可用于 iOS 以及最近的 SDK。 2)确实这会将其推低50%。 3)(默认)复合/绝对布局中的默认设置是让孩子居中。
    • 太棒了。非常感谢。
    猜你喜欢
    • 2011-07-12
    • 2011-12-05
    • 2014-12-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-14
    • 1970-01-01
    • 2014-09-18
    相关资源
    最近更新 更多