Memulai aplikasi iOS dengan XIB di XCode

Hallo teman”, kali ini kita akan bahas tentang iOS. Aplikasi iOS hanya bisa dibuat dengan menggunakan XCode. Meskipun terdapat framework hybrid, seperti Flutter dan React Native, kita akan tetap membutuhkan XCode nantinya. Lalu apa itu xib?

Untuk membuat layout terdapat beberapa pilihan di XCode, yaitu Storyboard, xib, dan programmatically (termasuk Swift UI). Secara default XCode akan menggunakan Storyboard. Kali ini kita akan mencoba untuk tidak menggunakan storyboard, namun langsung menggunakan xib. Yuk Ngoding 😀

1. Buat project

Pilih Single View App ketika membuat project, seperti berikut ini:

Isi product name, team, organization name, organization identifier sesuai dengan yang diinginkan, lalu sesuaikan language dan user interface seperti berikut:

Klik Next, tentukan folder penyimpanan project dan lalu Create.

2. Membuat class baru

Untuk membuat class baru, klik menu File > New > File… atau gunakan shorcut pada keyboard command + N. Setelah itu akan muncul pop up seperti berikut:

Pilih Cocoa Touch Class, lalu Next. Lalu isi form dengan nama class yang diinginkan (pada contoh ini mimin menggunakan nama MainViewController), dan jangan lupa centang bagian Also create XIB file.

Lalu Next, tentukan posisi folder, dan Create.

Setelah class dibuat, lakukan penambahan label pada XIB file seperti berikut:

3. Konfigurasi

Hapus main interface, pada bagian deployment info seperti berikut ini:

Setelah itu buka file info.plist, lalu hapus bagian Storyboard Name dengan mengklik “–” (yang dilingkari warna biru pada gambar).

4. File delegate

Pada project terdapat dua file delegate, yaitu AppDelegate dan juga SceneDelegate. Pertama perbarui AppDelegate seperti berikut:

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.

        if #available(iOS 13, *) {
            // do only pure app launch stuff, not interface stuff
        } else {
            //ignore the storyboard
            window = UIWindow(frame: UIScreen.main.bounds)
            window?.makeKeyAndVisible() //
            
            window?.rootViewController = UINavigationController(rootViewController: MainViewController())
        }
        return true
    }

    // MARK: UISceneSession Lifecycle
    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        // Called when a new scene session is being created.
        // Use this method to select a configuration to create the new scene with.
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }

    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
        // Called when the user discards a scene session.
        // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
        // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
    }

}

Lalu perbarui SceneDelagate seperti berikut:

import UIKit

@available(iOS 13.0, *)
class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let windowScene = (scene as? UIWindowScene) else { return }

        window = UIWindow(windowScene: windowScene)
        window?.makeKeyAndVisible()
        window?.rootViewController = UINavigationController(rootViewController: MainViewController())
    }

    func sceneDidDisconnect(_ scene: UIScene) {
        // Called as the scene is being released by the system.
        // This occurs shortly after the scene enters the background, or when its session is discarded.
        // Release any resources associated with this scene that can be re-created the next time the scene connects.
        // The scene may re-connect later, as its session was not neccessarily discarded (see `application:didDiscardSceneSessions` instead).
    }

    func sceneDidBecomeActive(_ scene: UIScene) {
        // Called when the scene has moved from an inactive state to an active state.
        // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
    }

    func sceneWillResignActive(_ scene: UIScene) {
        // Called when the scene will move from an active state to an inactive state.
        // This may occur due to temporary interruptions (ex. an incoming phone call).
    }

    func sceneWillEnterForeground(_ scene: UIScene) {
        // Called as the scene transitions from the background to the foreground.
        // Use this method to undo the changes made on entering the background.
    }

    func sceneDidEnterBackground(_ scene: UIScene) {
        // Called as the scene transitions from the foreground to the background.
        // Use this method to save data, release shared resources, and store enough scene-specific state information
        // to restore the scene back to its current state.
    }

}

5. Run

Setelah itu jalankan project. Aplikasi akan menampilkan ViewController yang kita gunakan pada file delegate.

Sekian postingan kali ini, semoga membantu ya, dan jangan lupa untuk tepuk tangan, dan dishare ya. Hal tersebut sangat berarti bagi mimin. 😀

Oh ya, blog ini juga punya tulisan menarik lainnya loh, seperti berikut:

• Why do we need an InheritedWidget in Flutter code?
• Load Image dengan Menggunakan COIL, Part 1
• Error setelah update Android Studio 3.5 ke 3.6 (Duplicate class AppCompatResources)

Terimakasih 😀