Swift Academy · Урок

Справа налево и направление компоновки

Поддерживайте языки RTL и зеркально отображаемые компоновки.

Урок 4 из 413 шагов

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

Языки с письмом справа налево

На арабском, иврите, персидском и урду пишут справа налево (RTL). Для таких пользователей весь интерфейс должен зеркально отражаться: кнопки возврата в навигации должны указывать вправо, списки — выравниваться по правому краю, а ход выполнения — идти справа налево. Поддержка RTL — важнейшая часть интернационализации.

// RTL locales include: ar, he, fa, ur
// The whole UI mirrors, not just the text.

Начальный и конечный, а не левый и правый

Главное правило: проектируйте интерфейс с начальным и конечным краями, а не с левым и правым. Начальный край — это место, откуда начинается чтение (слева в английском языке, справа в арабском). Если использовать начальный и конечный края, система автоматически зеркально отразит макет для RTL.

// SwiftUI uses leading/trailing automatically:
// HStack { Image(...); Text("Title") }
// .padding(.leading, 16)  // flips in RTL
let edge = "leading mirrors automatically"
_ = edge

Чтение layoutDirection

SwiftUI предоставляет текущее направление через значение environment layoutDirection, которое может быть .leftToRight или .rightToLeft. Читайте его, когда логика зависит от направления, например при выборе ресурса chevron.

// In a SwiftUI View:
// @Environment(\.layoutDirection) var direction
// let chevron = direction == .rightToLeft
//     ? "chevron.left" : "chevron.right"
let ltr = "leftToRight"
let rtl = "rightToLeft"
print(ltr, rtl)

Зеркальное отражение символов SF и изображений

Многие символы SF зеркально отражаются автоматически. Для пользовательских изображений, имеющих направление, укажите, что их нужно отражать вместе с направлением макета, чтобы стрелка, указывающая вперёд, продолжала указывать вперёд в RTL. Это управляется модификатором flipsForRightToLeftLayoutDirection.

// SwiftUI:
// Image("forwardArrow")
//   .flipsForRightToLeftLayoutDirection(true)
let shouldFlip = true
_ = shouldFlip

Принудительное задание направления

Иногда вложенное представление должно сохранять фиксированное направление — например, номер телефона или фрагмент кода слева направо внутри макета RTL. Переопределите направление только для этого поддерева с помощью модификатора environment(\.layoutDirection, _).

// Keep a code block LTR even in an RTL app:
// CodeView(snippet)
//   .environment(\.layoutDirection, .leftToRight)
let forced = "leftToRight subtree"
_ = forced

Выравнивание текста и multilineTextAlignment

Для выравнивания текста также используйте начальный и конечный края. Абзац, выровненный по начальному краю с помощью .leading, автоматически прижимается к правому краю в арабском языке. Не используйте .left/.right: они никогда не отражаются.

// Text(longBody)
//   .multilineTextAlignment(.leading) // flips in RTL
let alignment = "leading flips, left does not"
_ = alignment

Двунаправленный текст

В абзацах RTL часто встречаются фрагменты LTR — URL, числа и английские названия брендов. Алгоритм двунаправленного текста Unicode обрабатывает их порядок, но неоднозначные фрагменты можно окружить управляющими символами изоляции направления, чтобы предотвратить визуальное перемешивание.

import Foundation
// First-strong isolate keeps an embedded run intact
let isolated = "\u{2068}example.com\u{2069}"
print(isolated.count > 0)

Семантика содержимого для неотражаемых представлений

Некоторые элементы управления — кнопки управления воспроизведением и шкалы времени — не должны зеркально отражаться, потому что их смысл связан с физическим направлением, а не с направлением чтения. Атрибут UIKit semanticContentAttribute (.playback, .spatial, .forceLeftToRight) сообщает системе, когда нужно сохранять фиксированное направление.

// UIKit example:
// playbackBar.semanticContentAttribute = .playback
// mapOverlay.semanticContentAttribute = .spatial
let keepFixed = "playback / spatial do not mirror"
_ = keepFixed

Проверка RTL без перевода

Для проверки зеркального отражения перевод на арабский не нужен. Запустите приложение с псевдоязыком RTL в настройках языка приложения схемы. Интерфейс отразится, используя существующие строки, и вы сразу заметите ошибки из-за жёстко заданных .left/.right.

// Edit Scheme > Run > Options >
//   App Language: Right-to-Left Pseudolanguage
let test = "mirror without real translations"
_ = test

Распространённые ошибки RTL

Проверьте следующее:

Жёстко заданное выравнивание или отступы .left/.right.
Представления, размещённые вручную с фиксированными смещениями по оси x.
Пользовательские изображения с направлением, которые не отражаются.
Шевроны возврата или ползунки, указывающие в неправильную сторону.
Объединённые двунаправленные строки, в которых нарушается порядок.

// Replace fixed offsets with leading/trailing layout
// so AutoLayout / SwiftUI can mirror them.
let rule = "prefer leading/trailing everywhere"
_ = rule

Строка, готовая к RTL

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

// HStack {
//   Image(systemName: "star")
//   Text("Favorite")
//   Spacer()
//   Image(systemName: "chevron.forward") // mirrors
// }
// .padding(.horizontal, 16)
let ready = "row mirrors automatically"
_ = ready

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

Вспомните основной принцип макета, безопасного для RTL.

Ответь в интерактивном уроке

Итоги

Вы научились поддерживать языки с письмом справа налево:

Проектируйте интерфейс с начальным и конечным краями, никогда не используйте левый и правый.
Читайте окружение layoutDirection для логики, зависящей от направления.
Отражайте изображения с направлением; переопределяйте направление для фиксированных поддеревьев, например с кодом или номерами телефонов.
Используйте semanticContentAttribute для элементов управления воспроизведением и пространственным перемещением, которые не должны отражаться.
Перед выпуском проверяйте приложение с помощью псевдоязыка RTL.

Можно начать бесплатно

Изучай Swift с ИИ-репетитором — бесплатно

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

Курсы: 122
Уроки: 409

Начать учиться бесплатно Посмотреть полный курс

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

Урок «Справа налево и направление компоновки» бесплатный?

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

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

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

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

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

Сколько времени занимает урок «Справа налево и направление компоновки»?

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

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

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

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

← Назад к Swift Academy