Question

我目前有一个可滚动的视图来滚动浏览一些图像。在Android上它很好，但在iOS上的高度似乎有点大，因为我在可滚动视图下有一些文本并且它在iOS上被推下了一点，而在Android上文本正好在它应该的位置

index.js：

var win = $.index;

if(Alloy.Globals.osname == "android"){
    win.backgroundColor = "#000";
}
//If iOS
else{
    win.backgroundColor = "#FFF";
}

 win.orientationModes = [
     Ti.UI.PORTRAIT,
     Ti.UI.UPSIDE_PORTRAIT
 ];


function textColor(){
    if(Alloy.Globals.osname == "android"){
        return "#FFF";
    }
    else{
        return "#000";
    }
}

var button = Titanium.UI.createButton({
   title: 'Test Button',
   bottom: 30,
   width: "75%",
   height: "auto",
   visible: false
});

var page_view = Titanium.UI.createView({
    top: 10,
    width: Ti.UI.SIZE,
    height: "85%",
    layout: "vertical",
    visible: false
});

var page_descr = Titanium.UI.createLabel({
    text: "This is a description",
    width: "75%",
    font: { fontSize: 36 },
    color: textColor(),
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});

var page_image1 = Titanium.UI.createImageView({
    image: "/images/screens_android/adsteps_1.jpg",
});

var page_image2 = Titanium.UI.createImageView({
    image: "/images/screens_android/adsteps_2.jpg",
});

var page_image3 = Titanium.UI.createImageView({
    image: "/images/screens_android/adsteps_3.jpg",
});

var page_image4 = Titanium.UI.createImageView({
    image: "/images/screens_android/adsteps_4.jpg",
});

//Change the images to the iOS images
if(Alloy.Globals.osname != "android"){
    page_image1.image = "/images/screens_ios/ios_1.jpg";
    page_image2.image = "/images/screens_ios/ios_2.jpg";
    page_image3.image = "/images/screens_ios/ios_3.jpg";
    page_image4.image = "/images/screens_ios/ios_4.jpg";
}

var image_scroller = Titanium.UI.createScrollableView({
    width: "100%",
    height: "auto",
    showPagingControl: false,
    backgroundColor: "white",
    views: [page_image1, page_image2, page_image3, page_image4],
});

image_scroller.addEventListener('scrollend',function(e)
{
    label_step.text = steps(image_scroller.currentPage+1);
});


//Create a view to hold the scrollable view
var view_holder = Ti.UI.createScrollView({
    width: "75%",
    height: "60%",
    top: 5,
});

view_holder.add(image_scroller);

var label_step = Titanium.UI.createLabel({
    text: "Test text",
    top: 5,
    width: "70%",
    font: {fontSize: 21 },
    color: textColor(),
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,

});

var label_slide = Titanium.UI.createLabel({
    text: "(Swipe to view next step)",
    font: {fontSize: 19 },
    top: 5,
    color: textColor(),
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
    width: "70%",
});

page_view.add(page_descr);
page_view.add(label_step);

page_view.add(view_holder);
page_view.add(label_slide);

//Fix fonts
if(Alloy.Globals.osname != "android"){
    page_descr.width = "80%";
    page_descr.top = 30;
    page_descr.font = {fontSize: 19};
    label_step.width = "90%";
    label_step.font = {fontSize: 15};
    label_slide.top = 2;
    label_slide.font = {fontSize: 14};
    image_scroller.top = -120;
}
else{
    page_descr.width = "80%";
    page_descr.top = 30;
    page_descr.font = {fontSize: 15};
    label_step.width = "90%";
    label_step.font = {fontSize: 11};
    label_slide.top = 5;
    label_slide.font = {fontSize: 12};
    image_scroller.top = -120;
}

win.add(page_view);

button.addEventListener('click',function(e)
{
    alert("I clicked the button!");
});

win.add(button);
win.open();

Android图片尺寸均为：768x735px，而iOS图片为475x475px。这是iOS上发生的事情的屏幕截图，当它应该直接位于iOS主屏幕的图像下方时，它将文本“（滑动以查看下一步）”向下推： http://i.imgur.com/GfDpeDb.jpg

Answer 1

尝试将label_slide的顶部注释为

var label_slide = Titanium.UI.createLabel（{ 文字：＆＃34;（滑动以查看下一步）＆＃34;， font：{ fontSize：19 }， //前5， color：textColor（）， textAlign：Ti.UI.TEXT_ALIGNMENT_CENTER，宽度：＆＃34; 70％＆＃34;， }）; 告诉我它是否有效。

Answer 2

最好和最简单的方法是使用DP值而不是百分比。如果您尚未设置或修改tiapp.xml，但您的iOS设备使用DP并且Android使用像素。这就是你看到布局不同的原因。

Dp：与密度无关的像素。使用基于平台特定的＆＃34;默认值＆＃34;的比例因子本地转换为对应像素度量的度量。密度和设备的物理密度。

在tiapp.xml中，将默认单位更改为dp。

<property name="ti.ui.defaultunit" type="string">dp</property>

如果您随后重新编译应用程序，清理并构建它将被设置为使用DP值。尝试使用这些而不是百分比。

这方面的细节可以在这里看到 -

http://docs.appcelerator.com/titanium/3.0/#!/guide/Layouts,_Positioning,_and_the_View_Hierarchy

iOS上的Titanium ScrollableView高度更大

2 个答案: