Change part of a label in Titanium or Alloy / Appcelerator

1
votes

I want to change part of a label dynamically.

This is my code:

<View top="0" height="115">
    <Label id="lblMiles" left="15" textAlign="right" right="15" top="0" height="55">
        {distance} Miles
    </Label>
</View>

I want to be able to change the {distance} portion dynamically. However currently I can only change the whole thing like this:

$.lblMiles.text = "10 Miles";

In HTML we normally use a span tag like so:

<div id="lblMiles"><span id="distance"></span> Miles</div>

How can I do something similar in Alloy?

2
titaniumappceleratorappcelerator-titaniumtitanium-alloyappcelerator-alloy

2 Answers

4
votes

If it were up to me, i wouldn't worry about updating only half the label, just reset the whole text, 

$.lblMiles.text = "10 Miles";
// and then later on to update it to 15
$.lblMiles.text = "15 Miles";

if for some reason you need to update only half, then you could use two labels and put them in a view with layout set to horizontal.

something looking like this : 

<View top="0" height="115">
    <View height="Ti.UI.SIZE" width="Ti.UI.SIZE" layout="horizontal">
        <Label id="dynamicLabel" />
        <Label id="lblMiles" > Miles</Label>
    </View>
</View>

and then in your code, just update the dynamic label setting the actual value:

$.dynamicLabel.text = "15";

Now to position the labels on the screen you should play on the attributes of their container's left, right, top and bottom.

1
votes

You can do this by two three ways

  1. Have two different labels and set it from controller
  2. You can use attributed strings as well. More reference is here http://docs.appcelerator.com/platform/latest/#!/guide/Attributed_Strings