Jaki jest rozsądny sposób utworzenia tego układu?

Question

Na poniższym obrazku żółty kwadrat przedstawia RelativeLayout, który znajduje się w moim ogólnym układzie.

Górny rząd "komunikat o stanie" to ViewFlipper reagujący na przyciski ToggleButtons (A, B), które użytkownik może nacisnąć. Przyciski C, D i E robią inne rzeczy, które przeładowują cały widok. Nasz klient żąda, aby przyciski A, B, C, D i E były ułożone zgodnie z poniższym schematem. (Wyrównanie w pionie nie jest tak ważne jak wyrównanie w poziomie.)

EDYTUJ, aby powiedzieć: A, B, C, D i E są obrazami o zanurzeniu 20x20; są one wyrównane na szerokość około 300dip. Chcę, aby przyciski zachowały swój współczynnik proporcji.

Utworzyłem przedłużenie LinearLayout że powietrzne, przyciski A i B (z pliku XML), a potem jeszcze LinearLayout że przyciski powietrzne, C, D i E w innym pliku xml.

przyciski A i B (są rzeczywiście ToggleButtons):

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:baselineAligned="true" 
> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
    > 
     <ToggleButton 
      android:id="@+id/A" 
      android:textOn="" 
      android:textOff="" 
      android:background="@layout/A" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="60dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ToggleButton 
      android:id="@+id/B" 
      android:textOn="" 
      android:textOff="" 
      android:background="@layout/B" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
    </LinearLayout> 
</RelativeLayout> 

Przyciski C, D, E plik xml:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:baselineAligned="true" 
> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
    > 
     <ImageView 
      android:id="@+id/C" 
      android:src="@drawable/C" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ImageView 
      android:id="@+id/D" 
      android:src="@drawable/D" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ImageView 
      android:id="@+id/E" 
      android:src="@drawable/E" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
    </LinearLayout> 
</RelativeLayout> 

Mój kod zasadzie działa, ale muszę banialuki z marginesie poprawiać porządek (czego jeszcze nie robią). Zastanawiam się, czy istnieje jakiś czystszy sposób wyśrodkowywania zestawów przycisków "A B" i "C D E"

ps: bystry czytelnik zauważy, że rozwijam LinearLayout, ale nadymam RelativeLayouts. (Nie wiem, dlaczego może w ogóle działać, ale) gdy próbowałem zamiast tego rozszerzyć RelativeLayout, układ "C D E" nie pojawił się nawet na moim urządzeniu. Nie wiem, gdzie to poszło.

Answer 1

Użyj układu liniowego jako głównego obiektu.

Następnie użyj layout_gravity na poszczególnych linearlayouts poziomych zachować zawartość skupionego

Użyj layout_margin na każdym widoku dziecka do miejsca ich od siebie. Podałem to jako 15dip, ale powinieneś użyć wymiaru, aby móc je wszystkie modyfikować.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <TextView android:id="@+id/some_text" 
     android:layout_height="wrap_content" 
     android:text="Some random string." android:layout_gravity="center" android:layout_width="wrap_content"/> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center"> 
     <ToggleButton 
      android:id="@+id/A" 
      android:textOn="" 
      android:textOff="" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@layout/A" 
      android:layout_margin="15dip"/> 
     <ToggleButton 
      android:id="@+id/B" 
      android:textOn="" 
      android:textOff="" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@layout/B" 
      android:layout_margin="15dip"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center"> 
     <ImageView 
      android:id="@+id/C" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/C" 
      android:layout_margin="15dip"/> 
     <ImageView 
      android:id="@+id/D" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/D" 
      android:layout_margin="15dip"/> 
     <ImageView 
      android:id="@+id/E" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/E" 
      android:layout_margin="15dip"/> 
    </LinearLayout> 

</LinearLayout>