iOS 上的 Titanium ScrollableView 高度更大

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({ 文本：“（滑动以查看下一步）”，字体：{ 字体大小：19 }, //前5，颜色：文本颜色（），文本对齐：Ti.UI.TEXT_ALIGNMENT_CENTER，宽度：“70%”， }); 并告诉我它是否有效。

Answer 2

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

Dp：与密度无关的像素。使用基于特定于平台的 "default" 密度和设备的物理密度的比例因子本机转换为相应像素测量的测量值。

在您的 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 高度更大

Titanium ScrollableView height is bigger on iOS

iphone

image

titanium

ios

titanium-mobile