Аппликатор сплава Custom listview макет не работает?

Question

Я создал ListView следуя примеру на http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_ListView_Guide

Представление XML является, как показано ниже,

<ListView id="elementsList" defaultItemTemplate="elementTemplate"> 
    <Templates> 
     <ItemTemplate name="elementTemplate"> 
      <Label bindId="symbol" id="symbol" /> 
      <View id="atomProperties"> 
       <Label bindId="name" id="name" /> 
       <View id="secondLine"> 
        <Label class="line2 fieldLabel" text="Number: " /> 
        <Label class="line2" bindId="number" id="number" /> 
        <Label class="line2 fieldLabel" text="Atomic Mass: " /> 
        <Label class="line2" bindId="mass" id="mass" /> 
       </View> 
      </View> 
      <ImageView bindId="image" id="image" /> 
     </ItemTemplate> 
    </Templates> 
    <ListSection> 
     <ListItem symbol:text="H" symbol:color="#090" name:text="Hydrogen" number:text="1" mass:text="1.00794"/> 
     <ListItem symbol:text="He" symbol:color="#090" name:text="Helium" number:text="2" mass:text="4.002602"/> 
     <ListItem symbol:text="Li" name:text="Lithium" number:text="3" mass:text="6.941"/> 
    </ListSection> 
</ListView>  

И TSS, как показано ниже,

"#symbol": { 
    left: 15, 
    color: "black", 
    font: { fontSize: 34, fontWeight: 'bold' } 
}, 
"#symbol[platform=android]": { 
    left: 0 
} 
"#atomProperties": { 
    top: 0, left: 80, right: 0, bottom: 0, 
    layout: "vertical" 
}, 
"#atomProperties[platform=android]": { 
    left: 65 
}, 
"#name": { 
    left: 0, top: 4, 
    color: "black", 
    textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT, 
    font: { fontSize: 16 } 
}, 
"#secondLine": { 
    left: 0, right: 0, 
    layout: "horizontal" 
}, 
".fieldLabel": { 
    color:"#999" 
}, 
".line2": { 
    font: { fontSize: 10 } 
}, 
"#number": { 
    width: 30, 
    color: 'red' 
}, 
"#mass": { 
    color: "blue" 
} 

Мне нужно добавить право Обозначенная метка времени рядом с именем, и мне нужна масса меток, чтобы быть оправданной. Так что я добавить метку времени под именем

<Label bindId="name" id="name" /> 
<Label bindId="time" id="time" /> 

, а затем добавить TSS

"#time": { 
    right: 0, top: 4, 
    color: "black", 
    textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT, 
    font: { fontSize: 12 } 
} 

времени метки выравниваются вправо правильно, но тогда он появится под именными табличками. Как сделать так же, как имя?

И я хочу, чтобы обозначить массу быть выравниванием вправо, так что я изменить его на

"#mass": { 
    color: "blue", 
    right: 0, 
    textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT 
} 

Но это не будет работать, масса этикетка еще не оправдано. Как я могу сделать это правильно обоснованным?

В принципе, я хочу, чтобы мой макет ListView элемент, чтобы выглядеть следующим образом

 
        name             time 
SYMBOL 
        number           mass 

Answer 1

Я бы сделать ItemTemplate иметь горизонтальное расположение. Символьная метка сначала с левым интервалом (вам также может понадобиться играть с высотой и вертикалью, чтобы получить правильное выравнивание). Второй - это вид с вертикальной компоновкой, включая имя и номер; левая настройка здесь - это интервал между символами. Третий - это вид с вертикальной компоновкой, включающий время и массу; левая настройка здесь - это интервал между полями имени/номера. Возможно, вам понадобится добавить верхний интервал для количества и массы, чтобы получить желаемый эффект.Псевдо-иш-код ниже:

<ItemTemplate layout="horizontal"> 
    <Label text="Symbol" left="0"></Label> 
    <View left="10" layout="vertical"> 
     <Label text="name"> 
     <Label text="number"> 
    </View> 
    <View left="10" layout="vertical"> 
     <Label text="time"> 
     <Label text="mass"> 
    </View> 
</ItemTemplate>