2010-04-21 3 views
0

Возможно, я пока не понимаю свойства макета TableLayout. Кажется, что невозможно достичь такой гибкой таблицы, как в HTML, потому что нет ячеек. Моя цель это добиться такого макета:Как выровнять кнопки в TableLayout в разные стороны?

enter image description here

Как я могу сделать это? Я думал об использовании GridView, но это не кажется полезным в XML. Мои усилия выглядеть следующим образом:

 <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> 

ответ

7

Я нашел решение. Во 2-й строке есть 4 кнопки. С android: stretchColumns = "1" Я растягиваю второй столбец, поэтому выравнивание уже то, что я хочу. Единственная проблема - кнопка «Scrn U». Это тоже было бы растянуто. Таким образом, вы должны добавить невидимую кнопку (которая будет растягиваться) и эту кнопку «выталкивает» кнопку «Scrn U» на следующей колонке «»:

 <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

непроверенными, но это вероятно, будет работать:

<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> 

В принципе, я только что указано некоторые клетки имеет layout_span, которая является своеобразной как столбец таблицы HTML. При этом вам не нужно пробовать и подстраиваться с выравниванием и так далее.

+0

Здравствуйте, жаль, что не получилось в этом путь. Это похоже на мои предыдущие усилия. В вашем случае первая строка содержит кнопку «Поднимать U», которая выглядит правильно, но следующая кнопка «Scrn U» растягивается над нижними кнопками в следующем ряду. Кроме того, кнопка «Scrn L» в следующей строке выглядит обрезанной. Остальные две кнопки «Scrn D», «Scrn R» выглядят правильно. Но все кнопки держатся на левой стороне. Мои предыдущие усилия были похожи. Я не мог справиться с этим, чтобы выровнять некоторые из них с правой стороны. Интересно, почему этот макет настолько громоздкий. Другие макеты выглядят довольно хорошо продуманными. – Bevor

Смежные вопросы