Основы создания интерфейса

16.01.2025

Графический интерфейс пользователя (GUI) в Android представляет собой иерархию объектов android.view.View и android.view.ViewGroup. Каждый объект ViewGroup является контейнером, который организует дочерние объекты View. К контейнерам относятся такие элементы, как RelativeLayout, LinearLayout, GridLayout, ConstraintLayout и другие.

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

Иерархия визуальных компонентов

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

Три стратегии определения интерфейса

Создание элементов управления программно в коде Java.
Объявление элементов интерфейса в XML.
Комбинированный подход: базовые элементы разметки определяются в XML, а остальные добавляются во время выполнения.

Начнем с первой стратегии — создания интерфейса в коде Java.

Создание интерфейса в коде Java

Создадим новый проект в Android Studio. В качестве шаблона выберем Empty Views Activity.

Назовем проект ViewsApp.

После создания проекта основными файлами для работы с визуальным интерфейсом будут:

MainActivity (Java-код активности).
activity_main.xml (разметка активности).

Пример: простой интерфейс

Определим в классе 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 METANIT.COM!");
        // установка высоты текста
        textView.setTextSize(28);
        // установка визуального интерфейса для activity
        setContentView(textView);
    }
}

Разбор кода

Создание виджета:
```
TextView textView = new TextView(this);
```
Конструктор виджета принимает контекст — объект android.content.Context, которым обычно является текущий класс MainActivity.
Установка свойств:
```
textView.setText("Hello METANIT.COM!");
textView.setTextSize(28);
```
Методы, начинающиеся с set, позволяют настроить свойства виджета. Например, setText() задает текст, а setTextSize() — размер шрифта.
Установка интерфейса:
```
setContentView(textView);
```
Метод setContentView() принимает объект View, который будет отображаться в интерфейсе.

Пример: более сложный интерфейс

Добавим 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 constraintLayout = new ConstraintLayout(this);
        // создание TextView
        TextView textView = new TextView(this);
        textView.setText("Hello METANIT.COM!");
        textView.setTextSize(28);

        // параметры размещения TextView
        ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(
                ConstraintLayout.LayoutParams.WRAP_CONTENT,
                ConstraintLayout.LayoutParams.WRAP_CONTENT
        );
        layoutParams.leftToLeft = ConstraintLayout.LayoutParams.PARENT_ID;
        layoutParams.topToTop = ConstraintLayout.LayoutParams.PARENT_ID;
        textView.setLayoutParams(layoutParams);

        // добавление TextView в ConstraintLayout
        constraintLayout.addView(textView);

        // установка ConstraintLayout в качестве интерфейса
        setContentView(constraintLayout);
    }
}

Объяснение кода

Создание LayoutParams:
```
ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(
    ConstraintLayout.LayoutParams.WRAP_CONTENT,
    ConstraintLayout.LayoutParams.WRAP_CONTENT
);
```
Устанавливается ширина и высота элемента. Константа WRAP_CONTENT означает, что размеры виджета зависят от его содержимого.
Выравнивание элемента:
```
layoutParams.leftToLeft = ConstraintLayout.LayoutParams.PARENT_ID;
layoutParams.topToTop = ConstraintLayout.LayoutParams.PARENT_ID;
```
Позиционирование относительно границ контейнера (PARENT_ID).
Добавление элемента в контейнер:
```
constraintLayout.addView(textView);
```
Установка интерфейса:
```
setContentView(constraintLayout);
```

Общие этапы добавления элементов в контейнеры

Создание объекта ViewGroup.LayoutParams и настройка его свойств.
Передача объекта LayoutParams методу setLayoutParams() элемента.
Добавление элемента в контейнер с помощью метода addView().

Хотя интерфейс можно создавать программно, более оптимальным способом является использование XML-файлов для описания визуального интерфейса. Это позволяет отделить логику приложения (Java-код) от его интерфейса (XML-разметка). В следующей теме рассмотрим этот подход.

PreviousСоздание графического интерфейса NextОпределение интерфейса в файле XML. Файлы layout

Last updated 4 months ago