2010-04-21 5 views
0

probablement je ne comprends pas encore les propriétés de disposition de TableLayout. Il ne semble pas possible d'obtenir une telle table flexible comme en HTML, car il n'y a pas de cellules. Mon objectif est-il d'atteindre une telle mise en page:Comment aligner les boutons d'une TableLayout dans différentes directions?

enter image description here

Comment puis-je faire cela? J'ai pensé à utiliser un GridView mais cela ne semble pas utile en XML. Mes efforts se présentent comme suit:

 <TableLayout 
     android:id="@+id/tableLayout" 
     android:layout_width="320sp" 
     android:layout_height="fill_parent" 
     android:layout_gravity="center_horizontal" 
     android:gravity="bottom" 
     android:layout_alignParentBottom="true"> 
     <TableRow 
     android:background="#333333" 
     android:gravity="bottom" 
     android:layout_width="fill_parent">  
     <Button 
      android:id="@+id/btnUp" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:gravity="left" 
      android:text="Lift U" 
      /> 
     <Button 
      android:id="@+id/btnScreenUp" 
      android:gravity="right" 
      android:layout_gravity="right" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:text="Scrn U" 
      /> 
     </TableRow> 
     <TableRow 
      android:background="#444444" 
      android:gravity="bottom" 
      android:layout_gravity="right"> 
      <Button 
      android:id="@+id/btnDown" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:text="Lift D" 
      /> 
      <Button 
      android:id="@+id/btnScreenLeft" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:gravity="right" 
      android:layout_gravity="right" 
      android:text="Scrn L" 
      /> 
      <Button 
      android:id="@+id/btnScreenDown" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:gravity="right" 
      android:layout_gravity="right" 
      android:text="Scrn D" 
      /> 
      <Button 
      android:id="@+id/btnScreenRight" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:gravity="right" 
      android:layout_gravity="right" 
      android:text="Scrn R" 
      /> 
     </TableRow> 
</TableLayout> 

Répondre

7

J'ai trouvé la solution. Il y a 4 boutons dans la 2ème rangée. Avec android: stretchColumns = "1" j'étire la 2ème colonne, donc l'alignement est déjà ce que je veux. Le seul problème est le bouton "Scrn U". Il aurait été étiré aussi. Donc, vous devez ajouter un bouton invisible (qui sera étiré) et ce bouton « pousse » le bouton « Scrn U » à la prochaine « colonne »:

 <TableLayout 
     android:id="@+id/tableLayout" 
     android:layout_width="320sp" 
     android:layout_height="fill_parent" 
     android:stretchColumns="1" 
     android:gravity="bottom" 
     android:layout_alignParentBottom="true"> 
     <TableRow 
     android:background="#333333" 
     android:gravity="bottom">  
     <Button 
      android:id="@+id/btnUp" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:text="Lift U" 
      /> 
     <Button 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:visibility="invisible" 
     /> 
     <Button 
      android:id="@+id/btnScreenUp" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:layout_gravity="right" 
      android:text="Scrn U" 
      /> 
     </TableRow> 
     <TableRow 
      android:background="#444444" 
      android:layout_gravity="right"> 
      <Button 
      android:id="@+id/btnDown" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:text="Lift D" 
      /> 
      <Button 
      android:id="@+id/btnScreenLeft" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:layout_gravity="right" 
      android:text="Scrn L" 
      /> 
      <Button 
      android:id="@+id/btnScreenDown" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:layout_gravity="right" 
      android:text="Scrn D" 
      /> 
      <Button 
      android:id="@+id/btnScreenRight" 
      android:layout_width="60sp" 
      android:layout_height="50sp" 
      android:layout_gravity="right" 
      android:text="Scrn R" 
      /> 
     </TableRow> 
</TableLayout> 
1

Untested, mais cela fonctionnera probablement:

<TableLayout 
    android:id="@+id/tableLayout" 
    android:layout_width="320sp" 
    android:layout_height="fill_parent" 
    android:layout_gravity="center_horizontal" 
    android:gravity="bottom" 
    android:layout_alignParentBottom="true"> 
    <TableRow 
    android:background="#333333" 
    android:gravity="bottom" 
    android:layout_width="fill_parent">  
    <Button 
     android:id="@+id/btnUp" 
     android:layout_width="60sp" 
     android:layout_height="50sp" 
     android:layout_span="3" 
     android:text="Lift U" 
     /> 
    <Button 
     android:id="@+id/btnScreenUp" 
     android:layout_width="60sp" 
     android:layout_height="50sp" 
     android:layout_span="2" 
     android:text="Scrn U" 
     /> 
    </TableRow> 
    <TableRow 
     android:background="#444444" 
     android:gravity="bottom" 
     android:layout_gravity="right"> 
     <Button 
     android:id="@+id/btnDown" 
     android:layout_width="60sp" 
     android:layout_height="50sp" 
     android:layout_span="2" 
     android:text="Lift D" 
     /> 
     <Button 
     android:id="@+id/btnScreenLeft" 
     android:layout_width="60sp" 
     android:layout_height="50sp" 
     android:text="Scrn L" 
     /> 
     <Button 
     android:id="@+id/btnScreenDown" 
     android:layout_width="60sp" 
     android:layout_height="50sp" 
     android:text="Scrn D" 
     /> 
     <Button 
     android:id="@+id/btnScreenRight" 
     android:layout_width="60sp" 
     android:layout_height="50sp" 
     android:text="Scrn R" 
     /> 
    </TableRow> 

En fait, je viens spécifié certaines cellules à un layout_span, qui est une sorte de comme la table HTML colspan. Avec cela, vous n'avez pas besoin d'essayer et de diner avec l'alignement et autres.

+0

Bonjour, désolé cela n'a pas fonctionné dans ce façon. Cela ressemble à mon effort précédent. Dans votre cas, la première rangée contient le bouton "Lift U" qui semble correct, mais le bouton suivant, "Scrn U" est streched sur les boutons sous-jacents dans la rangée suivante. De plus, le bouton "Scrn L" de la ligne suivante semble tronqué. Les deux autres boutons "Scrn D", "Scrn R" semblent corrects. Mais tous les boutons collent sur le côté gauche. Mon effort précédent était similaire. Je n'ai pas réussi à aligner certains d'entre eux sur le côté droit. Je me demande pourquoi cette mise en page est si lourde. Les autres dispositions semblent plutôt bien pensées. – Bevor

Questions connexes