Swift Academy · leksjon

Høyre-til-venstre og layoutretning

Støtt RTL-språk og speilvendte layouter.

Leksjon 4 av 413 trinn

Høyre-til-venstre og layoutretning er en gratis leksjon i Swift Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Swift Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Språk som leses fra høyre mot venstre

Arabisk, hebraisk, persisk og urdu skrives fra høyre mot venstre (RTL). For disse brukerne bør hele grensesnittet speilvendes: tilbakeknapper i navigasjonen peker mot høyre, lister justeres mot høyre kant, og fremdriften går fra høyre mot venstre. Støtte for RTL er en sentral del av internasjonalisering.

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

Leading og trailing, ikke venstre og høyre

Tommelfingerregelen er å utforme grensesnittet med leading og trailing i stedet for venstre og høyre. Leading er der lesingen begynner, til venstre på engelsk og til høyre på arabisk. Når du bruker leading/trailing, speilvender systemet layouten automatisk i RTL.

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

Lese layoutDirection

SwiftUI gir tilgang til gjeldende retning gjennom miljøverdien layoutDirection, som enten er .leftToRight eller .rightToLeft. Les den når du trenger retningsavhengig logikk, for eksempel når du skal velge en chevron-ressurs.

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

Speilvende SF Symbols og bilder

Mange SF Symbols speilvendes automatisk. For egendefinerte bilder med retning angir du at de skal vendes med layoutretningen, slik at en pil som peker fremover, fortsatt peker fremover i RTL. Modifikatoren flipsForRightToLeftLayoutDirection styrer dette.

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

Tvinge en retning

Av og til må et underordnet visningsområde beholde en fast retning – for eksempel et telefonnummer eller et venstre-til-høyre-kodeutdrag i en RTL-layout. Overstyr dette med modifikatoren environment(\.layoutDirection, _) på bare dette deltreet.

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

Tekstjustering og multilineTextAlignment

Bruk også .leading og .trailing for tekstjustering. Et avsnitt som er justert med .leading, legges automatisk inntil høyre kant på arabisk. Unngå .left/.right, som aldri speilvendes.

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

Toveis tekst

RTL-avsnitt inneholder ofte LTR-sekvenser, for eksempel URL-er, tall og engelske merkenavn. Unicode-algoritmen for toveis tekst håndterer rekkefølgen, men du kan omslutte tvetydige sekvenser med retningsisolerende tegn for å hindre at de blandes visuelt.

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

Semantisk innhold for visninger som ikke skal speilvendes

Enkelte kontroller – medieavspillingsknapper og tidslinjer – bør IKKE speilvendes fordi betydningen deres er fysisk, ikke basert på leseretningen. UIKit-verdien semanticContentAttribute (.playback, .spatial, .forceLeftToRight) forteller systemet når det skal beholde en fast retning.

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

Teste RTL uten å oversette

Du trenger ikke en arabisk oversettelse for å teste speilvending. Kjør appen med Right-to-Left Pseudolanguage i app-språkinnstillingen for scheme. Grensesnittet speilvendes med de eksisterende strengene, slik at du umiddelbart kan oppdage feil med hardkodet .left/.right.

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

Vanlige RTL-feil

Se etter disse:

Hardkodet justering eller innvendig marg med .left/.right.
Visninger som er plassert manuelt ved hjelp av faste x-forskyvninger.
Egendefinerte bilder med retning som ikke speilvendes.
Tilbake-chevrons eller skyveknapper som peker feil vei.
Sammenkjedede toveis tekststrenger som blir visuelt forvrengt.

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

En RTL-klar rad

En godt utformet rad bruker leading/trailing gjennomgående, lar symboler speilvendes og tvinger bare retningen der semantikken krever det. En slik visning trenger ingen endringer for å se riktig ut på både engelsk og arabisk.

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

Hurtigsjekk

Husk hovedprinsippet for RTL-sikker layout.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært å støtte språk som leses fra høyre mot venstre:

Utform grensesnittet med leading/trailing, aldri venstre/høyre.
Les miljøet layoutDirection for retningsavhengig logikk.
Speilvend bilder med retning, og overstyr retningen for faste deltrær som kode eller telefonnumre.
Bruk semanticContentAttribute for avspillings- og romlige kontroller som ikke skal speilvendes.
Test med RTL-pseudispråket før lansering.

Gratis å komme i gang

Lær deg Swift med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 122
Leksjoner: 409

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Høyre-til-venstre og layoutretning» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Swift Academy, inkludert «Høyre-til-venstre og layoutretning», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Høyre-til-venstre og layoutretning»?

Støtt RTL-språk og speilvendte layouter. Du øver på Swift Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Swift Academy?

Ingen tidligere erfaring er nødvendig. Swift Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Høyre-til-venstre og layoutretning»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Swift Academy-leksjonen?

Ja. Alle Swift Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Swift Academy