Компоновка GridLayout

Компоновка GridLayout (сетка) — это относительно новая компоновка, появилась в версии 4.0 (API Level 14). Она похожа на TableLayout, но позволяет более гибко работать с  размерами ячеек и их расположением. В отличие от TableLayout, она не фиксирует дочерние элементы в TableRow, а использует атрибуты android:columnCount и android:rowCount для задания количества дочерних элементов соответственно в столбце или в строке сетки. Кроме того, в GridLayout можно объединять ячейки по горизонтали, используя атрибут android:layout_columnSpan, задавая им количество ячеек, которые должны быть объединены.
Для примера используем уже созданный набор кнопок из предыдущего урока, только поместим их в GridLayout и уберем элементы TableRow. Для кнопки "0" зададим атрибут android:layout_columnSpan="3", а для кнопки "*" — android:layout_columnSpan="2".

activity_main.xml

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:columnCount="3" > 
    <Button 
        android:id="@+id/Button01" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="1"/> 
    <Button 
        android:id="@+id/Button02" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="2"/> 
    <Button 
        android:id="@+id/Button03" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="3"/> 
    <Button 
        android:id="@+id/Button04" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="4"/> 
    <Button 
        android:id="@+id/Button05" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="5"/> 
    <Button 
        android:id="@+id/Button06" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="6"/> 
    <Button 
        android:id="@+id/Button07" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="7"/> 
    <Button 
        android:id="@+id/Button08" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="8"/> 
    <Button 
        android:id="@+id/Button09" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="9"/> 
    <Button 
        android:id="@+id/Button11" 
        android:layout_height="wrap_content" 
        android:layout_width="150dp" 
        android:layout_columnSpan="3" 
        android:text="0"/> 
    <Button 
        android:id="@+id/Button10" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:layout_columnSpan="2" 
        android:text="*"/> 
    <Button 
        android:id="@+id/Button12" 
        android:layout_height="wrap_content" 
        android:layout_width="50dp" 
        android:text="#"/> 
</GridLayout>

Внешний вид компоновки на смартфоне:

Обратите внимание, что объединение ячеек автоматически не растягивает элемент, находящийся в них, как в случае с кнопкой "*". Размеры элемента в ячейке надо задавать отдельно. Для кнопки "0", которая растянута на 3 ячейки, кроме атрибута android:
layout_columnSpan мы изменили ширину кнопки
.