Emulate The Native Android Preferences Grid (Tweaked to feel even more native!)

android_prefs

// the following code is both the logic and examples of using it

var win = Titanium.UI.currentWindow;

// I've set anyDensity to true in my app and this function enables the UI to properly scale
// you can safely delete this function and all references to it if you'd like
var adj = function(pixels) {
	if(Titanium.Platform.name == 'iPhone OS') {
		return pixels;
	} else {
		var ratio = Ti.Platform.displayCaps.platformWidth / 320;
		return pixels * ratio;
	}
};

// all the magic happens here
function addPreference(options) {
	var hasCheckbox = options.checked != undefined;
	var disabled = !options.onclick && !options.items && !hasCheckbox;
	var hasDescription = options.description || options.items;

	if(options.items && options.selectedItem) {
		options.selectedIndex = options.items.indexOf(options.selectedItem);
	}

	var row = Ti.UI.createTableViewRow({height:'auto', hasChild: !!options.items});

	if(options.header) {
		row.header = options.header;
	}

	var label1 = Titanium.UI.createLabel({
		text: options.title,
		color: disabled ? '#bdbebd' : '#fff',
		font:{fontSize:adj(20)},
		left: adj(5)
	});
	if(hasDescription) {
		label1.top = adj(8);
	}
	row.add(label1);

	var lblDesc;
	function updateDescriptionLabel() {
		if(options.items) {
			lblDesc.text = options.items[options.selectedIndex];

			if(options.prefix) {
				lblDesc.text = options.prefix + lblDesc.text;
			}
		} else {
			lblDesc.text = options.description;
		}
	};

	if(hasDescription) {
		lblDesc = Titanium.UI.createLabel({
			color: '#bdbebd',
			font:{fontSize:adj(14)},
			left: adj(5),
			top: adj(35),
			bottom: adj(8)
		});

		updateDescriptionLabel();

		row.add(lblDesc);
	}

	if(hasCheckbox) {
		var sw = Ti.UI.createSwitch({
			right: adj(0),
			value: options.checked,
			style: Titanium.UI.Android.SWITCH_STYLE_CHECKBOX
		});
		label1.addEventListener('click', function() {
			if(sw.value == true){
				// Checkbox is set to true, set it to false
				sw.value = false;
			} else {
				// Checkbox is set to false, set it to true
				sw.value = true;
			}
			options.onchange(sw.value);
		});
		lblDesc.addEventListener('click', function() {
			if(sw.value == true){
				// Checkbox is set to true, set it to false
				sw.value = false;
			} else {
				// Checkbox is set to false, set it to true
				sw.value = true;
			}
			options.onchange(sw.value);
		});
		sw.addEventListener('click', function() {
			options.onchange(sw.value);
		});
		row.add(sw);
	}

	if(options.items) {
		row.addEventListener('click', function() {
			var items = options.items;

			if(options.prefix) {
				items = [];
				for(var i=0; i<options.items.length; i++) {
					items.push(options.prefix + options.items[i]);
				}
			}

			var dialog = Titanium.UI.createOptionDialog({
				options: items,
				selectedIndex: options.selectedIndex,
				title: options.title
			});
			dialog.addEventListener('click', function(e) {
				if(e.index >= 0) {
					options.selectedIndex = e.index;
					updateDescriptionLabel();
					options.onselect(options.items[e.index]);
				}
			});
			dialog.show();
		});
	} else if(options.onclick) {
		row.addEventListener('click', options.onclick);
	}

	options.table.appendRow(row);
}


var tableView = Ti.UI.createTableView({
    backgroundColor: 'black',
	minRowHeight: adj(65)
});
win.add(tableView);

addPreference({
	table: tableView,
	title: 'Select Something',
	items: ['Item 1', 'Item 2', 'Item 3'],
	prefix: 'Select ',
	selectedItem: 'Item 2',
	onselect: function(newValue) {
		Ti.API.info(newValue + ' was selected');
	}
});

addPreference({
	table: tableView,
	title: 'Open Something',
	description: 'This is a fancy description',
	onclick: function() {
		// TODO: open a new window or something, maybe to more preferences
	}
});

addPreference({
	table: tableView,
	title: 'Check something',
	description: 'Click the checkbox!',
	checked: true,
	onchange: function(newValue) {
		var alertDialog = Titanium.UI.createAlertDialog({
			title: 'Checkbox clicked',
			message: 'New value: ' + newValue,
			buttonNames: ['OK']
		});
		alertDialog.show();
	}
});


addPreference({
	table: tableView,
	header: 'Info',
	title: 'About',
	description: 'Acknowledgements, etc.',
	onclick: function() {
		// TODO: open a new window
	}
});

addPreference({
	table: tableView,
	title: 'Build',
	description: 'Version ' + Ti.App.version
});