How do I dock a footer menu to the bottom of the screen on Android and iPhone in Appcelerator Titanium? I want to display 3 icons on the bottom of the screen.
I used Titanium.UI.View and set bottom: 0 to get it to dock to the bottom.
Yes, we use Ti.UI.Toolbar for this. Let see this example code:
var space = Titanium.UI.createButton({
systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var buttonNextEnd = Titanium.UI.createButton({
title: '>>'
});
var buttonNext1Page = Titanium.UI.createButton({
title: '>'
});
var buttonPrevEnd = Titanium.UI.createButton({
title: '<<'
});
var buttonPrev1Page = Titanium.UI.createButton({
title: '<'
});
var toolbarNav = Titanium.UI.createToolbar({
left : 0,
bottom: 0,
height : 40,
width : 320,
items: [buttonPrevEnd,space, buttonPrev1Page,space, buttonNext1Page, space,buttonNextEnd]
});
win.add(toolbarNav);
Use Titanium.UI.ToolBar for that.
If you are using Appcelerator Alloy Framework
The code in the XML view
<Alloy>
<Window title="My Nice Title">
... ... ...
... ... ...
<View class="footer-menu"></View>
</Window>
</Alloy>
The code in TSS
".footer-menu": {
backgroundColor: 'red',
width: '100%',
height: 40,
bottom: 0
}
This will push the view to bottom. Here is a screenshot.
Not using Alloy? It is similar in JS too.
// create window
var win = Ti.UI.createWindow({
// if anything
});
// create view
var footer_menu = Ti.UI.createView({
backgroundColor: 'red',
width: '100%',
height: 40,
bottom: 0
});
// add view to window
win.add(footer_menu);
Hope this is helpful. Thanks!
var footer = Ti.UI.createView({
height:25
});
var footerButton = Ti.UI.createLabel({
title:'Add Row',
color:'#191',
left:125,
width:'auto',
height:'auto'
});
footer.add(footerButton);
it works on android, but i still dont know why the button cant appear on iphone
Remember that Toolbars aren't compatible for Android or Tablet.
If you want to set buttons to the bottom of the screen, create a View, set it at the bottom and then distribute the buttons with relative position, considering the screen width.
Here's an example:
function FirstWindow() {
var self = Ti.UI.createWindow({
background : "black",
height : "auto",
width : "auto",
layout : "vertical"
});
teste = Ti.UI.createView({
left : 0,
bottom : 0,
opacity : .7,
backgroundColor : "#3d3d3d",
height : 55
});
var button1 = Ti.UI.createButton({
title : "button 1",
left : 0,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
var button2 = Ti.UI.createButton({
title : "button 2",
left : Titanium.Platform.displayCaps.platformWidth * 0.33,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
var button3 = Ti.UI.createButton({
title : "button 3",
left : Titanium.Platform.displayCaps.platformWidth * 0.66,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
view.add(button1);
view.add(button2);
view.add(button3);
self.add(view);
return self;
}
module.exports = FirstWindow;
Doing this... you are positioning the buttons in the View.
The first button ( button1 ) begins in "left: 0" and has a width of 30% of the View.
The second button ( button2 ) begins after the first button plus a space, and so on...
And the height of them is the same as the view's.
Related
I generate a tableView in a loop, and i put a label in each row, which has different length of text each time. I set the rows' height like this:
height : Ti.UI.SIZE,
and it works pretty good, the rows' heights are always big enough to display the full text. But when i swipe up and down, the rows' heights changes for no reason: they become very big or very small, and i have no idea why. I'll paste in the code snippet that causes the problem. It only works bad on Android, it works perfectly on mobileweb.
var i = 0;
var tableList = Ti.UI.createTableView({
separatorColor : '#fef3ff',
top:'88',
});
var tableCategoryData = [];
while(i<answer.QuestionList.length)
{
var label = Ti.UI.createLabel({
text:answer.QuestionList[i].CategoryTitle,
color : '#000000',
font:{
color:'#000000',
fontSize:'20sp',
},
textAlign:Ti.UI.TEXT_ALIGNMENT_LEFT,
left : 13,
top:'10dp',
});
var rowouter = Ti.UI.createView({
bottom:'10dp',
touchEnabled: true,
height:Ti.UI.SIZE,
backgroundColor:'#fef3ff',
});//Andris
var row = Ti.UI.createTableViewRow({
className: 'row',
objName: 'row',
touchEnabled: true,
height:rowouter.height,
color: "#000000",
font : {
color : '#000000'
},
backgroundColor:'#fef3ff',
});
rowouter.add(label);
row.add(rowouter);
tableCategoryData.push(row);
++i;
}
tableList.setData(tableCategoryData);
I am designing a view using Titanium Appcelerator for Android/ios.I need to design a time picker (horizontal). I have designed the view that is horizontal and entered values in it.
But Dont know how to pick values that are perfectly under the arrow. And how the last number will come to center(under the arrow).
Please guide..
CODE:
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'});
var scrollAlbums = Ti.UI.createScrollView({
bottom: 10,
contentHeight: Ti.UI.SIZE,
contentWidth: Ti.UI.SIZE,
height: 95,
layout: 'horizontal',
showHorizontalScrollIndicator: false,
showVerticalScrollIndicator: true,
scrollType: 'horizontal',
horizontalWrap: false,
width: Ti.UI.FILL
});
var data=[];
var circle=[];
for(var i=0;i<20;i++){
circle[i] = Titanium.UI.createLabel({
text:i,
height:50,
width:50,
borderRadius:25,
backgroundColor:'#336699'});
scrollAlbums.add(circle[i]);
}
win1.add(scrollAlbums);
I modified your code to log the middle number when scrolling ends:
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'});
var scrollAlbums = Ti.UI.createScrollView({
bottom: 10,
contentHeight: Ti.UI.SIZE,
contentWidth: Ti.UI.SIZE,
height: 95,
layout: 'horizontal',
showHorizontalScrollIndicator: false,
showVerticalScrollIndicator: true,
scrollType: 'horizontal',
horizontalWrap: false,
width: Ti.UI.FILL
});
var circleWidth = 50;
function pick(e) {
if (e.type === 'dragend' && e.decelerate) {
return;
}
console.info('Number: ' + Math.round((e.source.contentOffset.x + (e.source.size.width / 2)) / circleWidth));
}
scrollAlbums.addEventListener('scrollend', pick);
scrollAlbums.addEventListener('dragend', pick);
var data=[];
var circle=[];
for(var i=0;i<20;i++){
circle[i] = Titanium.UI.createLabel({
text:i,
height:circleWidth,
width:circleWidth,
borderRadius:circleWidth/2,
backgroundColor:'#336699'});
scrollAlbums.add(circle[i]);
}
win1.add(scrollAlbums);
win1.open();
You need to listen to both scrollend and dragend because scrollend will only fire if dragend was decelerating. Then with the offset of the scrollView plus half of its total width and the width of the circles you can calculate the middle number.
But like Robin says, you better use ScrollableView and play with hitRect and clipViews to show not just the selected page (number) but also a few right and left of it.
Im having trouble just playing a simple sound as the function is undefined. The sound files are in the right spot so I dont know what's going wrong. I am a beginner with this so help is much appreciated.
//Level 1 Page
var win = Titanium.UI.currentWindow;
var tab = Titanium.UI.currentTab;
var leveloneview = Ti.UI.createView({
width : '100%',
height : '100%',
backgroundColor : 'blue',
});
var tile1 = Ti.UI.createImageView({
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var tile2 = Ti.UI.createImageView({
left : '50',
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var tile3 = Ti.UI.createImageView({
right : '50',
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var sound = Titanium.Media.createSound({
url : 'sounds/wheres_me_rum.mp3',
preload : true
});
var button = Ti.UI.createButton({
title : 'Click to play sound',
width : '200',
height : '40',
top : 20,
align:'center',
});
button.addEventListener('click', function(e) {
sound.play();
});
leveloneview.add(tile1);
leveloneview.add(tile2);
leveloneview.add(tile3);
leveloneview.add(button);
win.add(leveloneview);
Uncaught TypeError: undefined is not a function at /index.html (line 6080)
Ti.Media.Sound is not supported on mobile web. See http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Media.Sound for supported platforms.
I am new to the scene and wonder how i am to go about this.
I have a switch that should add +1 or a "point" to a label when the switch is true.
and When it is false it should withdraw that same "point".
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var view = Ti.UI.createView();
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var basicSwitch = Ti.UI.createSwitch({
title: "+1"
});
basicSwitch.addEventListener('click',function(e){
});
var label1=Ti.UI.createLabel({
text: ""
});
view.add(basicSwitch);
win.add(view);
win.open();
My code so far,not much i know.
Here you go first of all their are following errors in your code
1)Making window 2 times
2)Creating a label but not adding to parent container
3)Switch has change event listener instead of click one
4)You can set the switch title
and Here goes the correct code
var win = Ti.UI.createWindow({
backgroundColor : 'white'
});
var view = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL
});
var basicSwitch = Ti.UI.createSwitch({
top : 30,
value : false,
});
basicSwitch.addEventListener('change', function(e) {
if (e.value = true) {
label1.text = 1;
} else {
}
});
var label1 = Ti.UI.createLabel({
text : ""
});
view.add(label1);
view.add(basicSwitch);
win.add(view);
win.open();
Thanks
Please give me idea how to create a registration form in titanium and pass fill up the registration data from that form to another form .
Following is a sample code for registration. I have created an additional file 'success.js' in the resource folder, shows the second window. Please try the following code
Write these line in the app.js file
var win1 = Ti.UI.createWindow({
width : 'auto',
height: 'auto',
backgroundColor : '#FFFFFF'
});
var txtName = Ti.UI.createTextField({
top : '25%',
width : '75%',
height: '35',
hintText : 'Name'
});
win1.add(txtName);
var txtAddress = Ti.UI.createTextField({
top : '35%',
width : '75%',
height: '40',
hintText : 'Address'
});
win1.add(txtAddress);
var btnRegister = Ti.UI.createButton({
top : '55%',
width : '50%',
height : '35',
title : 'Register'
});
win1.add(btnRegister);
win1.open();
btnRegister.addEventListener('click', function(){
var win2 = Ti.UI.createWindow({
width : 'auto',
height: 'auto',
backgroundColor : '#FFFFFF',
url : 'success.js'
});
win2.name = txtName.value;
win2.address = txtAddress.value;
win2.open();
});
// Write the following lines in the success.js file
var win2 = Ti.UI.currentWindow;
var name = win2.name;
var address = win2.address;
var lblName = Ti.UI.createLabel({
top : '30%',
width : '75%',
height : 'auto',
color : 'yellow',
backgroundColor : 'blue',
text : name,
textAlign : 'center'
});
var lblAddress = Ti.UI.createLabel({
top : '40%',
width : '75%',
height : 'auto',
color : 'yellow',
backgroundColor : 'blue',
text : address,
textAlign : 'center'
});
win2.add(lblName);
win2.add(lblAddress);
now complile the code and run. It worked with me. Try it