I've been struggling on how to handle memory allocations on my Titanium app (built for android [9.4MB], ios[2.8MB] and MobileWeb[5.4MB].
I have created a widget which will be use to open views from a menu selection.
<Alloy>
<Window id="mainWindow">
<View id="menuView">
<View id="vTop">
<!-- Header goes here -->
<TableView id="menuTable" />
</View>
<!-- footer message goes here -->
</View>
<View id="contentView">
<View id="nav">
<Label id="winTitle"/>
<View id='leftButtonView'>
<Label id="icoLeftButton" />
</View>
<View id='backButtonTitleView'>
<Label id="icoBack" />
<Label id="backButtonTitle" />
</View>
<View id='rightButtonView'>
<Label id="icoRightButton" />
</View>
</View>
<View id="mainView" layout="composite" />
</View>
</Window>
</Alloy>
Sample usage of this widget:
I was able to reduce the memory allocations of views by following this solution. I've applied this every time I open another view from menu selection.
(controller of my widget)
var memPool = Ti.UI.createWindow();
memPool.open();
memPool.hide();
memPool.close();
// Open view from menu selection
function openView(e) {
var cbAdd = function() {
var ctrl = Alloy.createController(e["url"]);
if (ctrl != null) {
setWindowTitle(e["wTitle"]);
setRightIco(ctrl.getRightIco()); //setting right label icon (IcoMoon font)
$.setRightNavClick(ctrl.getRightNavCb());
//Have to passed navGroup to be able to open other views
ctrl.winMain.navGroup = $;
//Close splash screen after layout
ctrl.winMain.addEventListener("postlayout", postLayout);
$.mainView.add(ctrl.winMain);
ctrl.init();
ctrl = null;
}
};
var cbRemove = function() {
//Remove all children from mainView; fn [commonjs]
fn.removeChildren($.mainView, cbAdd);
};
if ($.mainView.children.length > 0) {
cleanUp($.mainView.children[0]);
cbRemove();
} else
cbAdd();
}
function cleanUp(obj, cb) {
memPool.open();
memPool.hide();
memPool.setZIndex(-1);
memPool.add(obj);
memPool.close();
obj = null;
if (cb != null) cb();
}
Checking the result on XCode Instruments:
TiUIView
is always reduced everytime I open other views from menu but TiUIViewProxy
doesn't.
Sample View to be open: (consist of widgets)
<Alloy>
<View id="winMain">
<ScrollView id="form" layout="vertical">
<Widget id="fperiod" src="ph.com.test.controls.period" top="10" />
<Widget id="ftermid" src="ph.com.test.controls.key" label="Terminal No." top="20" />
<Widget id="fofficeid" src="ph.com.test.controls.combobox" label="Branch" />
<View id="btnReset" width="100%" height="50" layout="horizontal" top="20" bottom="20" backgroundColor="#B40026">
<Label class="resetFilter" />
<Label class="lblReset" />
</View>
</ScrollView>
</View>
</Alloy>
The following are the references that help alot:
- http://developer.appcelerator.com/question/116867/this-is-a-solution-to-your-memory-woes#answer-203729
- http://www.tidev.io/2014/03/27/memory-management/
- http://developer.appcelerator.com/question/152656/tips-and-tricks-for-memory-management
- http://developer.appcelerator.com/question/140852/quick-memory-question--tiuiview-vs-tiuiviewproxy
- http://developer.appcelerator.com/question/151989/should-i-null-objects-to-release-memory-in-alloy
How to reduce the memory allocations of TiUIViewProxy
? Do I have to also cleanup the views of widgets from its controller?
I have tried to cleanup the views of my widgets from its controller. Then, the TiUIViewProxy
is somewhat reduced as per checking it on XCode Instruments but my problem is that my app suddenly crashes. I don't know why. Or I'm not just doing it right. Sample clean up function from my widget:
$.cview.remove($.formItemLabel);
$.cview.remove($.lblValue);
$.mView.remove($.cview);
//nulling controller variables goes here
mData = null;
animateLeft = null;
...