Створення графічного інтерфейсу в Android Studio

Огляд

Під час створення нового проєкту в Android Studio за замовчуванням генерується простий застосунок, який відображає текст "Hello Android". Розглянемо, як формується цей інтерфейс і як можна його змінити.

Клас MainActivity

Виконання застосунку починається з класу MainActivity, який зазвичай виглядає так:

package com.example.helloapp;

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

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Кожен окремий екран або сторінка в додатку описується таким поняттям як activity. У літературі можуть використовуватися різні терміни: екран, сторінка, активність. У цьому випадку я буду використовувати поняття «activity». Так ось, якщо ми запустимо застосунок на пристрої, то на екрані ми, по суті, побачимо певну activity, яка представляє цей інтерфейс.

Клас MainActivity успадковує AppCompatActivity, що представляє окремий екран застосунку. Метод onCreate() викликається під час створення активності та встановлює макет інтерфейсу за допомогою setContentView(), передаючи ресурс R.layout.activity_main.

setContentView(R.layout.activity_main);

Файл activity_main.xml

Ресурс R.layout.activity_main посилається на файл activity_main.xml, розташований у папці res/layout. Цей файл визначає графічний інтерфейс у форматі XML. В Android Studio можна редагувати його в графічному режимі або безпосередньо в коді. Перемикання між режимами здійснюється за допомогою кнопок Code та Design над редактором.

Структура activity_main.xml

За замовчуванням, файл activity_main.xml містить наступну розмітку:

<?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!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Основним контейнером є ConstraintLayout, який забезпечує гнучке розташування елементів. Він містить елемент TextView, що відображає текст "Hello World!". Параметри layout_constraint... визначають позиціонування TextView відносно батьківського контейнера.

Налаштування інтерфейсу

Для зміни тексту, що відображається, можна відредагувати властивість android:text у TextView:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Вітаємо у світі Android!"
    ... />

Кожен простір імен задається таким чином: xmlns:префікс=«назва_ресурсу». Наприклад, у

xmlns:android="http://schemas.android.com/apk/res/android"

Назва ресурсу (або URI - Uniform Resource Indicator) - "http://schemas.android.com/apk/res/android". І цей ресурс зіставляється з префіксом android (xmlns:android).

Навіщо ці простори імен потрібні? Кожен ресурс або URI визначає деяку функціональність, яка використовується в застосунку, наприклад, надають теги та атрибути, які необхідні для побудови застосунку.

• xmlns:android="http://schemas.android.com/apk/res/android": містить основні атрибути, які надаються платформою Android, застосовуються в елементах керування та визначають їхні візуальні властивості (наприклад, розмір, позиціонування)
• xmlns:app="http://schemas.android.com/apk/res-auto": містить атрибути, що визначені в межах додатка
• xmlns:tools="http://schemas.android.com/tools": застосовується для роботи з режимі дизайнера в Android Studio

І щоб спростити роботу з цими ресурсами, застосовуються префікси. Наприклад, далі ми бачимо:

<ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

Атрибут tools:context визначає, який клас activity (екрана додатка) пов'язаний із поточним визначенням інтерфейсу. У цьому випадку це клас MainActivity. Це дає змогу використовувати в Android Studio різні можливості в режимі дизайнера, які залежать від класу activity.

TextView

Текстове поле встановлює текст за допомогою атрибута android:text.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

• android:layout_width встановлює ширину віджета. Значення wrap_content задає для віджета величину, достатню для відображення в контейнері.
• android:layout_height встановлює висоту віджета. Значення wrap_content аналогічно встановленню ширини задає для віджета висоту, достатню для відображення в контейнері
• android:text встановлює текст, який буде виводитися в TextView (у даному випадку це рядок "Hello World!")
• app:layout_constraintLeft_toLeftOf="parent": вказує, що ліва межа елемента буде вирівнюватися по лівій стороні контейнера ConstraintLayout
• Зверніть увагу, що цей атрибут визначено в просторі імен із префіксом app, тобто в "http://schemas.android.com/apk/res-auto".
• app:layout_constraintTop_toTopOf="parent": вказує, що верхня межа елемента вирівнюватиметься по верхній стороні контейнера ConstraintLayout
• app:layout_constraintRight_toRightOf="parent": вказує, що права межа елемента буде вирівнюватися по правій стороні контейнера ConstraintLayout
• app:layout_constraintBottom_toBottomOf="parent": вказує, що нижня межа елемента вирівнюватиметься по нижній стороні контейнера ConstraintLayout