[TIMOB-13392] Android: Implement Scrollable Tabs

   <Alloy>
   	<TabGroup onOpen="tgOpen" onClose="tgClose" onFocus="tgFocus" onBlur="tgBlur" onClick="tgClick">
   		<Tab id="tab1" title="Tab 1" icon="KS_nav_ui.png" onSelected="onSelected" onUnselected="onUnselected"
   			onFocus="tabFocus" onBlur="tabBlur" onClick="tabClick">
   			<Window id="win1" title="Tab 1" onFocus="winFocus" onBlur="winBlur" onClick="winClick" 
   				onOpen="winOpen" onClose="winClose">
   				<Label top="10">Pay attention on the console to the window, tab, and tab group events. You can compare the focus, blur, open, close, and click events to the same events in 3.3.0 prior to this PR. These events are the same, so this PR does not break existing logic. The tab selected/unselected are new events that are required since focus/blur did not indicate this in Android prior.</Label>
   			</Window>
   		</Tab>
   		<Tab title="Tab 2" icon="KS_nav_views.png">
   			<Window title="Tab 2">
   				<Button id="swipeable" top="50dp" width="90%" height="50dp" title="Toggle swipeable" onClick="toggleSwipeable"
   					backgroundColor="blue"/>
   				<Button top="120dp" width="90%" height="50dp" title="Toggle disableTabNavigation" onClick="disableTabs"
   					backgroundColor="blue"/>
   			</Window>
   		</Tab>
   		<Tab title="Tab 3" icon="KS_nav_views.png">
   			<Window title="Tab 3">
   				<Label top="10" height="Ti.UI.SIZE">Focus the text field, then select a different tab. The keyboard should disappear.</Label>
   				<TextField top="200dp" width="90%" height="Ti.UI.SIZE" value="focus me" backgroundColor="black" color="white"/>
   			</Window>
   		</Tab>		
   	</TabGroup>
   </Alloy>
   

   function tgOpen() {
   	Ti.API.info('TabGroup opened');
   	Ti.API.info('Swipeable: ' + $.index.swipeable);
   }
   
   function tgClose() {
   	Ti.API.info('TabGroup closed');
   }
   
   function tgFocus() {
   	Ti.API.info('TabGroup focused');
   }
   
   function tgBlur() {
   	Ti.API.info('TabGroup blurred');
   }
   
   function tgClick() {
   	Ti.API.info('TabGroup clicked');
   }
   
   function onSelected() {
   	Ti.API.info('Tab selected');
   }
   
   function onUnselected() {
   	Ti.API.info('Tab unselected');
   }
   
   function tabFocus(){
   	Ti.API.info('Tab focused');
   }
   
   function tabBlur() {
   	Ti.API.info('Tab blurred');
   }
   
   function tabClick() {
   	Ti.API.info('Tab clicked');
   }
   
   function winFocus() {
   	Ti.API.info('Window focused');
   }
   
   function winBlur() {
   	Ti.API.info('Window blurred');
   }
   
   function winClick() {
   	Ti.API.info('Window clicked');
   }
   
   function winOpen() {
   	Ti.API.info('Window opened');
   }
   
   function winClose() {
   	Ti.API.info('Window closed');
   }
   
   function toggleSwipeable(){
   	$.index.swipeable = !$.index.swipeable;	
   }
   
   var tabsDisabled = false;
   function disableTabs() {
   	tabsDisabled = !tabsDisabled;
   	if (tabsDisabled){
   		// Don't mess with swipeable when tabs disabled
   		$.swipeable.visible = false;
   	} else {
   		$.swipeable.visible = true;
   	}
   	$.index.disableTabNavigation(tabsDisabled);
   }
   
   $.index.open();
   

    var MapModule = require('ti.map');
    
    var tabWin1 = Ti.UI.createWindow({title : 'TW1',backgroundColor:'blue'});
    var tabWin2 = Ti.UI.createWindow({title : 'TW2',backgroundColor:'red'});
    var tabWin3 = Ti.UI.createWindow({title : 'TW3',backgroundColor:'green', layout: 'vertical'});
    var tabWin4 = Ti.UI.createWindow({title : 'Map'});
    var tabWin5 = Ti.UI.createWindow({title : 'TW5',backgroundColor:'yellow'});
     
    var label = Ti.UI.createLabel({text: 'Go to tab 3', color: 'white', font:{fontSize:'20dp'}});
    tabWin1.add(label);
     var mapview = MapModule.createView({
     	region: {latitude:33.74511, longitude:-84.38993,
     		latitudeDelta:0.01, longitudeDelta:0.01}
     });
         
    tabWin4.add(mapview);
     
    var tab1 = Ti.UI.createTab({window : tabWin1,title : 'Tab 1'});
    var tab2 = Ti.UI.createTab({window : tabWin2,title : 'Tab 2'});
    var tab3 = Ti.UI.createTab({window : tabWin3,title : 'Tab 3'});
    var tab4 = Ti.UI.createTab({window : tabWin4,title : 'Map'});
    var tab5 = Ti.UI.createTab({window : tabWin5,title : 'Tab 5'});
    
    var tabGroup = Ti.UI.createTabGroup({tabs : [tab1,tab2,tab3, tab4]});
     
    var win2 = Ti.UI.createWindow({title: 'Window 2'});
     
    
    var deleteTabButton = Ti.UI.createButton({top: 30, title: 'Delete Tab2'});
    var addTabButton = Ti.UI.createButton({top: 30, title: 'Add Tab5'});
    var openWindowButton = Ti.UI.createButton({top: 30,title:'Open window2'});
    var disableTabsButton = Ti.UI.createButton({top: 30, title: 'Toggle Disable Tabs'});
    var toggleSwipeableButton = Ti.UI.createButton({top: 30, title: 'Toggle swipeable'});
    var toggleSmoothScrollOnTabClickButton = Ti.UI.createButton({top: 30, title: 'Toggle smoothScrollOnTabClick'});
    
    tabWin3.add(deleteTabButton);
    tabWin3.add(openWindowButton);
    tabWin3.add(addTabButton);
    tabWin3.add(disableTabsButton);
    tabWin3.add(toggleSwipeableButton);
    tabWin3.add(toggleSmoothScrollOnTabClickButton);
    
     
    var closeWindowButton = Ti.UI.createButton({width:Ti.UI.SIZE,height:Ti.UI.SIZE,title:'Close window2'});
    win2.add(closeWindowButton);
     
    openWindowButton.addEventListener('click',function(e){win2.open();});
    deleteTabButton.addEventListener('click', function(e){tabGroup.removeTab(tab2); deleteTabButton.visible = false;});
    addTabButton.addEventListener('click', function(e){tabGroup.addTab(tab5);addTabButton.visible = false;});
    closeWindowButton.addEventListener('click',function(e){win2.close();});
    
    toggleSwipeableButton.addEventListener('click', function() {
        tabGroup.swipeable = !tabGroup.swipeable; 	
    });
    
    toggleSmoothScrollOnTabClickButton.addEventListener('click', function() {
        tabGroup.smoothScrollOnTabClick = !tabGroup.smoothScrollOnTabClick; 	
    });
    
    var tabsDisabled = false;
    disableTabsButton.addEventListener('click', function() {
        tabsDisabled = !tabsDisabled;
        if (tabsDisabled){
            // Don't mess with swipeable when tabs disabled
            toggleSwipeableButton.visible = false;
        } else {
            toggleSwipeableButton.visible = true;
        }
        tabGroup.disableTabNavigation(tabsDisabled);	
    });
    
    tabGroup.open();