Mending Mana, Belajar SwiftUI atau UIKit? Apakah SwiftUI dan UIKit bisa berjalan di projek yang sama?
Mending Mana, Pilih Belajar UIKit atau SwiftUI?
Seringkali saya mendengar pertanyaan tersebut, terutama dari orang yang baru mau belajar membuat aplikasi iOS. Bahkan saya sendiri yang kurang lebih sudah menggunakan UIKit selama 3 tahun muncul pertanyaan yang serupa.
Perlukah Saya untuk Belajar SwiftUI Sekarang?
Untuk menjawab pertanyaan tersebut perlu temen-temen ketahui bahwa keduanya memiliki kelebihan dan kekurangannya masing-masing.
Kenapa Worth untuk Belajar UIKit?
Masih banyak perusahaan yang menggunakan UIKit. Karena memang UIKit sudah digunakan untuk membangun aplikasi iOS sejak lama. Tentu saja untuk membuat ulang aplikasi yang sebelumnya menggunakan UIKit dengan SwiftUI bukan perkara yang mudah. Banyak hal yang perlu dipertimbangkan seperti dari segi biaya, waktu, dan bisnis.
Keuntungan berikutnya karna UIKit merupakan teknologi lama, tentunya untuk menemukan resource belajar sangatlah mudah. Dikemudian hari ketika kita menemukan masalah atau kodingan yang error pasti sudah banyak forum yang membahas hal serupa.
Kekurangan UIKit sendiri terlalu banyak boiller plate code dan slow development. Beberapa teknologi Apple juga tidak bisa dibuat dengan menggunakan UIKit seperti WatchOS, Widget iOS, dan VisionOS.
Apa Kelebihan SwiftUI dibandingkan UIKit?
Kelebihan pertama SwiftUI membawa pendekatan deklaratif UI. Pendekatan deklaratif UI mempunyai kelebihan, yaitu apa yang kita code itu adalah apa yang kita lihat di layar, sehingga secara development akan lebih cepat. Saya melihat semua teknologi mobile akan mengarah kesana, dari mulai Flutter secara default sudah membawa pendekatan tersebut, Android dengan Jetpack Composenya, dan iOS dengan SwiftUI.
SwiftUI mempunyai fitur preview, fitur ini mirip seperti hot reload pada Flutter. Jadi kita tidak perlu lagi untuk menjalankan aplikasi untuk melihat hasil kodenya. Kita cukup menulis kode dan hasilnya akan terlihat di canvas.
Dengan SwiftUI pula kita bisa membuat app di cross platform Apple, seperti WatchOS, MacOS, iOS, dan Vision OS.
Dengan segala kelebihan tersebut sayangnya kita perlu menaikan target deployment menjadi iOS 13. Hal tersebutlah yang menjadi pertimbangan sebuah perusahaan untuk mengadopsi SwiftUI. Dari segi bisnis bisa saja ada banyak user potensial yang pengguna iOS 12 kebawah. Sehingga perusahaan akan kehilangan user potensial yang mungkin akan membawa keuntungan bagi perusahaan.
Jadi Pilih Mana, Belajar UIKit atau SwiftUI?
Kalo bisa belajar keduanya, kenapa harus memilih?
Menurut saya untuk sekarang UIKit masih sangat worth untuk dipelajari, terutama apabila kita mengincar ingin cepat kerja di suatu perusahaan. Akan tetapi kita juga tidak boleh menutup mata akan SwiftUI, bisa saja di kemudian hari Apple mewajibkan untuk menggunakan SwiftUI. Sampai saat itu datang setidaknya kita telah pelan-pelan belajar dan mempersiapkanya dengan baik.
Bagi yang telah mempelajari SwiftUI, lanjutkan dan perdalam. Saya melihat juga beberapa company secara spesifik menyebutkan SwiftUI pada lowongan pekerjaan mereka. Jadi tetep ada kebutuhanya ya guys. Perlukah belajar UIKit? Saya pikir optional, menjadi wajib apabila perusahaan tujuan temen-temen menggunakan UIKit untuk membangun aplikasi iOSnya.
Kabar baiknya UIKit dan SwiftUI saling interopable. Sehingga kita bisa membuka kodingan SwiftUI pada project UIKit, dan sebaliknya. Di artikel ini kita akan membuat sample project tentang bagaimana cara UIKit dan SwiftUI berjalan di projek yang sama.
Bagaimana Cara Menambahkan SwiftUI pada UIkit Project?
- Buat projek dengan interface Storyboard.
2. Tambahkan SwiftUI View file. Pilih menu File -> New -> File -> SwiftUI View.
3. Buat halaman SwiftUI sederhana.
import SwiftUI
struct SwiftUIScreen: View {
weak var navigationController: UINavigationController?
var body: some View {
VStack {
HStack {
Text("SwiftUI Screen")
.bold()
.font(.system(size: 21.0))
}
Spacer()
.frame(width: 1, height: 80, alignment: .bottom)
VStack(alignment: .center){
Button(action: {
navigationController?.popViewController(animated: true)
}) {
Text("Back to UIKit Screen")
.font(.system(size: 21.0))
.bold()
.frame(width: UIScreen.main.bounds.width, height: 10, alignment: .center)
}
}
Spacer()
.frame(width: 2, height: 105, alignment: .bottom)
}.navigationBarHidden(true)
}
} Di dalamnya terdapat Text judul dan Button untuk kembali ke halaman UIKit. Disini kita juga mengirim UINavigationController dari halaman UIKit ke SwiftUI untuk mendukung fungsi kembali ke halaman UIKit.
4. Buat UI UIKit sederhana sebagai entry point menuju halaman SwiftUI.
import UIKit
import SwiftUI
class ViewController: UIViewController {
lazy var backSwiftUIButton: UIButton = {
let button = UIButton()
button.setTitleColor(.blue, for: .normal)
button.setTitle("Go to SwiftUI Screen", for: .normal)
button.titleLabel?.textAlignment = .center
button.translatesAutoresizingMaskIntoConstraints = false
button.addTarget(self, action: #selector(openSwiftUIScreen), for: .touchUpInside)
button.titleLabel?.font = .boldSystemFont(ofSize: 21)
return button
}()
lazy var titleLabel: UILabel = {
let label = UILabel()
label.text = "UIKit Screen"
label.textColor = .black
label.translatesAutoresizingMaskIntoConstraints = false
label.font = .boldSystemFont(ofSize: 21)
return label
}()
override func viewDidLoad() {
super.viewDidLoad()
setupUI()
}
private func setupUI() {
view.backgroundColor = .white
view.addSubview(titleLabel)
view.addSubview(backSwiftUIButton)
NSLayoutConstraint.activate([
backSwiftUIButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
backSwiftUIButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
backSwiftUIButton.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 64)
] )
}
@objc func openSwiftUIScreen() {
let swiftUIViewController = UIHostingController(rootView: SwiftUIScreen(navigationController: self.navigationController))
self.navigationController?.pushViewController(swiftUIViewController, animated: true)
}
}Untuk membuka halaman SwiftUI pada UIKit, bungkus halaman SwiftUI dengan UIHostingContoller dan lakukan pushViewController tersebut.
5. Pastikan bahwa halaman UIKit kita memiliki navigation controller.
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
...
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
/// 1. Capture the scene
guard let windowScene = (scene as? UIWindowScene) else { return }
/// 2. Create a new UIWindow using the windowScene constructor which takes in a window scene.
let window = UIWindow(windowScene: windowScene)
/// 3. Create a view hierarchy programmatically
let viewController = ViewController()
let navigation = UINavigationController(rootViewController: viewController)
/// 4. Set the root view controller of the window with your view controller
window.rootViewController = navigation
/// 5. Set the window and call makeKeyAndVisible()
self.window = window
window.makeKeyAndVisible()
}
...
}Disini kita membungkus ViewController entry point dengan UINavigationController untuk memastikan kita memiliki navigation controller.
6. Jalankan projek dan hasilnya akan nampak seperti gambar di bawah.
Cara Membuka Kodingan UIKit pada SwiftUI?
- Buat project baru dengan interface SwiftUI.
2. Buat custom UI sederhana menggunakan UIKit.
import UIKit
class SampleUIKitUIView: UIView {
let imageView: UIImageView = {
let view = UIImageView()
view.translatesAutoresizingMaskIntoConstraints = false
view.tintColor = .white
return view
}()
let descriptionLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = .white
label.font = .systemFont(ofSize: 56)
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setupView()
}
func setupView() {
backgroundColor = .black
addSubview(imageView)
addSubview(descriptionLabel)
NSLayoutConstraint.activate([
imageView.widthAnchor.constraint(equalToConstant: 56),
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor),
imageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
imageView.topAnchor.constraint(equalTo: topAnchor, constant: 16),
descriptionLabel.leadingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: 12),
descriptionLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
descriptionLabel.topAnchor.constraint(equalTo: topAnchor, constant: 16),
])
}
}3. Buat SwiftUI view yang conform ke UIViewRepresentable.
struct SampleSwiftUIView: UIViewRepresentable {
let title: String
let image: UIImage?
func makeUIView(context: Context) -> SampleUIKitUIView {
return SampleUIKitUIView()
}
func updateUIView(_ uiView: SampleUIKitUIView, context: Context) {
uiView.descriptionLabel.text = title
uiView.imageView.image = image
}
}Di dalamnya terdapat 2 method yaitu makeUIView dan updateUIView. MakeUIView di panggil sekali untuk menginisialisasi tampilan UIKit. Sedangkan updateUIView akan dipanggil ketika redraw dan memperbarui tampilan UIKit.
4. Pada ContentView panggil SampleSwiftUIView di dalam VStack.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .center) {
SampleSwiftUIView(title: "Ant Man", image: UIImage(systemName: "ant.fill"))
.frame(height: 100)
}.padding()
}
}
#Preview {
ContentView()
}5. Jalankan projek dan hasilnya akan tampil seperti gambar di bawah ini.
Kesimpulan
UIKit dan SwiftUI keduanya memiliki kelebihan dan kekuranganya masing-masing. Jadi kenali kebutuhanmu, mau belajar UIKit dulu atau SwiftUI dulu tidak masalah.
Baik UIKit dan SwiftUI keduanya bisa berjalan di projek yang sama. Kita bisa membuka SwiftUI code di UIKit dengan menggunakan UIHostingController. Sebaliknya kita juga bisa membuka UIKit code di SwiftUI menggunakan UIViewRepresentable. Hal ini memudahkan kita untuk pelan-pelan menggunakan SwiftUI.
Terimakasih team Apple yang telah memikirkan interoperability 😁.
Terimakasih telah membaca sampai akhir. Jangan lupa share dan clap👏 apabila artikel ini bermanfaat, dan follow untuk stay up to date dengan artikel saya berikutnya.
See you guys!👋
Resources:
https://www.hackingwithswift.com/quick-start/swiftui/how-to-wrap-a-custom-uiview-for-swiftui
