Tutorial SwiftUI: Mengenal Basic Layout

ios mobile app application development swiftui tutorial layout

Apa itu Swift UI dan bagaimana penerapannya?

Sebagai seorang iOS developer, memiliki keahlian dalam membangun sebuah tampilan pada aplikasi iOS adalah hal yang penting. Jika biasanya sebagai iOS developer kita membangun layout menggunakan storyboard atau programmatically, ada alternatif lain yang baru-baru ini diperkenalkan oleh Apple. Kegunaannya untuk membangun sebuah tampilan yang bisa memudahkan kita. Namanya dalah SwiftUI.

Banyak benefit yang bisa kita dapat jika menggunakan SwiftUI. Salah satunya adalah mendukung Multi Platform Apple Device. Dengan satu kali coding, kita bisa membangun aplikasi berbasis iOS, ipadOS, macOS bahkan watchOS sekalipun.

Bagaimana, menarik bukan?

Untuk coding SwiftUI, teman-teman bisa memakai design tools yang mungkin sudah tidak asing lagi. Yaitu, Xcode. Menggunakan tools ini, membangun interface dengan SwiftUI menjadi mudah. Sebab, cukup drag and drop ke canvas, dan barisan kode akan ter-update otomatis.

Perubahan yang dilakukan pada kode, akan langsung terlihat di preview design-nya. Demikian pula bila diubah-ubah di canvas, kodenya pun akan langsung berubah.

Sebelum masuk lebih lanjut ke tutorial SwiftUI, mari kita bahas apa saja dasar-dasar yang harus kita pahami untuk membuat aplikasi iOS menggunakan SwiftUI. Berikut ini adalah pembahasannya.

SwiftUI – Basic Layout: Ada Tiga Cara untuk Menyusun Tampilan

Dalam SwiftUI, dikenal tiga cara untuk menyusun tampilan. Tiga pilihan tersebut adalah Vertical, Horizontal, dan ZStack. Teman-teman dapat memilih dari tiga orientasi tampilan tersebut, sesuai kebutuhan saat itu.

Tampilan Vertical

Pilihan tampilan yang pertama adalah Vertical. Untuk teman-teman yang sering menggunakan stack view, pasti tidak asing dengan istilah vertical ini. Dengan kita menggunakan Vertical sebagai orientasi utamanya, maka view yang kita panggil akan disusun mulai dari atas ke bawah.

Contoh view Vertical ini biasanya umum di halaman beranda suatu aplikasi. Tampilannya yang menumpuk dari atas ke bawah memudahkan untuk menyajikan fitur utama di aplikasi.

Tampilan Horizontal

Orientasi tampilan yang kedua adalah Horizontal. Tampilan Horizontal ini kurang lebih mirip seperti Vertical. Bedanya, jika kita menggunakan Vertical, orientasinya dari atas ke bawah, sedangkan menggunakan Horizontal orientasinya adalah dari kiri ke kanan.

Tampilan ZStack

Nah, berbeda dengan Vertical dan Horizontal, ada tampilan yang cukup lain lagi. Jika teman-teman ingin membuat tampilan yang saling bertumpuk antara view satu dengan yang lain, penggunaan ZStack juga bisa dipertimbangkan. Dengan menggunakan ZStack, teman-teman akan lebih mudah untuk membuat layout yang lebih responsif.

SwiftUI – Basic Layout: Semua adalah View

Dalam SwiftUI, semua kita sebut sebagai View. View di sini adalah komponen-komponen yang kita panggil agar tampilan bisa lebih interaktif. Ini di antaranya adalah Text, Button, Image, dan lain-lain.

Text("Today's Popular Giphy")
 .font(.system(size: 20, weight: .medium))
 .padding(.leading, 20)

Lalu, setelah kita memanggil View yang diinginkan, kita bisa membuat tampilannya lebih menarik. Kita bisa menggunakan modifiers seperti contoh di atas.

SwiftUI – Basic Layout: Penerapan Parent & Child Relation

Penerapan Parent and Child ini konsepnya mirip Inheritance. Sederhananya adalah Child bisa memiliki sifat yang sama dari Parent-nya.

Penerapan relasi Parent dan Child di SwiftUI adalah View Child bisa mewarisi sifat dari View Parent. Tetapi, bisa juga menolak mewarisinya. Contohnya seperti di bawah ini:

Di contoh tersebut, terlihat ada View Child yang mewarisi sifat View Parent dan ada pula yang menolak mewarisinya.

Nah, kita telah membahas pengenalan dasar layout di SwiftUI. Mulai dari tiga cara orientasi tampilan, semua komponen merupakan View, serta relasi Parent dan Child.

Bagaimana, cukup mudah bukan untuk memahami konsep dasar pada SwiftUI ini?

Pada tulisan selanjutnya, kita akan lanjut ke Tutorial SwiftUI bagian kedua. Di sana, kita akan mempelajari bagaimana cara penerapan SwiftUI secara langsung. Jadi, jangan sampai terlewat ya. Silakan subscribe blog gits.id.

    Subscribe now and stay updated!

    Agar semakin banyak yang mendapatkan manfaat artikel ini, bagikan juga ke teman-temanmu ya….


    Amin Farouk adalah seorang iOS Developer di GITS.ID.


    GITS.ID telah men-develop berbagai aplikasi untuk membantu klien-klien kami. Contohnya adalah aplikasi mobile berbasis Android dan iOS, bersama Toyota. Dapat diketahui lebih lanjut dengan mengaksesnya di sini.

    CONTACT US

    Do you have a new project?

    Come tell us what you need! Fill out this form and our solution team will response to your email by maximum of 1×24 workday.

    Indonesia

    Head Office

    Summarecon Bandung, Jl. Magna Timur No.106, Bandung, 40296

    Whatsapp (chat only)

    0811-1309-991

    North America

    Branch Office

    166 Geary Str STE 1500 #1368, San Francisco, CA 94108, United States