State which state you’re in… Titanium iOS US state picker

Last time, I discussed creating an iOS date picker; a code piece that is used quite extensively in app development. I hope it saved you some time.

Today, playing off the “picker” theme, I’ll post the US State picker code. It’s comparable to the date-picker. The difference is that you need to populate the values yourself. So, without further adieu…

First, create your picker_view, picker, and animation variables:

// CREATE STATE PICKER VIEW
var state_picker_view = Titanium.UI.createView({
height:250,
bottom:-250
});
win.add(state_picker_view);

var statePicker = Titanium.UI.createPicker({
selectionIndicator:true
});
state_picker_view.add(statePicker);

//ANIMATION VARIABLES
var slide_in = Titanium.UI.createAnimation({
bottom:50
});

var slide_out = Titanium.UI.createAnimation({
bottom:-250
});

Next, the really tedious part: creating the array. Here’s the code so you don’t have to do it yourself.

//INITIALIZE THE ARRAY

var data = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Virgin Islands', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

I’ll assign the values to the array using a simple for loop:

//ASSIGN VALUES TO PICKER ROWS
for(var i = 0, j = data.length; i < j; i++) {
statePicker.add(Titanium.UI.createPickerRow({
title:data[i]
}));
}

Next, create the field that receives the selected value and add it to the view:

// CREATE STATE TEXT FIELD
var txtState = Titanium.UI.createTextField({
//hintText:’Enter City’,
value:statePicker.value,
height:30,
top:200,
left:125,
width:145,
color:appFontColor,
autocorrect:false,
autocapitalization:Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType:Titanium.UI.RETURNKEY_NEXT,
font:{fontFamily:appFont},
editable:false
});
viewMain.add(txtState);

Although I set the editable property to false, I don’t think it’s working properly. If you have the time, please verify and post your findings here. Also, remember to modify top, left, height, and width properties accordingly.

Next, create the toolbar like we did for the date-picker:

var btnCancelState = Titanium.UI.createButton({
title:’Cancel’,
style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});

var btnDoneState = Titanium.UI.createButton({
title:’Done’,
style:Titanium.UI.iPhone.SystemButtonStyle.DONE
});

var toolbarState = Titanium.UI.createToolbar({
top:0,
items:[btnCancelState, spacer, btnDoneState]
});

And finally, add your event listeners:

//STATE FIELD EVENT LISTENERS
btnChooseState.addEventListener(‘click’, function() {
btnChooseDate.removeEventListener(‘click’,function(){});
state_picker_view.add(toolbarState);
state_picker_view.animate(slide_in);
});

//UPDATE VALUE IF CHANGED
statePicker.addEventListener(‘change’, function() {
txtState.value = statePicker.getSelectedRow(0).title;
});

btnCancelState.addEventListener(‘click’, function() {
state_picker_view.animate(slide_out);
});

btnDoneState.addEventListener(‘click’, function() {
txtState.value = statePicker.getSelectedRow(0).title;
state_picker_view.animate(slide_out);
});

There you have it. As always, I hope my work can save you precious development time.

Happy coding.

Advertisement