CODEWITHSUNDEEP
appceleratorappcelerator-titanium
Jonathan Chiu
Jonathan Chiu

Reputation: 1677

How do you align elements going from right to left in a horizontal layout using Appcelerator?

Using layout = horizontal, the elements within stack up starting from the left. I want to stack the elements from right to left. How can I do that?

Upvotes: 0

Views: 1503

Answers (2)

Fokke Zandbergen
Fokke Zandbergen

Reputation: 3866

Depending on your use case you could also do:

<Alloy>
    <Window>
        <View layout="horizontal" width="Ti.UI.SIZE" right="0">
            <View backgroundColor="red" left="0" width="20" height="20" />
            <View backgroundColor="green" left="0" width="20" height="20" />
            <View backgroundColor="blue" left="0" width="20" height="20" />
        </View>
    </Window>
</Alloy>

Notice that the views themselves do not stack up from right, but by setting the parent width to Ti.UI.SIZE the group as a total does align right. Again, this might not be fulfil your need if you need the views themselves to stack up RTL and stil want the order in the XML to be as is.

enter image description here

Upvotes: 4

Maik
Maik

Reputation: 43

There is no property to do this. But you can do this by a mirror trick.

index.xml 

<Alloy>
    <Window class="container" title="Test">
        <View id="holder">
            <View class="item" />
            <View class="item" />
            <View class="item" />
        </View>
    </Window>
</Alloy>

index.tss 

"#holder": {
    top:"50dp",
    layout:"horizontal",
    width:Ti.UI.FILL,
    transform:Alloy.Globals.mirror
}
".item":{
    left:0,
    width:"20dp",
    height:"20dp",
    backgroundColor:"red",
    borderColor:"blue",
    borderWidth:"1dp"
}

alloy.js 

Alloy.Globals.mirror = Ti.UI.create2DMatrix().scale(-1,1);

Upvotes: 3

Related Questions