Swift Academy · Lektion

Höger-till-vänster och layout-riktning

Stöd RTL-språk och spegelvända layouter.

Lektion 4 av 413 steg

Höger-till-vänster och layout-riktning är en gratis lektion i Swift Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Swift Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Swift Academy innehåller totalt 4 lektioner.

Språk som läses från höger till vänster

Arabiska, hebreiska, persiska och urdu skrivs från höger till vänster (RTL). För dessa användare bör hela gränssnittet spegelvändas: navigeringens bakåtknappar ska peka åt höger, listor ska linjera mot högerkanten och förloppet ska gå från höger till vänster. Stöd för RTL är en central del av internationalisering.

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

Leading och trailing, inte vänster och höger

Grundregeln är att utforma med leading och trailing i stället för vänster och höger. Leading är där läsningen börjar (vänster på engelska, höger på arabiska). När du använder leading/trailing spegelvänder systemet layouten automatiskt i RTL.

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

Läsa av layoutDirection

SwiftUI exponerar den aktuella riktningen via miljövärdet layoutDirection, som är antingen .leftToRight eller .rightToLeft. Läs av det när du behöver riktningsberoende logik, till exempel när du väljer en chevron-resurs.

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

Spegelvända SF Symbols och bilder

Många SF Symbols spegelvänds automatiskt. För riktade anpassade bilder markerar du dem så att de vänds med layoutens riktning, så att en pil som pekar framåt fortsätter att peka framåt i RTL. Modifieraren flipsForRightToLeftLayoutDirection styr detta.

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

Tvinga en riktning

Ibland måste en undervy behålla en fast riktning – till exempel ett telefonnummer eller ett vänster-till-höger-kodexempel i en RTL-layout. Åsidosätt den med modifieraren environment(\.layoutDirection, _) på just det underträdet.

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

Textjustering och multilineTextAlignment

Använd .leading och .trailing även för textjustering. Ett stycke som justeras med .leading ligger automatiskt mot högerkanten på arabiska. Undvik .left/.right, eftersom de aldrig spegelvänds.

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

Dubbelriktad text

RTL-stycken innehåller ofta LTR-sekvenser (URL:er, tal och engelska varumärkesnamn). Unicode Bidirectional Algorithm hanterar ordningen, men du kan omge tvetydiga sekvenser med riktningsisolerande tecken för att förhindra visuell förvrängning.

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

Semantiskt innehåll för vyer som inte ska spegelvändas

Vissa kontroller – medieuppspelningsknappar, tidslinjer – bör INTE spegelvändas eftersom deras betydelse är fysisk, inte läsbaserad. UIKit:s semanticContentAttribute (.playback, .spatial, .forceLeftToRight) talar om för systemet när en fast riktning ska behållas.

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

Testa RTL utan att översätta

Du behöver ingen arabisk översättning för att testa spegelvändning. Kör appen med Right-to-Left Pseudolanguage i schemats språkinställning för appen. Gränssnittet spegelvänds med dina befintliga strängar, så du direkt kan upptäcka buggar med hårdkodade .left/.right.

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

Vanliga RTL-buggar

Var uppmärksam på följande:

Hårdkodad justering eller utfyllnad med .left/.right.
Vyer som positioneras manuellt med fasta x-förskjutningar.
Anpassade riktade bilder som inte spegelvänds.
Bakåtchevrar eller reglage som pekar åt fel håll.
Sammanfogade dubbelriktade strängar som blir felordnade.

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

En RTL-anpassad rad

En välbyggd rad använder leading/trailing genomgående, låter symboler spegelvändas och tvingar bara riktning där semantiken kräver det. En sådan vy behöver inte ändras alls för att se korrekt ut på både engelska och arabiska.

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

Snabbkontroll

Kom ihåg grundprincipen för RTL-säker layout.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du lärde dig att stödja språk som läses från höger till vänster:

Utforma med leading/trailing, aldrig vänster/höger.
Läs av miljövärdet layoutDirection för riktningsberoende logik.
Spegelvänd riktade bilder; åsidosätt riktningen för fasta underträd som kod eller telefonnummer.
Använd semanticContentAttribute för uppspelnings- och rumsliga kontroller som inte får spegelvändas.
Testa med RTL-pseudospråket innan lansering.

Gratis att börja

Lär dig Swift med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 122
Lektioner: 409

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Höger-till-vänster och layout-riktning” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Swift Academy, inklusive ”Höger-till-vänster och layout-riktning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Swift Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Höger-till-vänster och layout-riktning”?

Stöd RTL-språk och spegelvända layouter. Ni övar på Swift Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Swift Academy?

Du behöver inga förkunskaper. Utbildningen i Swift Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Höger-till-vänster och layout-riktning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Swift Academy-lektionen?

Ja. Varje Swift Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

String Catalogs och lokaliserade strängar
Pluralisering och Stringsdict
Locale-medveten formatering
Höger-till-vänster och layout-riktning

← Tillbaka till Swift Academy