Вступ до створення інтерфейсу

Графічний інтерфейс користувача в Android складається з ієрархії об'єктів android.view.View та android.view.ViewGroup. Кожен об'єкт ViewGroup є контейнером, який містить та впорядковує дочірні об'єкти View. До контейнерів належать такі елементи, як RelativeLayout, LinearLayout, GridLayout, ConstraintLayout та інші.

Прості об'єкти View представляють елементи керування та інші віджети, наприклад, кнопки, текстові поля тощо, через які користувач взаємодіє з програмою.

Більшість візуальних елементів, що наслідуються від класу View, такі як кнопки, текстові поля та інші, розташовані в пакеті android.widget.

Підходи до визначення інтерфейсу

Існує три стратегії для визначення візуального інтерфейсу:

1. Програмне створення елементів керування в коді Java.
2. Оголошення елементів інтерфейсу в XML.
3. Поєднання обох способів: базові елементи розмітки визначаються в XML, а інші додаються під час виконання програми.

Спочатку розглянемо першу стратегію — визначення інтерфейсу в коді Java.

Створення інтерфейсу в коді Java

Для роботи з візуальними елементами створимо новий проєкт. Як шаблон проєкту оберемо Empty Views Activity.

Назвемо новий проєкт ViewsApp.

Після створення проєкту нас цікавитимуть два основні файли для створення візуального інтерфейсу: клас MainActivity та файл activity_main.xml, який визначає інтерфейс для цієї activity.

Визначимо в класі MainActivity найпростіший інтерфейс:

package com.example.viewapp;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // створення TextView
        TextView textView = new TextView(this);
        // встановлення тексту в TextView
        textView.setText("Hello Android!");
        // встановлення розміру тексту
        textView.setTextSize(28);
        // встановлення візуального інтерфейсу для activity
        setContentView(textView);
    }
}

При створенні віджетів у коді Java використовується їхній конструктор, до якого передається контекст цього віджета, тобто об'єкт android.content.Context, яким у даному випадку є поточний клас MainActivity.

TextView textView = new TextView(this);

У цьому прикладі весь інтерфейс представлений елементом TextView, призначеним для виведення тексту. За допомогою методів, які зазвичай починаються на set, можна встановити різні властивості TextView. Наприклад, метод setText() встановлює текст у полі, а setTextSize() задає розмір шрифту.

Для встановлення елемента як інтерфейсу застосунку в коді Activity викликається метод setContentView(), до якого передається візуальний елемент.

EdgeToEdge.enable(this); — це метод, який часто використовується в Android для активації "Edge-to-Edge" режиму інтерфейсу користувача. Цей режим дозволяє застосунку займати весь екран пристрою, включаючи області біля вирізу (notch), статус-бару та навігаційної панелі.

Такий підхід використовується в сучасних Android-додатках для покращення візуального сприйняття на екранах з вирізами або округлими кутами.

this — це посилання на поточний контекст (зазвичай Activity або Fragment), для якого активується режим.

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

Код належить до роботи з віконними вставками (Window Insets) в Android і налаштовує відступи для View, щоб враховувати системні елементи, такі як статус-бар, навігаційна панель, або інші системні компоненти. Це забезпечує правильне відображення вмісту на екрані, навіть якщо він розтягується до країв (Edge-to-Edge режим).

Якщо запустити застосунок, отримаємо наступний візуальний інтерфейс:

Аналогічним чином можна створювати складніші інтерфейси. Наприклад, TextView, вкладений у ConstraintLayout:

package com.example.viewapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ConstraintLayout constraintLayout = new ConstraintLayout(this);
        TextView textView = new TextView(this);
        textView.setText("Hello Android!");
        textView.setTextSize(28);
        // встановлення параметрів розмірів та розташування елемента
        ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(
                ConstraintLayout.LayoutParams.WRAP_CONTENT,
                ConstraintLayout.LayoutParams.WRAP_CONTENT
        );
        // вирівнювання по лівому краю ConstraintLayout
        layoutParams.leftToLeft = ConstraintLayout.LayoutParams.PARENT_ID;
        // вирівнювання по верхній межі ConstraintLayout
        layoutParams.topToTop = ConstraintLayout.LayoutParams.PARENT_ID;
        textView.setLayoutParams(layoutParams);
        constraintLayout.addView(textView);
        setContentView(constraintLayout);
    }
}

У цьому випадку ми створюємо ConstraintLayout як контейнер для TextView. Після створення TextView встановлюємо його текст та розмір шрифту. Потім створюємо об'єкт ConstraintLayout.LayoutParams для визначення параметрів розміру та розташування TextView всередині ConstraintLayout. Встановлюємо вирівнювання по лівому краю та верхній межі контейнера, додаємо TextView до ConstraintLayout та встановлюємо ConstraintLayout як вміст Activity за допомогою setContentView().

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

• Створення об'єкта ViewGroup.LayoutParams і встановлення його властивостей
• Передача об'єкта ViewGroup.LayoutParams у метод setLayoutParams() елемента
• Передача елемента для додавання в метод addView() об'єкта контейнера

Таким чином, ми можемо програмно створювати та налаштовувати інтерфейс користувача без використання XML-розмітки, що може бути корисним у деяких випадках, наприклад, для динамічного створення інтерфейсу під час виконання програми.