Dalam tutorial iOS ini, kita akan mempelajari cara menerapkan bilah tab di SwiftUI dengan memanfaatkan TabView . Jangan ragu untuk langsung melompat ke kode sumber (di bagian bawah halaman), jika Anda sudah tahu apa yang Anda lakukan.
Sejak SwiftUI diluncurkan di WWDC 2019, pengembang telah mengembangkan aplikasi baru mereka hampir secara eksklusif pada kerangka kerja yang luar biasa menarik ini. Aplikasi ini telah menghapus keraguan tentang keberhasilan adopsi SwiftUI.
Untuk membantu pemula agar terbiasa dengan SwiftUI ini, kami akan membuat beberapa artikel singkat tentang SwiftUI, dengan fitur cepat dan cuplikan kode. Artikel pertama adalah cara cepat menerapkan dan menata navigasi bilah tab di SwiftUI menggunakan komponen TabView.
Catatan: Tutorial SwiftUI ini telah ditulis dengan Xcode 11 – versi resmi. Beberapa API dari versi beta mungkin diubah (seperti TabbedView) atau tidak digunakan lagi. Pastikan Anda menggunakan versi Xcode terbaru sebelum menjalankan kode dari tutorial SwiftUI ini.
1. Buat Tampilan Tab
Percayalah pada kami, ini sangat mudah – Menambahkan navigasi bilah tab ke aplikasi iOS jauh lebih mudah di SwiftUI daripada di UIKit. Cukup tambahkan blok kode ini ke dalam isi ContentView.
TabView {
Text("The content of the first view")
.tabItem {
Image(systemName: "phone.fill")
Text("First Tab")
}
}
Ketik TabView dan Xcode akan memberi Anda penutupan seperti ini. TabView ini mencakup dua bagian:
- Text("Isi tampilan pertama"): ini adalah tampilan yang akan ditampilkan saat mengetuk item tab ini. Kami akan membahas ini secara lebih rinci di langkah berikutnya.
- tabItem {}: Ini adalah item tab yang dapat Anda gaya dengan gambar dan teks.
Sekarang, mari kita lari untuk melihat apa yang terjadi:
Pekerjaan yang bagus . Namun dalam proyek yang sebenarnya, kita biasanya perlu memiliki lebih dari 2 item . Lanjutkan ke langkah berikutnya untuk mempelajari lebih lanjut.
2. Tambahkan Lebih Banyak Item Tab dan API Lainnya
Mari tambahkan item tab lain seperti ini.
TabView {
Text("The content of the first view")
.tabItem {
Image(systemName: "phone.fill")
Text("First Tab")
}
Text("The content of the second view")
.tabItem {
Image(systemName: "tv.fill")
Text("Second Tab")
}
Kode ini akan memberi kita hasil berikut:
3. Skenario TabView Praktis
Sekarang, mari kita bayangkan bahwa konten dari kedua item ini bukan hanya Text, melainkan sebuah View dengan sekumpulan komponen yang disematkan di dalamnya. Jadi, bagaimana kita bisa menyematkannya di dalam TabView kita?
Tambahkan kode berikut di akhir struct ContentView, setelah kurung kurawal penutup:
struct RedView: View {
var body: some View {
Color.red
}
}
struct BlueView: View {
var body: some View {
Color.blue
}
}
Di sini, tentukan dua tampilan: nama struct itu sendiri mengatakan semuanya. Satu berwarna merah, satu berwarna biru.
Selanjutnya, ganti seluruh isi tubuh ContentView dengan yang berikut ini:
TabView {
RedView()
BlueView()
}
Pada dasarnya, ketika tampilan diletakkan di dalam TabView, itu akan dianggap sebagai tampilan anak dari TabView itu. Mari kita lihat bagaimana tampilannya karena penampilannya sangat sederhana, bukan?
Bangun & jalankan aplikasi. Ketuk tempat yang diduga ada item tab. Anda akan melihat perubahan warna latar belakang layar.
Sekarang, setelah kita mengetahui cara menyematkan tampilan di dalam TabView di SwiftUI, mari menata item tab seperti yang kita lakukan pada langkah pertama.
TabView {
RedView()
.tabItem {
Image(systemName: "phone.fill")
Text("First Tab")
}
BlueView()
.tabItem {
Image(systemName: "tv.fill")
Text("Second Tab")
}
}
Bangun dan jalankan untuk melihat aplikasi TabView SwiftUI kami yang manis. Untuk menjaga agar tutorial ini tetap sederhana, kami tidak membuat tampilan yang rumit. Namun perlu diingat bahwa Anda benar-benar dapat menambahkan tampilan dengan kompleksitas apa pun. Bahkan pengontrol tampilan (meskipun Anda harus menjembataninya ke tampilan SwiftUI, tapi itu tutorial yang berbeda).
4. Kesimpulan
Seperti yang Anda lihat, menambahkan bilah tab di aplikasi iOS SwiftUI sangat sederhana, berkat TabView . Ini adalah yang pertama dalam koleksi tutorial gratis kami tentang SwiftUI. Jadi pantau terus dan bergabunglah dengan daftar tunggu kami untuk mendapatkan tutorial terbaru saat sudah siap.
Inilah kode sumber terakhir, yang juga dapat ditemukan di Github
struct RedView: View {
var body: some View {
Color.red
}
}
struct BlueView: View {
var body: some View {
Color.blue
}
}
TabView {
RedView()
.tabItem {
Image(systemName: "phone.fill")
Text("First Tab")
}
BlueView()
.tabItem {
Image(systemName: "tv.fill")
Text("Second Tab")
}
}
Kami juga ingin mengetahui pendapat Anda tentang SwiftUI. Jangan ragu untuk mengirimkan pesan kepada kami jika Anda memiliki masalah atau pertanyaan. Anda dapat mengunduh kode sumber lengkap di GitHub . Jika Anda menyukai tutorial ini, jangan lupa juga beri kami bintang di Github!
Sumber
https://iosapptemplates.com/blog/swiftui/tabview-swiftui
