titanium tinder like

titaniumtinder.js

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