Xamarin.Android GridLayout

2018-02-06

Jest GridLayout to nowa ViewGroup podklasa, która obsługuje układanie widoków w siatce 2D, podobnie jak tabela HTML, jak pokazano poniżej:

GridLayout współdziała z hierarchią widoku płaskiego, w której widoki podrzędne ustawiają swoje lokalizacje w siatce, określając wiersze i kolumny, w których powinny znajdować się. Dzięki temu obiekt GridLayout może umieścić widoki w siatce bez konieczności zapewnienia struktury tabeli, takiej jak w wierszach tabeli używanych w tabeli TableLayout. Dzięki zachowaniu płaskiej hierarchii funkcja GridLayout może szybciej układać widoki podrzędne. Przyjrzyjmy się przykładowi, aby zilustrować, co to pojęcie faktycznie oznacza w kodzie.

Tworzenie układu siatki

Poniższy kod XML dodaje kilka TextView kontrolek do elementu GridLayout.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="2"
        android:columnCount="2">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 2"
            android:textSize="14dip" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip" />
</GridLayout>

Układ dostosuje rozmiary wierszy i kolumn, aby komórki mogły pasować do ich zawartości, jak pokazano na poniższym diagramie:

Spowoduje to wykonanie następującego interfejsu użytkownika podczas uruchamiania w aplikacji:

Określanie orientacji

Zwróć uwagę, że w powyższym pliku XML każdy TextView nie określa wiersza ani kolumny. Jeśli nie zostaną one określone, każdy GridLayout widok podrzędny jest przypisywany w kolejności na podstawie orientacji. Na przykład zmieńmy orientację gridLayout z wartości domyślnej, która jest pozioma, na pionową w następujący sposób:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="2"
        android:columnCount="2"
        android:orientation="vertical">
</GridLayout>

GridLayout Teraz komórki zostaną umieszczone od góry do dołu w każdej kolumnie, a nie od lewej do prawej, jak pokazano poniżej:

Spowoduje to wykonanie następującego interfejsu użytkownika w czasie wykonywania:

Określanie pozycji jawnej

Jeśli chcemy jawnie kontrolować pozycje widoków podrzędnych w obiekcie GridLayout, możemy ustawić ich layout_row atrybuty i layout_column . Na przykład poniższy kod XML spowoduje wyświetlenie układu pokazanego na pierwszym zrzucie ekranu (pokazanym powyżej), niezależnie od orientacji.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="2"
        android:columnCount="2">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="1" />
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="1"
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"
            android:layout_row="1"
            android:layout_column="1"  />
</GridLayout>

Określanie odstępów

Mamy kilka opcji, które zapewnią odstępy między widokami podrzędnych obiektu GridLayout. Możemy użyć atrybutu layout_margin , aby ustawić margines na każdym widoku podrzędnym bezpośrednio, jak pokazano poniżej

<TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_margin="10dp" />

Ponadto w systemie Android 4 dostępny jest nowy widok odstępów ogólnego przeznaczenia o nazwie Space . Aby go użyć, po prostu dodaj go jako widok podrzędny. Na przykład poniższy kod XML dodaje dodatkowy wiersz do GridLayout elementu przez ustawienie wartości rowcount 3 i dodaje Space widok, który zapewnia odstępy między elementami TextViews.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="3"
        android:columnCount="2"
        android:orientation="vertical">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"        
            android:layout_column="1" />
     <Space
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="50dp"         
            android:layout_height="50dp" />    
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="1" />
</GridLayout>

Ten kod XML tworzy odstępy w pliku , GridLayout jak pokazano poniżej:

Zaletą korzystania z nowego Space widoku jest to, że umożliwia odstępy i nie wymaga ustawiania atrybutów w każdym widoku podrzędnym.

Obejmujące kolumny i wiersze

Obiekt GridLayout obsługuje również komórki obejmujące wiele kolumn i wierszy. Załóżmy na przykład, że dodamy kolejny wiersz zawierający przycisk do tabeli, GridLayout jak pokazano poniżej:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"    
        android:rowCount="4"
        android:columnCount="2"
        android:orientation="vertical">
     <TextView
            android:text="Cell 0"
            android:textSize="14dip"
            android:layout_row="0"
            android:layout_column="0" />
     <TextView
            android:text="Cell 1"
            android:textSize="14dip"
            android:layout_row="0"        
            android:layout_column="1" />
     <Space
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="50dp"        
            android:layout_height="50dp" />   
     <TextView
            android:text="Cell 2"
            android:textSize="14dip"
            android:layout_row="2"        
            android:layout_column="0" />
     <TextView
            android:text="Cell 3"
            android:textSize="14dip"        
            android:layout_row="2"        
            android:layout_column="1" />
     <Button
            android:id="@+id/myButton"
            android:text="@string/hello"        
            android:layout_row="3"
            android:layout_column="0" />
</GridLayout>

Spowoduje to rozciągnięcie pierwszej kolumny GridLayout w celu dostosowania rozmiaru przycisku, jak widzimy tutaj:

Aby zachować rozciągnięcie pierwszej kolumny, możemy ustawić przycisk w taki sposób, aby obejmował dwie kolumny, ustawiając jej zakres kolumn w następujący sposób:

<Button
    android:id="@+id/myButton"
    android:text="@string/hello"       
    android:layout_row="3"
    android:layout_column="0"
    android:layout_columnSpan="2" />

Wykonanie tej czynności powoduje utworzenie układu TextViews podobnego do układu, który został wcześniej dodany do dołu GridLayout elementu , jak pokazano poniżej:

Udostępnij za pośrednictwem