How to add an image and a title to a Pickerrow
Hi there,
I am desperately trying to add an image and text to a Pickerrow. However, none of the methods I have tried so far worked. This is my sample snippet:
var win = Titanium.UI.createWindow({
backgroundColor : 'black'
});
var picker = Ti.UI.createPicker();
var row0 = Ti.UI.createPickerRow();
var img = Ti.UI.createImageView({
image:'../Images/de.png',
width:40,
height:40});
row0.add(img);
picker.add(row0);
var row1 = Ti.UI.createPickerRow({
backgroundColor: 'red',
'title': 'Row 1'});
picker.add(row1);
var row2 = Ti.UI.createPickerRow({
title: 'Row 2',
backgroundImage: '../Images/de.png',
backgroundColor: 'none'});
picker.add(row2);
win.add(picker);
win.open();
The title displays correctly, however, none of the images. If I just add the image to the window (like so win.add(img)
), the image gets displayed correctly (tested this just to be on the safe side).
Could anyone shine any light onto how to achieve this?
Thanks in advance!
Cheers,
Laura
PS: my system configuration:
Snow Leopard 10.6.4
Appcelerator 1.4 Mobile with installed logger.py patch
iOS SDK 4.0.1
2 Answers
-
It's not allowed to display images in a PickerRow if you're using title. I don't know the exactly reason but display views together with property title set doesn't work. So the solution is to use ONLY views, for example a label that represents the title property as a view and an image. With the image you must take care about the frame properties(top,bottom,left,right), you need to try different values until the image display on the place you want (Tip: add the image with a large size, it's make easier to locate it).
The example code is below:
var win = Titanium.UI.createWindow({ backgroundColor : 'black' }); var picker = Ti.UI.createPicker(); var row0 = Ti.UI.createPickerRow(); var img = Ti.UI.createImageView({ image:'../Images/de.png', width:40, height:40, top: 215, left: 25 /* I found the top and left values just trying different values and checking the iPhone Simulator */ }); var label = Ti.UI.createLabel({ text: 'test', font:{fontSize:20,fontWeight:'normal'}, color: 'black', width:'auto', height:'auto', left: 30 }); row0.add(img); row0.add(label); picker.add(row0); win.add(picker); win.open();
However, the behavior of the picker changes. When you select a different row by singletap, this doesn't work unfortunately.
I hope it helps,
Arildo
-
Just use Labels instead, as you don't need to guess. No need for top position. Just add a background image to the labels.
var img = Ti.UI.createImageView({ image:'../Images/de.png', width:40, height:40, top: 215, left: 25 /* I found the top and left values just trying different values and checking the iPhone Simulator */ }); Change to: var img = Ti.UI.createLabel({ backgroundImage:'../Images/de.png', width:40, height:40, left: 25 });
Other code is the same.