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

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

<figure><img src="https://3265881078-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdR5IPjwNgA9liNzewSpz%2Fuploads%2FBZN11qrz4tBBYkdg01mx%2Fimage.png?alt=media&#x26;token=ad147044-1769-4913-83b7-9b856366eeac" alt=""><figcaption></figcaption></figure>

***

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

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

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

```java
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, структура которого выглядит следующим образом:

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

```java
package com.example.helloapp;
```

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

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

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

```java
public class MainActivity extends AppCompatActivity
```

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

***

### **Метод onCreate()**

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

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

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

```java
setContentView(R.layout.activity_main);
```

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

<figure><img src="https://3265881078-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdR5IPjwNgA9liNzewSpz%2Fuploads%2FwsolCDK9js4O8UgEPyOE%2Fimage.png?alt=media&#x26;token=2fd76172-8b97-449f-ab2c-03531e4c725f" alt=""><figcaption></figcaption></figure>

***

## Файл activity\_main.xml

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

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

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

<figure><img src="https://3265881078-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdR5IPjwNgA9liNzewSpz%2Fuploads%2FMJSwHOaavwY0qO5Vraji%2Fimage.png?alt=media&#x26;token=0d1f732b-7d09-4c8c-bc21-6c605584974d" alt=""><figcaption></figcaption></figure>

***

### **Код файла activity\_main.xml**

```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`:

```xml
<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:**

```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**

```xml
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`.

```xml
<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!"` на экране.
