Android Academy · Урок

Макеты и представления

«Макеты и представления» — бесплатный урок Android Academy на CoddyKit. Это урок 3 из 7. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 7 уроков всего.

Создание интерфейсов с помощью XML

Пользовательские интерфейсы Android определяются в XML-файлах разметки, которые хранятся в res/layout/. Разметка описывает структуру и внешний вид экрана — какие представления отображаются и где.

Затем код Kotlin разворачивает эту разметку и взаимодействует с представлениями во время работы приложения.

Распространённые типы представлений

Наиболее часто используемые виджеты View:

TextView — отображает текст
EditText — поле для ввода текста
Кнопка — кнопка, которую можно нажать
ImageView — отображает изображение
CheckBox — переключатель включения и выключения
Switch — переключатель включения и выключения (Material)

ConstraintLayout

ConstraintLayout — рекомендуемый тип разметки для большинства экранов. Он позволяет размещать представления относительно друг друга или родительского элемента с помощью ограничений — например, соединяя опорные точки.

Плоская иерархия — вложенные разметки не нужны
Гибкость — поддерживает экраны любых размеров
Используется по умолчанию в новых проектах Android Studio

XML-разметка ConstraintLayout

TextView, выровненный по центру экрана в ConstraintLayout:

<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

LinearLayout размещает представления в одной строке или одном столбце:

android:orientation="vertical" — размещать представления сверху вниз
android:orientation="horizontal" — размещать представления рядом друг с другом
android:layout_weight — пропорционально распределять оставшееся пространство

Это простой и предсказуемый вариант, но избегайте глубокой вложенности.

Основные атрибуты разметки

У каждого View есть следующие важные атрибуты:

layout_width / layout_height: match_parent, wrap_content или фиксированное значение в dp
id: используется для обращения к представлению в Kotlin
margin: пространство за пределами представления
padding: пространство внутри представления

Используйте dp для размеров (пиксели, не зависящие от плотности), а sp — для размеров текста.

ScrollView

Если содержимое выше экрана, поместите его в ScrollView:

Может содержать только одного непосредственного потомка (обычно LinearLayout)
По умолчанию поддерживает вертикальную прокрутку
Для горизонтальной прокрутки используйте HorizontalScrollView

Для длинных динамических списков используйте RecyclerView — он эффективнее.

Поиск представлений в коде

Есть два способа обращаться к представлениям в коде Kotlin:

findViewById(R.id.tvTitle) — классический способ, возвращает представление по ID
ViewBinding — современный подход: создаёт класс привязки из XML и обеспечивает типобезопасный доступ ко всем представлениям

Настоятельно рекомендуется использовать ViewBinding — вы изучите его на следующем уроке.

Использование findViewById

Получение доступа к представлениям и их изменение из onCreate:

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

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvTitle = findViewById<TextView>(R.id.tvTitle)
        tvTitle.text = "Welcome!"
        tvTitle.textSize = 20f
    }
}

Быстрая проверка

Какую единицу измерения следует использовать для размера текста в разметке Android?

Повторение: разметки и представления

Теперь вы умеете создавать экраны Android:

Интерфейсы определяются в XML-файлах разметки в res/layout/
Распространённые представления: TextView, EditText, Button, ImageView
ConstraintLayout — гибкий, плоский и рекомендуемый
LinearLayout — простое размещение в строку или столбец
Используйте dp для размеров, а sp — для текста
Обращайтесь к представлениям в Kotlin с помощью findViewById

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

Часто задаваемые вопросы

Урок «Макеты и представления» бесплатный?

Да — полный текст урока «Макеты и представления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 7 уроков всего.

Чему я научусь в уроке «Макеты и представления»?

Проектируйте пользовательские интерфейсы с помощью XML-макетов. Используйте ConstraintLayout, LinearLayout и распространённые представления, такие как TextView, Button, ImageView и EditText. Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Android Academy?

Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 7.

Сколько времени занимает урок «Макеты и представления»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Android Academy?

Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Android Academy