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);
Related
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.
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.
In Appcelerator Titanium (iOS project) I have a TextField with height:50. The TextField contains much more text but the fact that its height is set to 50 lets me use the TextField as a preview of the remaining text: under the TextField I have a button and when I tap this button I want to show the entire text, so I would like to animate the TextField from its current height to Ti.UI.SIZE. Is this possible? How? I noticed some iOS properties (eg. anchorPoint) but I could not understand if they can be useful in my case.
You need to use TextArea instead of TextField if you want multiple lines and word wrapping.
I've added the TextArea to a View so I can animate it to both expand and shrink it.
You can try something like this..
// Create the text area for multiple lines and word wrapping.
var messageField = Ti.UI.createTextArea({
backgroundColor: 'transparent',
color: 'black',
height: Ti.UI.SIZE, // Set here the height to SIZE and the view's height to the required one, ex. 50
textAlign: 'left',
value: 'This text should be displayed in more than one line in a text area, but that behavior is not supported by a text field, again, This text should be displayed in more than one line in a text area, but that behavior is not supported by a text field.',
verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
width: '90%',
font: { fontSize: 20 }
});
// Add the text area to a view to be able to animate it
var view = Titanium.UI.createView({
height: 50, // Required height
top: 250,
width: '90%',
borderColor: 'black',
borderRadius: 10,
borderWidth: 2,
});
view.add(messageField);
// Create animation object
var animation = Titanium.UI.createAnimation();
animation.duration = 1000; // Set the time of animation, 1000 --> 1 second
var button = Ti.UI.createButton({
title: "Show More",
font: { fontSize: 18 },
width: 100,
top: 200
});
var isExpanded = false;
button.addEventListener('click', function() { // Event listener for your button
if(isExpanded) {
isExpanded = false;
animation.height = 50; // Set the animation height to 50 to shrink the view
view.animate(animation); // Start animating the view to the required height
button.title = "Show More";
} else {
isExpanded = true;
animation.height = Ti.UI.SIZE; // Set the animation height to SIZE to make it expand
view.animate(animation); // Start animating the view to the required height
button.title = "Show Less";
}
});
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
win.add(button);
win.add(view);
win.open();
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.