Skip to content

Instantly share code, notes, and snippets.

@IGx89
Created April 15, 2011 16:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save IGx89/921941 to your computer and use it in GitHub Desktop.
Save IGx89/921941 to your computer and use it in GitHub Desktop.
Emulates the standard Android preferences grid
// 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 disabled = !options.onclick && !options.items;
var hasDescription = options.description || options.items;
var hasCheckbox = options.checked != undefined;
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(22)},
left: adj(10)
});
if(hasDescription) {
label1.top = adj(5);
}
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(10),
top: adj(35),
bottom: adj(10)
});
updateDescriptionLabel();
row.add(lblDesc);
}
if(hasCheckbox) {
var sw = Ti.UI.createSwitch({
right: adj(10),
value: options.checked
});
sw.addEventListener('change', function(e) {
options.onchange(e.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
});
@Matt2012
Copy link

Having problems with this line items: {'Item 1, 'Item 2', 'Item 3'}, and not the obvious typo.
Replaced with ['Item 1', 'Item 2', 'Item 3'] which works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment