Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

Changing UI while orientation

$
0
0

while loading first, my window has two main view/row. each main view/row has 3 child view. while orientation from portrait to landscape, i want my window only have one row/view that means all previous 6 child view will be in one row/view and if again orient my device/simulator in portrait mode then i want that 6 child view will be again in two rows/views. Below is my code - In app.js

var homeWindow = Titanium.UI.createWindow({
    layout : 'vertical',
    backgroundColor : 'green',
    statusBarStyle : Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK
 
});
 
var navWin = Ti.UI.iOS.createNavigationWindow({
    //modal: true,
    window : homeWindow
});
 
var view1 = Titanium.UI.createView({
    backgroundColor : 'red',
    width : 90,
    height : 50
 
});
 
var view2 = Titanium.UI.createView({
    backgroundColor : 'blue',
    width : 90,
    height : 50
 
});
 
var view3 = Titanium.UI.createView({
    backgroundColor : 'red',
    width : 90,
    height : 50
 
});
 
var view4 = Titanium.UI.createView({
    backgroundColor : 'blue',
    width : 90,
    height : 50
 
});
 
var view5 = Titanium.UI.createView({
    backgroundColor : 'red',
    width : 90,
    height : 50
 
});
 
var view6 = Titanium.UI.createView({
    backgroundColor : 'blue',
    width : 90,
    height : 50
 
});
 
var portraitView1 = Titanium.UI.createView({
    layout : 'horizontal',
    height : Ti.UI.SIZE,
    width : Ti.UI.SIZE
});
 
var portraitView2 = Titanium.UI.createView({
    layout : 'horizontal',
    height : Ti.UI.SIZE,
    width : Ti.UI.SIZE
});
 
var landscapeView = Titanium.UI.createView({
    layout : 'horizontal',
    height : Ti.UI.SIZE,
    width : Ti.UI.SIZE
});
 
portraitView1.add(view1);
portraitView1.add(view2);
portraitView1.add(view3);
portraitView2.add(view4);
portraitView2.add(view5);
portraitView2.add(view6);
 
// add views when window loads firstly in normal/portrait mode
homeWindow.add(portraitView1);
homeWindow.add(portraitView2);
 
homeWindow.orientationModes = [Titanium.UI.PORTRAIT, Titanium.UI.UPSIDE_PORTRAIT, Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT];
 
Ti.Gesture.addEventListener('orientationchange', function(e) {
 
    // changing UI while device changes in landscape mode
    if (e.orientation == Titanium.UI.LANDSCAPE_LEFT || e.orientation == Titanium.UI.LANDSCAPE_RIGHT) {
        homeWindow.remove(portraitView1);
        homeWindow.remove(portraitView2);
        //portraitView1 = null;
        //portraitView2 = null;
        landscapeView.add(view1);
        landscapeView.add(view2);
        landscapeView.add(view3);
        landscapeView.add(view4);
        landscapeView.add(view5);
        landscapeView.add(view6);
        homeWindow.add(landscapeView);
 
    } else {
        // changing UI while device changes in portrait mode
        homeWindow.remove(landscapeView);
        //landscapeView = null;
        portraitView1.add(view1);
        portraitView1.add(view2);
        portraitView1.add(view3);
        portraitView2.add(view4);
        portraitView2.add(view5);
        portraitView2.add(view6);
 
        homeWindow.add(portraitView1);
        homeWindow.add(portraitView2);
    }
});
 
navWin.open();
Here everything is okay but while orientation occur, i think my views goes to down in the window for not deleting previous resources. i tried everything like resource = null but that does not work. how many times i orient simulator, my views goes to down and eventually disappear. how can i solve this ? please help me out.

Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>