Создание графического интерфейса

16.01.2024

В прошлой теме мы рассмотрели создание простого приложения, который предлагает Android Studio по умолчанию и которое просто выводит на экран строку Hello Android.

---

Тестирование приложения в Android Studio

Но почему у нас выводится именно эта строка? Почему у нас вообще создается именно такой визуальный интерфейс?

Выполнение приложения Android по умолчанию начинается с класса MainActivity, который по умолчанию открыт в Android Studio:

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".

При запуске приложения на устройстве на экране будет отображена определенная activity, представляющая данный интерфейс.

---

Разбор класса MainActivity

Класс MainActivity представляет обычный класс Java, структура которого выглядит следующим образом:

Определение пакета класса:

package com.example.helloapp;

Импорт классов из других пакетов:

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

Определение класса

public class MainActivity extends AppCompatActivity

Класс MainActivity наследуется от класса AppCompatActivity, который представляет отдельный экран (страницу) приложения или его визуальный интерфейс.

---

Метод onCreate()

По умолчанию MainActivity содержит метод onCreate(), в котором создается весь интерфейс приложения:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

Метод setContentView() определяет, какой именно визуальный интерфейс будет иметь MainActivity:

setContentView(R.layout.activity_main);

R.layout.activity_main представляет файл activity_main.xml из папки res/layout. Этот файл также открыт в Android Studio:

---

Файл activity_main.xml

Режим дизайнера в Android Studio

Android Studio позволяет работать с визуальным интерфейсом как в режиме кода, так и в графическом режиме. По умолчанию файл открыт в графическом режиме, где можно наглядно увидеть интерфейс приложения. Также можно добавлять элементы управления с панели инструментов, например кнопки или текстовые поля.

Для работы с кодом файла переключитесь в режим кода, нажав на кнопку Code над графическим представлением. Также доступен комбинированный режим Split (код + графический дизайнер).

---

Код файла 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

Весь интерфейс представлен элементом-контейнером ConstraintLayout:

<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">

---

Определение пространств имен XML:

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"

Описание пространств

• xmlns:android: Атрибуты платформы Android (например, размер, позиционирование элементов).

• xmlns:app: Атрибуты, определенные в рамках приложения.

• xmlns:tools: Атрибуты, используемые в режиме дизайнера Android Studio.

---

Атрибуты ConstraintLayout

android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"

• android:layout_width: Ширина контейнера (match_parent — растягивается по ширине экрана устройства).

• android:layout_height: Высота контейнера (match_parent — растягивается по высоте экрана устройства).

• tools:context: Класс activity, связанный с этим интерфейсом (в данном случае MainActivity).

---

Элемент TextView

Элемент 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: Отображаемый текст (в данном случае "Hello World!").

• app:layout_constraint*: Указывает границы выравнивания относительно контейнера (parent).

---

Итог

При запуске приложения сначала загружается класс MainActivity, который устанавливает разметку интерфейса из файла activity_main.xml. Поскольку в этой разметке указан элемент TextView, пользователь видит текст "Hello World!" на экране.