Ширина та висота елементів

Усі візуальні елементи, які ми використовуємо в додатку, зазвичай впорядковуються на екрані за допомогою контейнерів. В Android такими контейнерами є класи, як-от RelativeLayout, LinearLayout, GridLayout, TableLayout, ConstraintLayout, FrameLayout. Усі вони по-різному розташовують елементи та керують ними, але є деякі загальні моменти при компонуванні візуальних компонентів, які ми зараз розглянемо.

Для організації елементів усередині контейнера використовуються параметри розмітки. Для їхнього задання у файлі XML застосовуються атрибути, які починаються з префікса layout_. Зокрема, до таких параметрів належать атрибути layout_height та layout_width, які використовуються для встановлення розмірів і можуть приймати одну з наступних опцій:

Розтягнення на всю ширину або висоту контейнера за допомогою значення match_parent (для всіх контейнерів, окрім ConstraintLayout) або 0dp (для ConstraintLayout).
Розтягнення елемента до тих меж, які достатні, щоб вмістити весь його вміст, за допомогою значення wrap_content.
Точні розміри елемента, наприклад, 96dp.

match_parent

Встановлення значення match_parent дозволяє розтягнути елемент на всю ширину або висоту контейнера. Варто зазначити, що це значення застосовується до всіх контейнерів, окрім ConstraintLayout. Наприклад, розтягнемо елемент TextView на всю ширину та висоту контейнера LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="#e0e0e0" />

</LinearLayout>

Контейнер найвищого рівня, у цьому випадку LinearLayout, для висоти та ширини має значення match_parent, тобто він заповнюватиме всю область для activity — зазвичай, увесь екран.

І TextView також приймає подібні атрибути. Значення android:layout_width="match_parent" забезпечує розтягнення по ширині, а android:layout_height="match_parent" — по вертикалі. Для наочності в TextView застосовано атрибут android:background, який представляє фон і в цьому випадку зафарбовує елемент у колір #e0e0e0, завдяки чому ми можемо побачити займану ним область.

Висота та ширина match_parent в Android

Слід враховувати, що значення match_parent можна застосовувати майже в усіх вбудованих контейнерах, таких як LinearLayout або RelativeLayout, та їхніх елементах. Однак match_parent не рекомендується застосовувати до елементів усередині ConstraintLayout. Замість match_parent у ConstraintLayout можна використовувати значення 0dp, щоб розтягнути елемент по горизонталі або вертикалі:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="#e0e0e0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Варто зазначити, що ConstraintLayout сам також розтягується по ширині та висоті екрана за допомогою значення match_parent в атрибутах layout_width та android:layout_height, але до вкладених елементів це значення не рекомендується застосовувати.

Оскільки ConstraintLayout має деякі особливості при встановленні розмірів, то робота з розмірами елементів саме в ConstraintLayout розкрита більш детально в одній із наступних тем.

wrap_content

Значення wrap_content встановлює ті значення для ширини або висоти, які необхідні, щоб розмістити на екрані вміст елемента:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="#e0e0e0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

У цьому випадку TextView матиме такі розміри, які необхідні для відображення тексту "Hello World!". Тобто ширина та висота елемента будуть відповідати розмірам його вмісту.

Висота та ширина wrap_content в Android

Встановлення точних значень

Крім match_parent та wrap_content, можна встановлювати точні розміри елементів, використовуючи різні одиниці вимірювання, такі як dp, sp, px тощо.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <TextView
        android:layout_height="90dp"
        android:layout_width="150dp"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="#e0e0e0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Встановлення висоти та довжини в Android Studio Крім того, можна комбінувати кілька значень, наприклад, розтягнути по ширині вмісту і встановити точні значення для висоти:

<TextView
        android:layout_height="80dp"
        android:layout_width="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="#e0e0e0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
/>

Якщо для встановлення ширини та довжини використовується значення wrap_content, то ми можемо додатково обмежити мінімальні та максимальні значення за допомогою атрибутів minWidth/maxWidth і minHeight/maxHeight:

<TextView
        android:minWidth="200dp"
        android:maxWidth="250dp"
        android:minHeight="100dp"
        android:maxHeight="200dp"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="#e0e0e0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
/>

У цьому разі ширина TextView буде такою, яка достатня для вміщення тексту, але не більшою за значення maxWidth і не меншою за значення minWidth. Те ж саме для встановлення висоти.

Програмне встановлення ширини та висоти

Окрім встановлення ширини та висоти елементів у файлі розмітки XML, ці параметри можна задавати програмно. Для цього використовується клас ViewGroup.LayoutParams та його похідні, залежно від типу контейнера. Наприклад, для LinearLayout використовується клас LinearLayout.LayoutParams, для RelativeLayout — RelativeLayout.LayoutParams тощо.

Приклад

Припустимо, ми маємо такий файл розмітки:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</LinearLayout>

У цьому контейнері ми створимо TextView та встановимо для нього ширину та висоту програмно.

LinearLayout layout = findViewById(R.id.linearLayout);

// Створюємо новий TextView
TextView textView = new TextView(this);
textView.setText("Програмно заданий текст");

// Встановлюємо розміри
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,  // ширина
    LinearLayout.LayoutParams.WRAP_CONTENT   // висота
);
textView.setLayoutParams(layoutParams);

// Додаємо TextView до контейнера
layout.addView(textView);

Опис коду

LinearLayout.LayoutParams.MATCH_PARENT — ширина елемента буде дорівнювати ширині контейнера.
LinearLayout.LayoutParams.WRAP_CONTENT — висота елемента буде відповідати розмірам його вмісту.
layout.addView(textView) — додаємо TextView до контейнера.

Таким чином, параметри ширини та висоти елементів можна динамічно змінювати під час виконання програми.

Наприклад, щоб встановити точні розміри програмно, можна скористатися методом setLayoutParams із конвертацією одиниць:

int widthInDp = 100;
int heightInDp = 50;

// Конвертуємо dp у пікселі
int widthInPx = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, widthInDp, getResources().getDisplayMetrics());
int heightInPx = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, heightInDp, getResources().getDisplayMetrics());

// Встановлюємо параметри
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(widthInPx, heightInPx);
textView.setLayoutParams(layoutParams);

Використання правильних одиниць вимірювання гарантує, що ваш інтерфейс залишатиметься адаптивним на пристроях із різною щільністю пікселів.

Уникайте використання абсолютних пікселів (px), якщо ваш додаток має працювати на різних пристроях. Використовуйте dp або sp для забезпечення адаптивності.

Важливе попередження!

Edit this page on GitHub

Lesson1Визначення розмірів

Lesson1Внутрішні та зовнішні відступи

Table of Contents

match_parent
wrap_content
Встановлення точних значень
Програмне встановлення ширини та висоти
- Приклад
- Опис коду