CODEWITHSUNDEEP
iosiphoneimagetitaniumtitanium-mobile
Redna
Redna

Reputation: 63

Titanium ScrollableView height is bigger on iOS

I currently have a scrollable view to scroll through some images. On Android it's fine, but on iOS the height seems to be a bit bigger as I have some text under the scrollable view and its being pushed down a bit on iOS, while on Android the text is right under where it should be

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

The android image sizes are all: 768x735px while the iOS images are 475x475px. Here's a screenshot of what's happening on iOS, it's pushing the text "(Swipe to view next step)" down when it should be directly below the image of the iOS home screen: https://i.sstatic.net/P1rx4.jpg

Upvotes: 0

Views: 193

Answers (2)

Michael
Michael

Reputation: 276

The best and easiest way to do this is to use DP values instead of percentages. If you haven't set it up or modified your tiapp.xml yet your iOS devices use DP and Android uses pixels. This is why you are seeing a difference in the layout.

Dp : Density-independent pixels. A measurement which is translated natively to a corresponding pixel measure using a scale factor based on a platform-specific "default" density, and the device's physical density.

In your tiapp.xml change the default unit to dp.

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

If you then recompile the app, clean and build it will be set up to use DP values. Try using these instead of percentages.

Details on this can be seen here -

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

Upvotes: 0

Muhammad Sabir
Muhammad Sabir

Reputation: 305

try after commenting the top of label_slide like,

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%", }); And tell me either it works or not.

Upvotes: 3

Related Questions