GridLayout (застарілий)

GridLayout представляє ще один контейнер, який дає змогу створювати табличні подання. GridLayout складається з колекції рядків, кожен з яких складається з окремих комірок:

<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="3">
 
    <Button android:text="1" />
    <Button android:text="2" />
    <Button android:text="3" />
    <Button android:text="4" />
    <Button android:text="5" />
    <Button android:text="6" />
    <Button android:text="7" />
 
    <Button android:text="8" />
 
    <Button android:text="9" />
</GridLayout>

За допомогою атрибутів android:rowCount і android:columnCount встановлюється число рядків і стовпців відповідно. Так, у цьому випадку встановлюємо 3 рядки і 3 стовпці. GridLayout автоматично може позиціонувати вкладені елементи управління за рядками. Так, у нашому випадку перша кнопка потрапляє в перший осередок (перший рядок, перший стовпчик), друга кнопка - у другий осередок і так далі.

При цьому ширина стовпців встановлюється автоматично за шириною найширшого елемента.

Однак ми можемо явно задати номер стовпця і рядка для певного елемента, а за необхідності розтягнути на кілька стовпців або рядків. Для цього ми можемо застосовувати такі атрибути:

  • android:layout_column: номер стовпця (відлік іде від нуля)
  • android:layout_row: номер рядка
  • android:layout_columnSpan: кількість стовпців, на які розтягується елемент
  • android:layout_rowSpan: кількість рядків, на які розтягується елемент

Наприклад:

<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="3">
 
    <Button
        android:text="1"
        android:layout_column="0"
        android:layout_row="0" />
    <Button android:text="2"
        android:layout_column="1"
        android:layout_row="0"/>
    <Button android:text="3"
        android:layout_column="2"
        android:layout_row="0"  />
    <Button android:text="4"
        android:layout_width="180dp"
        android:layout_columnSpan="2"/>
    <Button android:text="5"
        android:layout_height="100dp"
        android:layout_rowSpan="2"/>
    <Button android:text="6" />
    <Button android:text="7"/>
</GridLayout>

Програмне створення GridLayout

Серед методів GridLayout слід відзначити методи setRowCount() і setColumnCount(), які дають змогу задати відповідно кількість рядків і стовпців. Наприклад, визначимо в коді GridLayout, аналогічний першому прикладу в статті:

package com.example.viewapp;
 
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridLayout;
import android.widget.LinearLayout;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        GridLayout gridLayout = new GridLayout( this);
        gridLayout.setRowCount(3);
        gridLayout.setColumnCount(3);
 
        for(int i = 1; i <=9; i++){
            Button btn = new Button(this);
            btn.setText(String.valueOf(i));
            gridLayout.addView(btn);
        }
        setContentView(gridLayout);
    }
}

У цьому випадку GridLayout має три рядки і три стовпці. Під час додавання віджетів (у цьому разі кнопок) вони послідовно поміщаються в комірки грида по одному віджету в комірці.

GridLayout.LayoutParams

Для більш детального налаштування розташування віджета в гриді можна використовувати клас GridLayout.LayoutParams. Цей клас має низку властивостей, які дають змогу налаштувати розташування:

  • columnSpec: задає стовпець для розташування у вигляді об'єкта GridLayout.Spec
  • rowSpec: задає рядок для розташування у вигляді об'єкта GridLayout.Spec
  • leftMargin: задає відступ зліва
  • rightMargin: задає відступ праворуч
  • topMargin: задає відступ зверху
  • bottomMargin: задає відступ знизу
  • width: задає ширину віджета
  • height: задає висоту віджета

Об'єкт GridLayout.Spec дає змогу задати розміщення в комірках стовпчика або рядка. Для створення цього об'єкта застосовується статичний метод GridLayout.spec(), який має низку версій. Відзначимо серед них такі:

  • GridLayout.spec(int): задає стовпець або рядок, де розташовується віджет. Відлік комірок починається з нуля. Віджет займає тільки одну клітинку
  • GridLayout.spec(int, int): перший параметр задає стовпець або рядок, де розташовується віджет. Другий параметр вказує, наскільки комірок розтягується віджет
  • GridLayout.spec(int, android.widget.GridLayout.Alignment): перший параметр задає стовпець або рядок, де розташовується віджет. Другий параметр встановлює вирівнювання віджета
  • GridLayout.spec(int, int, android.widget.GridLayout.Alignment): перший параметр задає стовпець або рядок, де розташовується віджет. Другий параметр вказує, наскільки комірок розтягується віджет. Третій параметр встановлює вирівнювання віджета

Приклад застосування:

Button btn = new Button(this);
btn.setText("нажми");
GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();
 // кнопка помещается в нулевой столбец и растягивается на 2 столбца
layoutParams.columnSpec = GridLayout.spec(0,2);
 // кнопка помещается во вторую строку и растягивается на 1 строку
layoutParams.rowSpec = GridLayout.spec(1,1);
layoutParams.leftMargin=5;
layoutParams.rightMargin=5;
layoutParams.topMargin=4;
layoutParams.bottomMargin=4;
layoutParams.width = GridLayout.LayoutParams.MATCH_PARENT;
layoutParams.height = GridLayout.LayoutParams.WRAP_CONTENT;
gridLayout.addView(btn, layoutParams);

Наприклад, реалізуємо в коді другий приклад із цієї статті:

package com.example.viewapp;
 
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.Gravity;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridLayout;
import android.widget.LinearLayout;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        GridLayout gridLayout = new GridLayout( this);
 
        // количество строк
        gridLayout.setRowCount(3);
        // количество столбцов
        gridLayout.setColumnCount(3);
 
        for(int i = 1; i <=3; i++){
            Button btn = new Button(this);
            btn.setText(String.valueOf(i));
            gridLayout.addView(btn);
        }
 
        Button btn4 = new Button(this);
        btn4.setText("4");
        GridLayout.LayoutParams layoutParams4 = new GridLayout.LayoutParams();
        layoutParams4.columnSpec = GridLayout.spec(0,2);
        layoutParams4.width = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 180, getResources().getDisplayMetrics());
        gridLayout.addView(btn4, layoutParams4);
 
 
        Button btn5 = new Button(this);
        btn5.setText("5");
        GridLayout.LayoutParams layoutParams5 = new GridLayout.LayoutParams();
        layoutParams5.rowSpec = GridLayout.spec(1,2);
        layoutParams5.height = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics());
        gridLayout.addView(btn5, layoutParams5);
 
        Button btn6 = new Button(this);
        btn6.setText("6");
        Button btn7 = new Button(this);
        btn7.setText("7");
        gridLayout.addView(btn6);
        gridLayout.addView(btn7);
         
        setContentView(gridLayout);
    }
}
Edit this page on GitHub
Table of Contents