CODEWITHSUNDEEP
iphonetitaniumtitanium-mobile
thecodeparadox
thecodeparadox

Reputation: 87073

Get width of a label in Titanium mobile app

How can I get the width of a label after set its contents? No initial width set to it.

I have two labels within a table row like followings:

label 1 (label 2)

Here the width of label 1 is not set initially. with the change of contents label 1's width has changes and sometimes it causes overlapping with label 2.

Now my main aim is to set the label 2 left dynamically that it does not ovelapp with label 1. I want to do it like following:

  1. first calculate the width of label 1
  2. then set the left of label 2 = width of label 1 + 10

if there is any other way please help.

HERE SOME CODE

var win = Titanium.UI.createWindow({
    title: 'Cleos',
    backgroundImage: 'tablebg.png',
    navBarHidden: true,
});
var tableview = Titanium.UI.createTableView({
    backgroundColor: 'transparent',
    separatorStyle: Ti.UI.iPhone.TableViewSeparatorStyle.NONE,
    style: Titanium.UI.iPhone.TableViewStyle.PLAIN
});
win.add(tableview);
var modelData = new Array;
for (i = 0; i <= daga.length - 1; i++) { // `data` as json, comes from a source
    var row = Titanium.UI.createTableViewRow({
        height: 120.0,
        backgroundColor: 'transparent',
        selectedBackgroundColor: '#380710',
        hasDetail: true
    });
    var imageThumb = Titanium.UI.createImageView({
        image: '...',
        width: 100.0,
        height: 100.0,
        left: 4.0,
        top: 10.0
    });
    row.add(imageThumb);
    var name = Titanium.UI.createLabel({
        text: '...',
        font: {
            fontSize: 16,
            fontWeight: 'bold'
        },
        textAlign: 'left',
        color: '#fff',
        height: 30.0,
        top: 5.0,
        left: 110.0
    });
    row.add(modelname);
    var NumberOfImages = Titanium.UI.createLabel({
        text: '(' + 12 + ')',
        font: {
            fontSize: 16
        },
        width: 'auto',
        color: '#bfbebe',
        textAlign: 'left',
        height: 30.0,
        top: 5.0,
        left: '' // I want to set this `left  = width of label name`
    });
    row.add(NumberOfImages);
    modelData.push(row);
    tableview.setData(modelData);
}
win.open();

Upvotes: 1

Views: 5199

Answers (7)

Bogdan T Stancu
Bogdan T Stancu

Reputation: 404

var width = label.toImage().width;

This will get the real width or height (in pixels) of the image AND it takes into account the font properties (size, family, weight).

Upvotes: 6

MRT
MRT

Reputation: 1610

I have also this type of problem in Starting. You, solve this problem easily, u set the height with %age (percentage). It means, when u define label.height = 10% label.left = 5% etc then, it calculate the screen current height and set by default with percentage.

In This use we have also a profit. when we change the orientation than it take place easily, with percentage.

Thanks

Upvotes: 0

Jeff Bonnes
Jeff Bonnes

Reputation: 1130

Set the width of name to 'auto' when you create it.

After you add name to row, you can get the width by name.size.width

Upvotes: 1

Primus202
Primus202

Reputation: 646

Setting width to 'auto' seems to clip to 320 (the label won't stay one line if its bigger than the screen width). Is there a way to have a label bigger than the screen with an automatic width go past the screen edg

Upvotes: 0

Zach Snow
Zach Snow

Reputation: 1044

Titanium labels with auto sizes tend to be annoying (or were when I last worked with Titanium); a solution that often works is to place them inside of a TiView with auto width or height and then read the relevant property from the view.

Upvotes: 1

mkind
mkind

Reputation: 2043

var labelWidth = label.width;

but be careful with 'auto' values since they often return 0. the value should be requested after adding the label to the view.

[update] if NumberOfImages.left = name.width+name.left; doesn't work i would try to calculate the width like

var pixelPerChar = 8;
var pseudoWidth = name.text.length/pixelPerChar;
NumberOfImages.left = pseudoWidth + name.left;

Upvotes: 3

Tjekkles
Tjekkles

Reputation: 5612

Set both width AND height to auto, then it should return a proper value.

Upvotes: 1

Related Questions