티타늄 iOS에서 ScrollableView 높이가 더 큽니다.

Question

현재 일부 이미지를 스크롤 할 수있는 스크롤 가능한보기가 있습니다. Android의 경우 괜찮습니다.하지만 iOS에서는 스크롤 할 수있는보기 아래에 텍스트가 있고 iOS에서 약간 아래로 밀렸으므로 높이가 약간 더 커 보이지만 안드로이드에서는 텍스트가 있어야 할 위치 바로 아래에 있습니다

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

안드로이드 이미지 크기는 모두 : 768x735px 아이폰 OS 이미지 475x475px 동안. 의 상단을 주석 후 http://i.imgur.com/GfDpeDb.jpg

Answer 1

이렇게하는 가장 좋은 방법은 백분율 대신 DP 값을 사용하는 것입니다. 설정하지 않았거나 tiapp.xml을 수정하지 않은 경우 iOS 기기는 DP를 사용하고 Android는 픽셀을 사용합니다. 이것이 레이아웃의 차이를 보는 이유입니다.

Dp : 농도 독립적 픽셀. 플랫폼 고유의 "기본"밀도 및 장치의 물리적 밀도를 기반으로 한 배율 인수를 사용하여 해당 픽셀 측정 값으로 기본적으로 변환되는 측정 값입니다.

tiapp.xml에서 기본 단위를 dp로 변경하십시오.

다음 응용 프로그램을 다시 컴파일하면 정리하고 빌드하면 DP 값을 사용하도록 설정됩니다. 백분율 대신에 이것을 사용해보십시오. 이에

자세한 내용은 여기 볼 수 없습니다 -

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

Answer 2

시도 : 그것은 아이폰 OS 홈 화면의 이미지 바로 아래에해야 할 때 여기 아래 "(다음 단계를 볼 수 문지)"iOS에서 무슨 일이 일어나고 있는지, 그것은 텍스트를 미는의 스크린 샷입니다 같은 label_slide

VAR의 label_slide Titanium.UI.createLabel = ({ 텍스트 { fontSize는 :, 폰트 "(와이프)는 다음 단계를 보려면"19 } // 을 상부 : 5 컬러 : textColor(), textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER, wi dth : "70 %", }); 그리고 그것이 작동하는지 아닌지를 말해주십시오.