Swift Academy · บทเรียน

การเขียนจากขวาไปซ้ายและทิศทางการจัดวาง

รองรับภาษา RTL และการจัดวางแบบกลับด้าน

การเขียนจากขวาไปซ้ายและทิศทางการจัดวาง เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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 Symbols และรูปภาพ

SF Symbols จำนวนมากกลับด้านโดยอัตโนมัติ สำหรับรูปภาพกำหนดทิศทางที่สร้างเอง ให้ระบุว่าต้องกลับด้านตามทิศทางเลย์เอาต์ เพื่อให้ลูกศรที่ชี้ไปข้างหน้ายังคงชี้ไปข้างหน้าใน 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 และ .trailing สำหรับการจัดแนวข้อความด้วยเช่นกัน ย่อหน้าที่จัดแนวด้วย .leading จะชิดขอบขวาในภาษาอาหรับโดยอัตโนมัติ หลีกเลี่ยง .left/.right เพราะจะไม่กลับด้าน

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

ข้อความสองทิศทาง

ย่อหน้า RTL มักฝังช่วงข้อความ LTR เช่น URL ตัวเลข และชื่อแบรนด์ภาษาอังกฤษ อัลกอริทึมข้อความสองทิศทางของยูนิโค้ดจะจัดลำดับให้ แต่คุณสามารถครอบช่วงข้อความที่กำกวมด้วยอักขระแยกทิศทาง เพื่อป้องกันการแสดงผลสลับตำแหน่ง

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

เนื้อหาเชิงความหมายสำหรับมุมมองที่ไม่กลับด้าน

ตัวควบคุมบางชนิด เช่น ปุ่มควบคุมสื่อและไทม์ไลน์ ควร NOT กลับด้าน เพราะความหมายของสิ่งเหล่านี้อิงกับการทำงานทางกายภาพ ไม่ใช่ทิศทางการอ่านของภาษา semanticContentAttribute ของ UIKit (.playback, .spatial, .forceLeftToRight) จะบอกระบบว่าเมื่อใดควรคงทิศทางตายตัว

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

การทดสอบ 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

สรุป

คุณได้เรียนรู้การรองรับภาษาที่อ่านจากขวาไปซ้าย:

ออกแบบด้วย ด้านเริ่มต้น/ด้านสิ้นสุด ไม่ใช่ซ้าย/ขวา
อ่าน environment ของ layoutDirection สำหรับตรรกะที่ขึ้นอยู่กับทิศทาง
กลับด้านรูปภาพกำหนดทิศทาง และแทนที่ทิศทางสำหรับโครงสร้างย่อยที่ต้องคงที่ เช่น โค้ดหรือหมายเลขโทรศัพท์
ใช้ semanticContentAttribute กับตัวควบคุมการเล่นและตัวควบคุมเชิงพื้นที่ที่ต้องไม่กลับด้าน
ทดสอบด้วยภาษาจำลอง RTL ก่อนเผยแพร่

คำถามที่พบบ่อย

บทเรียน “การเขียนจากขวาไปซ้ายและทิศทางการจัดวาง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเขียนจากขวาไปซ้ายและทิศทางการจัดวาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเขียนจากขวาไปซ้ายและทิศทางการจัดวาง”

รองรับภาษา RTL และการจัดวางแบบกลับด้าน คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การเขียนจากขวาไปซ้ายและทิศทางการจัดวาง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Swift Academy