var tabGroup = Titanium.UI.createTabGroup({ backgroundColor:'blue', tabsBackgroundColor:'white', }); var win1 = Titanium.UI.createWindow({ title:'Tab 2', backgroundColor:'#E6E0F8', navBarHidden: true, tabBarHidden: true, orientationModes: [ Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, ] }); var bb1 = Titanium.UI.iOS.createTabbedBar({ labels:['One', 'Two', 'Three'], backgroundColor:'#336699', top:1, style:Titanium.UI.iPhone.SystemButtonStyle.BAR, height:25, width:200, zIndex:300, }); //win1.add(bb1) var wiew=Ti.UI.createView({ width:Ti.UI.FILL, height:72, bottom:155, backgroundColor:'white', }); var heart = Ti.UI.createImageView({ image:'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678087-heart-48.png', top:10, width:20, height:20, right:50, }); var heart1= Ti.UI.createImageView({ image:'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678087-heart-48.png', top:10, width:20, height:20, right:30, }); var heart2= Ti.UI.createImageView({ image:'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678087-heart-48.png', top:10, width:20, height:20, right:10, }); var heart3= Ti.UI.createImageView({ image:'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678087-heart-48.png', top:10, width:20, height:20, right:70, }); var heart4= Ti.UI.createImageView({ image:'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678087-heart-48.png', top:10, width:20, height:20, right:90, }); var view1 = Ti.UI.createView({ backgroundColor:'#123' }); var view2 = Ti.UI.createView({ backgroundColor:'#246' }); var view3 = Ti.UI.createView({ backgroundColor:'#48b' }); var tableData = [ {title: 'Menu1'}, {title: 'Menu2'}, {title: 'Menu3'}, {title: 'Menu4'} ]; var table1 = Ti.UI.createTableView({ data: tableData }); view1.add(table1); var scrollableView = Ti.UI.createScrollableView({ views:[view1,view2,view3], showPagingControl:false, currentPage:1, top:0, }); win1.add(scrollableView); wiew.add(heart); wiew.add(heart1); wiew.add(heart2); wiew.add(heart3); wiew.add(heart4); var label2 = Ti.UI.createLabel({ color:'red', text: 'Mini Cooper', font:{ fontSize:22, }, textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT, top: 0, width: 300, height: 40 }); var label3= Ti.UI.createLabel({ color:'red', text: 'Mini Cooper Detail', font:{ fontSize:14, }, textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT, top: 30, width: 300, height: 40 }); wiew.add(label3) wiew.add(label2); view2.add(wiew); var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1 }); var image = Ti.UI.createImageView({ image:'http://resimage.net/image/mini-cooper-resimleri/mini-cooper-.jpg', top:20, width:310, left:5, borderColor:'red', borderWidth:4, borderRadius:5, zIndex:100, }); image.addEventListener('swipe', function(e) { if (e.direction == 'left'){ alert('left'); } if (e.direction == 'right'){ alert('right'); } }); view2.add(image); var likeView=Ti.UI.createView({ bottom:10, width:80, height:80, left:10, backgroundColor:'white', borderRadius:40, }); var unlikeView=Ti.UI.createView({ bottom:10, width:80, height:80, right:10, backgroundColor:'white', borderRadius:40, }); unlikeView.addEventListener('click',function(){ tabGroup.setActiveTab(tab2).open(); }); var likebutton= Ti.UI.createImageView({ image:'https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/like-128.png', width:60, backgroundColor:'white', }); view2.add(likeView); view2.add(unlikeView); var unlikebutton= Ti.UI.createImageView({ image:'https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/like-128.png', width:60, backgroundColor:'white', }); unlikeView.add(unlikebutton); var basketAdd= Ti.UI.createImageView({ image:'https://cdn4.iconfinder.com/data/icons/keynote-and-powerpoint-icons/256/Plus-128.png', bottom:10, width:50, backgroundColor:'white', borderRadius:25, left:135, }); view2.add(basketAdd); likeView.add(likebutton); // generate random number, used to make each row appear distinct for this example function randomInt(max){ return Math.floor(Math.random() * max) + 1; } var IMG_BASE = 'https://github.com/appcelerator/titanium_mobile/raw/master/demos/KitchenSink/Resources/images/'; var defaultFontSize = Ti.Platform.name === 'android' ? 16 : 14; var tableData = []; for (var i=1; i<=20; i++){ var row = Ti.UI.createTableViewRow({ className:'forumEvent', // used to improve table performance selectedBackgroundColor:'white', rowIndex:i, // custom property, useful for determining the row during events height:110 }); var imageAvatar = Ti.UI.createImageView({ image: IMG_BASE + 'custom_tableview/user.png', left:10, top:5, width:50, height:50 }); row.add(imageAvatar); var labelUserName = Ti.UI.createLabel({ color:'#576996', font:{fontFamily:'Arial', fontSize:defaultFontSize+6, fontWeight:'bold'}, text:'Fred Smith ' + i, left:70, top: 6, width:200, height: 30 }); row.add(labelUserName); var labelDetails = Ti.UI.createLabel({ color:'#222', font:{fontFamily:'Arial', fontSize:defaultFontSize+2, fontWeight:'normal'}, text:'Replied to post with id ' + randomInt(1000) + '.', left:70, top:44, width:360 }); row.add(labelDetails); var imageCalendar = Ti.UI.createImageView({ image:IMG_BASE + 'custom_tableview/eventsButton.png', left:70, bottom: 2, width:32, height: 32 }); row.add(imageCalendar); var labelDate = Ti.UI.createLabel({ color:'#999', font:{fontFamily:'Arial', fontSize:defaultFontSize, fontWeight:'normal'}, text:'on ' + randomInt(30) + ' Nov 2012', left:105, bottom:10, width:200, height:20 }); row.add(labelDate); tableData.push(row); } var tableView = Ti.UI.createTableView({ backgroundColor:'white', data:tableData }); view3.add(tableView); var win2 = Titanium.UI.createWindow({ title:'Tab 2', backgroundColor:'white', navBarHidden: true, }); var tab2 = Titanium.UI.createTab({ icon:'KS_nav_ui.png', title:'Tab 2', window:win2 }); tabGroup.addTab(tab1); tabGroup.addTab(tab2); tabGroup.open();