Skip to content

Instantly share code, notes, and snippets.

@stevenmirabito
Forked from vindriaoc/android_prefs
Created July 2, 2011 16:22
Show Gist options
  • Save stevenmirabito/1061070 to your computer and use it in GitHub Desktop.
Save stevenmirabito/1061070 to your computer and use it in GitHub Desktop.
Emulate The Native Android Preferences Grid (Tweaked to feel even more native!)
// 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
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment