Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

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

— asked August 13th 2010 by Laura Torrent Puig
  • iphone
  • mac
  • mobile
  • picker
  • pickerrow
1 Comment
  • I'm having a similar problem, did you every find a solution?

    — commented March 3rd 2011 by Patrick Cate

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

    — answered September 14th 2011 by Arildo Junior
    permalink
    0 Comments
  • 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.

    — answered May 16th 2012 by Steven Marshall
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.