Tabela

TableLayout to element ViewGroup, który wyświetla podrzędne elementy View w wierszach i kolumnach.

Uwaga: aby uzyskać lepszą wydajność i obsługę narzędzi, utwórz układ za pomocą ConstraintLayout.

TableLayout umieszcza elementy podrzędne w wierszach i kolumnach. Kontenery TableLayout nie wyświetlają linii obramowania w wierszach, kolumnach ani komórkach. Tabela będzie mieć tyle kolumn co wiersz z największą liczbą komórek. Komórki w tabeli mogą być puste. Komórki mogą obejmować wiele kolumn, tak jak w kodzie HTML. Kolumny możesz rozciągać, korzystając z pola span w klasie TableRow.LayoutParams.

Uwaga: komórki nie mogą rozciągać się na wiele wierszy.

Obiekty TableRow to widoki podrzędne elementu TableLayout (każdy obiekt TableRow definiuje jeden wiersz w tabeli). Każdy wiersz zawiera 0 lub więcej komórek, z których każda jest definiowana przez inny widok danych. Komórki wiersza mogą się więc składać z różnych obiektów View, takich jak ImageView czy TextView. Komórka może być też obiektem ViewGroup (na przykład możesz zagnieździć inny obiekt TableLayout jako komórkę).

Poniższy przykładowy układ zawiera dwa wiersze i po dwie komórki w każdej z nich. Dołączony zrzut ekranu przedstawia wynik, a obramowania komórek są wyświetlane jako linie przerywane (dodane dla efektu wizualnego).

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">
    <TableRow>
        <TextView
            android:text="@string/table_layout_4_open"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_4_open_shortcut"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:text="@string/table_layout_4_save"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_4_save_shortcut"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
</TableLayout>

Kolumny mogą być ukryte, oznaczone, aby rozciągać i wypełnić dostępną przestrzeń na ekranie. Można je też oznaczyć jako zmniejszające, aby wymusić zwinięcie kolumny do czasu, aż tabela zmieści się na ekranie. Więcej informacji znajdziesz w dokumentacji TableLayout reference.

Przykład

1. Uruchom nowy projekt o nazwie HelloTableLayout.
2. Otwórz plik res/layout/main.xml i wstaw ten kod:

   <?xml version="1.0" encoding="utf-8"?>
   <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:stretchColumns="1">
   
       <TableRow>
           <TextView
               android:layout_column="1"
               android:text="Open..."
               android:padding="3dip" />
           <TextView
               android:text="Ctrl-O"
               android:gravity="right"
               android:padding="3dip" />
       </TableRow>
   
       <TableRow>
           <TextView
               android:layout_column="1"
               android:text="Save..."
               android:padding="3dip" />
           <TextView
               android:text="Ctrl-S"
               android:gravity="right"
               android:padding="3dip" />
       </TableRow>
   
       <TableRow>
           <TextView
               android:layout_column="1"
               android:text="Save As..."
               android:padding="3dip" />
           <TextView
               android:text="Ctrl-Shift-S"
               android:gravity="right"
               android:padding="3dip" />
       </TableRow>
   
       <View
           android:layout_height="2dip"
           android:background="#FF909090" />
   
       <TableRow>
           <TextView
               android:text="X"
               android:padding="3dip" />
           <TextView
               android:text="Import..."
               android:padding="3dip" />
       </TableRow>
   
       <TableRow>
           <TextView
               android:text="X"
               android:padding="3dip" />
           <TextView
               android:text="Export..."
               android:padding="3dip" />
           <TextView
               android:text="Ctrl-E"
               android:gravity="right"
               android:padding="3dip" />
       </TableRow>
   
       <View
           android:layout_height="2dip"
           android:background="#FF909090" />
   
       <TableRow>
           <TextView
               android:layout_column="1"
               android:text="Quit"
               android:padding="3dip" />
       </TableRow>
   </TableLayout>
   

   Zwróć uwagę, że przypomina strukturę tabeli HTML. Element TableLayout jest podobny do elementu HTML <table>; TableRow jest jak element ><tr>>, ale w przypadku komórek możesz użyć dowolnego elementu View. W tym przykładzie każda komórka ma zastosowanie TextView. Między niektórymi wierszami znajduje się też podstawowy element View, który służy do rysowania poziomej linii.

3. Upewnij się, że aktywność HelloTableUkład wczytuje ten układ w metodzie onCreate():

   Kotlin

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.main)
   }
   

   Java

   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
   }
   

   Metoda setContentView(int) wczytuje plik układu dla elementu Activity określony za pomocą identyfikatora zasobu – R.layout.main odnosi się do pliku układu res/layout/main.xml.

4. Uruchom aplikację.

Strona powinna wyglądać tak: