I have an ios app developed with titanium appcelerator. In the app I have some tablevies where I add some rows and some sections to create that sticky effect. But for some reason the sections have a top margin. Is there a way to remove that margin? The margin was not defined by me.
This is my TableView:
var mainView = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: "100%",
backgroundSelectedColor: 'transparent',
backgroundSelectedColor: 'transparent',
selectedColor: 'transparent',
bottom: 0,
});
And the I add some TableViewSections to it:
tableData.push(Ti.UI.createTableViewSection({
headerView: require("addStickyHeader").addStickyHeader(letra.toUpperCase()),
}));
The addStickyHeader function:
exports.addStickyHeader = function(text) {
var viewHeader = Ti.UI.createView({
height : Ti.App.screenSize[0] * 0.08,
width : "100%",
backgroundColor : require("colors").fundo(),
top : -100
});
viewHeader.add(Ti.UI.createLabel({
text : text.toUpperCase(),
color : require("colors").branco(),
width : "84.6%",
font : {
fontSize : Ti.App.screenSize[0] * 0.019,
fontFamily : require("fonts").semiBold()
},
}));
return viewHeader;
};
That white parte should not be there.
Related
I have added some images in two different views & placed them inside a ScrollableView. On click of images, EventListener is not getting executed. This code works perfectly for Android(appcelerator) but for IOS it's not working.
Scroll & other Events are working fine. The problem seems with items placed in ScrollableView.
var dataView = Ti.UI.createView({
layout : 'horizontal',
top : '0'
});
var textHolderView = Ti.UI.createView({
layout : 'vertical',
width : '50%'
});
var iconView = Ti.UI.createView({
layout : 'horizontal',
width : '24.5%'
});
var header = Ti.UI.createLabel({
text : "Some Text",
font : {
fontSize : '12dp',
fontFamily : 'OpenSans-Semibold',
fontWeight : 'normal'
},
height : '38dp',
left : '15%',
color : '#000',
width : '85%',
touchEnabled : false
});
var image1 = Ti.UI.createImageView({
image : "/images/individual.png",
height : '18dp',
left : '5dp',
width : '13%',
top : '25%'
});
var slideOptionsView = Ti.UI.createView({
backgroundColor : "#1268b3",
layout : "horizontal"
});
var img_activity = Ti.UI.createImageView({
image : "/images/activity_temp.png",
height : "30dp",
width : "70dp",
left : "10%",
top : "15dp",
touchEnabled : true
});
textHolderView.add(header);
iconView.add(image1);
dataView.add(textHolderView);
dataView.add(iconView);
slideOptionsView.add(img_activity);
var scroll = Ti.UI.createScrollableView({
views : [dataView, slideOptionsView],
showPagingControl : false,
});
// Event Listeners on click for above images
img_activity.addEventListener('click', function(e) {
alert("img_activity");
});
image1.addEventListener('click', function(e) {
alert("image1");
});
$.someView.add(scroll);
$.index.open();
Thanks.
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:
http://i.imgur.com/GfDpeDb.jpg
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.
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
I have a problem with getting labels within a TableView to display correctly, and I hope someone can help.
Here is a screenshot of the problem:
The labels with the (...) behind them are cut off.
This problem does not occur when I set a fixed height to my rows, but since the text is of varying lengths, that's not a good solution for me.
I've tried the answers in this question, but to no avail.
Here is my code to generate the table:
var aSection = Ti.UI.createTableViewSection({
rows: [],
headerView: header
});
for (var p = 0; p < answers.length; p++){
var currentAnswer = answers[p];
var arow = Ti.UI.createTableViewRow({
selectedBackgroundColor:'#f5f5f5',
answID: currentAnswer['aId'],
map: currentAnswer['aMap'],
isSelected: false,
height: 'auto',
rightImage: '/images/icons/radio-unselected.png'
});
var atext = Ti.UI.createLabel({
font:{fontSize:gui.defaultFontSize+2, fontFamily: gui.defaultFont},
color: '#333',
text: currentAnswer['aText'],
left:10, top: 10, bottom: 10, right: 10,
width:'auto',
height: 'auto',
borderWidth: 0,
borderColor: "#000",
});
arow.add(atext);
aSection.add(arow);
}
var sections = [];
sections[0] = aSection;
var answView = Ti.UI.createTableView({
backgroundColor:'white',
data: sections,
bottom: 1,
minRowHeight: 40,
});
I'm really at a loss with this. Any pointers are appreciated.
If your text is too long then it overlaps the right side button but still you want to show full text then you should either set left & right or set width to Ti.UI.SIZE so If you want to overlaps right button then you should use Ti.UI.SIZE or not then you can set left & right
so in short, set width to Ti.UI.SIZE or set left and right property.
Use Ti.UI.SIZE for both height and width instead of auto, auto has been deprecated a long time ago. Something like this would help you
var aSection = Ti.UI.createTableViewSection({
rows: [],
headerView: header
});
for (var p = 0; p < answers.length; p++){
var currentAnswer = answers[p];
var arow = Ti.UI.createTableViewRow({
selectedBackgroundColor:'#f5f5f5',
answID: currentAnswer['aId'],
map: currentAnswer['aMap'],
isSelected: false,
height:Ti.UI.SIZE,
rightImage: '/images/icons/radio-unselected.png'
});
var atext = Ti.UI.createLabel({
font:{fontSize:gui.defaultFontSize+2, fontFamily: gui.defaultFont},
color: '#333',
text: currentAnswer['aText'],
left:10, right: 10,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
borderWidth: 0,
borderColor: "#000",
});
arow.add(atext);
aSection.add(arow);
}
var sections = [];
sections[0] = aSection;
var answView = Ti.UI.createTableView({
backgroundColor:'white',
data: sections,
bottom: 1,
minRowHeight: 40,
});
Try using: minimumFontSize:'18sp'
Or some size that suits your display needs. This will shrink the font down to the minimum size to fit everything.
I have 4 objects in a view with a horizontal layout in this order:
label
slider
label
button
labels and button are set to Ti.UI.SIZE and slider is set to Ti.UI.FILL
I am basically making my own video controls so
currentTimeLabel, slider, totalTimeLabel, playPauseButton
My issue is when I set the slider to FILL it fills the parent (which it should do I suppose) and pushes the 2nd label and button to a new line.
I need all 4 items on the same line. I've tried turning horizontalWrap to false on the parent view, but that just makes it so I cannot see the remaining two items.
The reason I am not using static widths is I need this slider to adjust its width based off the phone being in portrait and landscape modes.
If I use SIZE instead of fill, the slider basically has 0 width.
My simplified code is below:
var win = Ti.UI.currentWindow;
var transportBg = Ti.UI.createView({
bottom:0,
height:50,
width:'100%',
backgroundColor:'#50000000'
});
win.add(transportBg);
var transportControls = Ti.UI.createView({
layout:'horizontal',
width:'100%'
});
transportBg.add(transportControls);
var currentTimeText = Ti.UI.createLabel({
left:25,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: '0:00',
color:'#fff',
font: {
fontSize: 10
},
shadowColor: '#000',
shadowOffset: {x:0, y:1}
});
var transport = Titanium.UI.createSlider({
min:0,
max:100,
value:0,
width:Ti.UI.FILL,
backgroundColor:'red'
});
var totalTimeText = Ti.UI.createLabel({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: '0:00',
textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
color:'#fff',
font: {
fontSize: 10
},
shadowColor: '#000',
shadowOffset: {x:0, y:1}
});
var playPauseBtn = Ti.UI.createButton({
backgroundImage:'/images/pause.png',
width:Ti.UI.SIZE,
height:Ti.UI.SIZE
});
transportControls.add(currentTimeText);
transportControls.add(transport);
transportControls.add(totalTimeText);
transportControls.add(playPauseBtn);
And a screen shot of the current layout
In your case horizontal layout isn't very helpful and best effects can be achieved with absolute layout and setting left, right properties. The only problem which you have is that you have to make sure how much space you have to leave on both sides of slider.
Here are changes to your code which I've made:
var transportControls = Ti.UI.createView();
Removed width and layout property
var transport = Titanium.UI.createSlider({
left: 50,
right: 70,
…
});
Removed width property and set left/right property.
var totalTimeText = Ti.UI.createLabel({
right: 40,
…
});
var playPauseBtn = Ti.UI.createButton({
right: 0,
…
});
Add right property.
I have a view with a layout of vertical
var tray = Ti.UI.createView({
width:deviceWidth * 0.9,
height:'100%',
top:0,
left:0,
backgroundColor:'transparent',
layout:'vertical'
});
win.add(tray);
Inside tray I have a TableView and a Toolbar
var slideList = Ti.UI.createTableView({
width:deviceWidth * 0.9,
height:xxx, //--> Need to know what to do here
top:0,
left:0,
search:searchList,
filterAttribute:'searchFilter',
backgroundColor:(Ti.Platform.osname == 'android') ? '#000000' : '#ffffff'
});
tray.add(slideList);
var iOSControls = Ti.UI.iOS.createToolbar({
items:[flexSpace,backBtn,flexSpace,playBtn,flexSpace,linkBtn,flexSpace],
bottom:0,
borderTop:false,
borderBottom:true,
barColor:'#000'
});
tray.add(iOSControls);
I am not entirely sure how to size the TableViews height property so that it fills the height of tray minus the height of iOSControls. Any ideas would be appreciated..thanks
I think In iOS Device have Toolbar default Height is equal to "44px".
But, In Your case you try this code, just copy past this code in you app.
var tray = Ti.UI.createView({
width:deviceWidth * 0.9,
height:'100%',
top:0,
left:0,
backgroundColor:'transparent',
layout:'horizontal'
});
win.add(tray);
var iOSControls = Ti.UI.iOS.createToolbar({
items:[flexSpace,backBtn,flexSpace,playBtn,flexSpace,linkBtn,flexSpace],
bottom:0,
borderTop:false,
borderBottom:true,
barColor:'#000'
});
tray.add(iOSControls);
var slideList = Ti.UI.createTableView({
width:deviceWidth * 0.9,
height:Ti.UI.FILL, //--> Need to know what to do here
top:0,
left:0,
search:searchList,
filterAttribute:'searchFilter',
backgroundColor:(Ti.Platform.osname == 'android') ? '#000000' : '#ffffff'
});
tray.add(slideList);