Swift Academy · Pelajaran

Kanan-ke-Kiri dan Arah Tata Letak

Dukung bahasa RTL dan tata letak yang dicerminkan.

Pelajaran 4 dari 413 langkah

Kanan-ke-Kiri dan Arah Tata Letak adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Bahasa yang Dibaca dari Kanan ke Kiri

Bahasa Arab, Ibrani, Persia, dan Urdu ditulis dari kanan ke kiri (RTL). Bagi pengguna tersebut, seluruh antarmuka harus dicerminkan: tombol kembali navigasi mengarah ke kanan, daftar diratakan ke tepi kanan, dan kemajuan mengalir dari kanan ke kiri. Dukungan RTL merupakan bagian inti dari internasionalisasi.

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

Awal dan Akhir, Bukan Kiri dan Kanan

Aturan utamanya: rancang dengan awal dan akhir, bukan kiri dan kanan. Awal adalah tempat pembacaan dimulai (kiri dalam bahasa Inggris, kanan dalam bahasa Arab). Saat Anda menggunakan awal/akhir, sistem akan mencerminkan tata letak Anda secara otomatis dalam RTL.

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

Membaca layoutDirection

SwiftUI menyediakan arah saat ini melalui nilai lingkungan layoutDirection, yang berupa .leftToRight atau .rightToLeft. Bacalah nilai ini saat Anda memerlukan logika yang bergantung pada arah, seperti ketika memilih aset 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)

Mencerminkan SF Symbols dan Gambar

Banyak SF Symbols dicerminkan secara otomatis. Untuk gambar khusus yang memiliki arah, tandai gambar tersebut agar dibalik mengikuti arah tata letak sehingga panah yang mengarah ke depan tetap mengarah ke depan dalam RTL. Pengubah flipsForRightToLeftLayoutDirection mengatur hal ini.

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

Memaksa Arah

Terkadang subview harus mempertahankan arah tetap—misalnya nomor telepon atau potongan kode dari kiri ke kanan di dalam tata letak RTL. Ganti arahnya dengan pengubah environment(\.layoutDirection, _) hanya pada subtree tersebut.

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

Perataan Teks dan multilineTextAlignment

Gunakan .leading dan .trailing untuk perataan teks juga. Paragraf yang diratakan dengan .leading akan menempel pada tepi kanan dalam bahasa Arab secara otomatis. Hindari .left/.right karena keduanya tidak pernah dibalik.

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

Teks Dua Arah

Paragraf RTL sering menyisipkan bagian teks LTR (URL, angka, nama merek berbahasa Inggris). Algoritme Dua Arah Unicode menangani urutannya, tetapi Anda dapat membungkus bagian yang ambigu dengan karakter pemisah arah untuk mencegah tampilannya menjadi kacau.

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

Konten Semantik untuk Tampilan yang Tidak Dicerminkan

Beberapa kontrol—tombol pemutaran media, garis waktu—harus TIDAK dicerminkan karena maknanya bersifat fisik, bukan berdasarkan arah pembacaan. semanticContentAttribute milik UIKit (.playback, .spatial, .forceLeftToRight) memberi tahu sistem kapan harus mempertahankan arah tetap.

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

Menguji RTL Tanpa Menerjemahkan

Anda tidak memerlukan terjemahan bahasa Arab untuk menguji pencerminan. Jalankan aplikasi dengan Pseudobahasa Kanan-ke-Kiri pada pengaturan bahasa aplikasi di skema. UI akan dicerminkan menggunakan string yang sudah ada, sehingga Anda dapat segera menemukan masalah .left/.right yang ditulis langsung.

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

Kesalahan Umum RTL

Perhatikan hal-hal berikut:

Perataan atau padding .left/.right yang ditulis langsung.
Tampilan yang ditempatkan secara manual menggunakan offset x tetap.
Gambar khusus berarah yang gagal dibalik.
Chevron kembali atau penggeser yang menunjuk ke arah yang salah.
String dua arah yang digabungkan sehingga tampilannya menjadi kacau.

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

Baris yang Siap untuk RTL

Baris yang dibuat dengan baik menggunakan awal/akhir secara menyeluruh, memungkinkan simbol dibalik, dan memaksa arah hanya saat semantik mengharuskannya. Tampilan seperti ini tidak memerlukan perubahan apa pun agar terlihat benar dalam bahasa Inggris maupun bahasa Arab.

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

Pemeriksaan Singkat

Ingat kembali prinsip utama tata letak yang aman untuk RTL.

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari cara mendukung bahasa dari kanan ke kiri:

Rancang dengan awal/akhir, jangan pernah dengan kiri/kanan.
Baca lingkungan layoutDirection untuk logika yang bergantung pada arah.
Balik gambar berarah; ganti arah untuk subtree tetap seperti kode atau nomor telepon.
Gunakan semanticContentAttribute untuk kontrol pemutaran/spasial yang tidak boleh dicerminkan.
Uji dengan pseudobahasa RTL sebelum merilis aplikasi.

Gratis untuk memulai

Belajar Swift dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 122
Pelajaran: 409

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kanan-ke-Kiri dan Arah Tata Letak” gratis?

Ya — teks lengkap “Kanan-ke-Kiri dan Arah Tata Letak” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Kanan-ke-Kiri dan Arah Tata Letak”?

Dukung bahasa RTL dan tata letak yang dicerminkan. Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Swift Academy?

Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Kanan-ke-Kiri dan Arah Tata Letak” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Swift Academy