Titanium ScrollableView высота больше на iOS

В настоящее время у меня есть прокручиваемый вид для просмотра некоторых изображений. На 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: 768x735 пикселей, в то время как для iOS - 475x475 пикселей. Вот скриншот того, что происходит в iOS, он нажимает текст "(Проведите, чтобы просмотреть следующий шаг)" вниз, когда он должен находиться непосредственно под изображением домашнего экрана iOS: http://i.imgur.com/GfDpeDb.jpg

Источник

2 ответа

Решение

Лучший и самый простой способ сделать это - использовать значения DP вместо процентов. Если вы еще не настроили или не изменили свой tiapp.xml, ваши устройства iOS используют DP, а Android использует пиксели. Вот почему вы видите разницу в макете.

Dp: Плотно-независимые пиксели. Измерение, которое изначально переводится в соответствующую меру пикселей с использованием масштабного коэффициента, основанного на специфической для платформы плотности "по умолчанию" и физической плотности устройства.

В вашем tiapp.xml измените модуль по умолчанию на dp.

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

Если вы затем перекомпилируете приложение, его очистка и сборка будут настроены на использование значений DP. Попробуйте использовать их вместо процентов.

Подробности об этом можно посмотреть здесь -

http://docs.appcelerator.com/titanium/3.0/

Источник

Попробуйте после комментирования верхней части label_slide, как,

var label_slide = Titanium.UI.createLabel ({text: "(Проведите для просмотра следующего шага)", шрифт: { fontSize: 19 }, //top: 5, color: textColor(), textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, ширина: "70%", }); И скажи мне, работает или нет.

Источник
Другие вопросы по тегам