0Pricing
Swift Academy · Lekcja

Kierunek od prawej do lewej i kierunek układu

Obsługa języków RTL i lustrzanych układów.

Kierunek od prawej do lewej i kierunek układu to bezpłatna lekcja Swift Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Swift Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Swift Academy zawiera 4 lekcji w sumie.

Języki pisane od prawej do lewej

Arabski, hebrajski, perski i urdu są zapisywane od prawej do lewej (RTL). W przypadku tych użytkowników cały interfejs powinien być odbiciem lustrzanym: przyciski nawigacji wstecz powinny wskazywać w prawo, listy powinny być wyrównane do prawej krawędzi, a postęp powinien przebiegać od prawej do lewej. Obsługa RTL jest podstawową częścią internacjonalizacji.

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

Leading i trailing zamiast left i right

Złota zasada brzmi: projektuj z użyciem leading i trailing, a nie left i right. Leading to strona, od której zaczyna się czytanie — lewa w języku angielskim, prawa w arabskim. Gdy używasz leading/trailing, system automatycznie odbija układ w trybie RTL.

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

Odczytywanie layoutDirection

SwiftUI udostępnia bieżący kierunek za pomocą wartości środowiskowej layoutDirection, która przyjmuje wartość .leftToRight albo .rightToLeft. Odczytaj ją, gdy potrzebujesz logiki zależnej od kierunku, na przykład do wyboru zasobu chevronu.

// 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)

Odbijanie SF Symbols i obrazów

Wiele symboli SF odbija się automatycznie. W przypadku niestandardowych obrazów kierunkowych oznacz je tak, aby były odwracane wraz z kierunkiem układu — dzięki temu strzałka wskazująca do przodu nadal wskazuje do przodu w trybie RTL. Modyfikator flipsForRightToLeftLayoutDirection steruje tym zachowaniem.

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

Wymuszanie kierunku

Czasami podwidok musi zachować stały kierunek — na przykład numer telefonu lub fragment kodu od lewej do prawej umieszczony w układzie RTL. Zastąp kierunek tylko dla tego poddrzewa za pomocą modyfikatora environment(\.layoutDirection, _).

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

Wyrównanie tekstu i multilineTextAlignment

Do wyrównywania tekstu również używaj .leading i .trailing. Akapit wyrównany za pomocą .leading automatycznie przylega do prawej krawędzi w języku arabskim. Unikaj .left/.right, ponieważ te wartości nigdy się nie odwracają.

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

Tekst dwukierunkowy

Akapity RTL często zawierają fragmenty LTR — adresy URL, liczby i angielskie nazwy marek. Algorytm dwukierunkowy Unicode obsługuje kolejność, ale niejednoznaczne fragmenty można otoczyć znakami izolującymi kierunek, aby zapobiec ich wizualnemu pomieszaniu.

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

Semantyczna zawartość widoków niepodlegających odbiciu

Niektóre elementy sterujące — przyciski sterowania multimediami i osie czasu — NIE powinny być odbijane, ponieważ ich znaczenie jest fizyczne, a nie związane z kierunkiem czytania. Atrybut UIKit semanticContentAttribute (.playback, .spatial, .forceLeftToRight) informuje system, kiedy należy zachować stały kierunek.

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

Testowanie RTL bez tłumaczenia

Do testowania odbicia lustrzanego nie potrzebujesz tłumaczenia na arabski. Uruchom aplikację z ustawionym w schemacie językiem aplikacji Right-to-Left Pseudolanguage. Interfejs zostanie odbity przy użyciu istniejących ciągów, dzięki czemu od razu wykryjesz błędy spowodowane wpisanymi na stałe wartościami .left/.right.

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

Typowe błędy RTL

Zwróć uwagę na następujące problemy:

  • Wpisane na stałe wyrównanie lub odstępy .left/.right.
  • Widoki pozycjonowane ręcznie za pomocą stałych przesunięć x.
  • Niestandardowe obrazy kierunkowe, które nie odwracają się poprawnie.
  • Chevrons w przyciskach wstecz lub suwaki wskazujące niewłaściwy kierunek.
  • Połączone ciągi dwukierunkowe, których kolejność zostaje pomieszana.
// Replace fixed offsets with leading/trailing layout
// so AutoLayout / SwiftUI can mirror them.
let rule = "prefer leading/trailing everywhere"
_ = rule

Wiersz gotowy na RTL

Dobrze zbudowany wiersz wszędzie korzysta z leading/trailing, pozwala symbolom się odwracać i wymusza kierunek tylko wtedy, gdy wymagają tego względy semantyczne. Taki widok nie wymaga żadnych zmian, aby poprawnie wyglądać zarówno po angielsku, jak i po arabsku.

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

Szybki test

Przypomnij sobie podstawową zasadę tworzenia układu bezpiecznego dla RTL.

Podsumowanie

Nauczyłeś się obsługi języków pisanych od prawej do lewej:

  • Projektuj z użyciem leading/trailing, nigdy left/right.
  • Odczytuj środowiskową wartość layoutDirection na potrzeby logiki zależnej od kierunku.
  • Odwracaj obrazy kierunkowe; dla stałych poddrzew, takich jak kod lub numery telefonów, nadpisuj kierunek.
  • Używaj semanticContentAttribute dla elementów sterujących odtwarzaniem i układem przestrzennym, które nie powinny być odbijane.
  • Przed wydaniem aplikacji testuj ją z pseudojęzykiem RTL.

Często zadawane pytania

Czy lekcja „Kierunek od prawej do lewej i kierunek układu” jest bezpłatna?

Tak — pełny tekst „Kierunek od prawej do lewej i kierunek układu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Swift Academy, przejdź na CoddyKit PRO. Kurs Swift Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Kierunek od prawej do lewej i kierunek układu”?

Obsługa języków RTL i lustrzanych układów. Ćwiczysz Swift Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Swift Academy?

Nie wymagamy żadnego doświadczenia. Swift Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Kierunek od prawej do lewej i kierunek układu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Swift Academy?

Tak. Każda lekcja Swift Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Katalogi String i zlokalizowane ciągi
  2. Liczba mnoga i Stringsdict
  3. Formatowanie zależne od ustawień regionalnych
  4. Kierunek od prawej do lewej i kierunek układu
← Powrót do Swift Academy