Android Academy · Урок

Интервалы с помощью Padding

Используйте Modifier для задания отступов.

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

Что такое Padding?

Padding — это пустое пространство вокруг содержимого компонуемого элемента. Оно отодвигает содержимое от краёв, чтобы оно не выглядело тесно.

В Compose отступы добавляются с помощью Modifier.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

Единица dp

Размеры отступов задаются в dp — пикселях, не зависящих от плотности экрана. dp выглядит одинаково по физическому размеру на любом экране.

Напишите число, а затем .dp, например 8.dp или 24.dp.

Modifier.padding(8.dp)

Что такое Modifier?

Modifier описывает внешний вид и поведение компонуемого элемента: его размер, отступы, фон и многое другое.

Модификаторы создаются последовательным объединением функций с помощью точек.

Modifier
    .padding(16.dp)
    .background(Color.Yellow)

Отступы со всех сторон

Вызов padding(16.dp) с одним значением добавляет одинаковое пространство со всех четырёх сторон: сверху, снизу, в начале и в конце.

Это самый быстрый способ добавить содержимому необходимое свободное пространство.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Горизонтальные и вертикальные отступы

Вы можете задавать стороны отдельно с помощью параметров horizontal и vertical.

Горизонтальный отступ охватывает начало и конец, а вертикальный — верх и низ.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

Отступ с одной стороны

Чтобы настроить один край, укажите его: start, top, end или bottom.

Так вы сможете точно настроить расстояние именно там, где это необходимо.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

Порядок имеет значение

Порядок модификаторов меняет результат. Если поставить отступ перед фоном, область отступа не будет закрашена; если поставить его после фона, фон заполнит и область отступа.

Читайте модификаторы сверху вниз, как слои.

Modifier
    .background(Color.Cyan)
    .padding(16.dp)

Расстояние между элементами

Внутри Column или Row используйте Arrangement.spacedBy, чтобы автоматически добавить одинаковые промежутки между дочерними элементами.

Это аккуратнее, чем вручную добавлять отступ каждому дочернему элементу.

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    Text("One")
    Text("Two")
}

Spacer для промежутков

Spacer — это пустой компонуемый элемент, который раздвигает элементы. Задайте ему размер с помощью Modifier.

Он удобен для создания фиксированного промежутка между двумя элементами.

Column {
    Text("Top")
    Spacer(Modifier.height(16.dp))
    Text("Bottom")
}

Padding и margin

В Compose нет отдельного margin. Внешнее пространство создаётся размещением padding раньше в цепочке модификаторов — перед размером или фоном.

Таким образом, один инструмент, padding, отвечает и за внутренние, и за внешние отступы — в зависимости от порядка.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

Единообразные отступы

В хороших приложениях используется несколько повторяющихся значений, например 4, 8, 16 и 24 dp. Благодаря этому макеты выглядят аккуратно и предсказуемо.

Избегайте случайных чисел — выбирайте значения из небольшой шкалы.

Modifier.padding(16.dp)

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

Проверьте свои знания об отступах.

Итоги

Вы узнали, что padding добавляет пространство вокруг содержимого с помощью Modifier.padding и значений в dp. Можно добавлять отступы со всех сторон, горизонтальные и вертикальные отступы или отступ с одного края.

Порядок модификаторов имеет значение, а Arrangement.spacedBy и Spacer помогают создавать промежутки между элементами.

Далее вы изучите цвета и MaterialTheme.

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

Урок «Интервалы с помощью Padding» бесплатный?

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

Чему я научусь в уроке «Интервалы с помощью Padding»?

Используйте Modifier для задания отступов. Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Интервалы с помощью Padding»?

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

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

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

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

← Назад к Android Academy