UIView

Di pertemuan kedua ini, topik bahasan yang akan kita pelajari adalah seputar:

• Project Setting
• Auto Layout & Constraint
• IBOutlet
• IBDesignable
• Best practice for targetting lower iOS version

Topik tersebut akan sering diulang-ulang saat kita membangun aplikasi iOS dan secara bertahap, pembahasan materinya akan berkembang ke arah yang lebih advance lagi.

Berikut ini adalah link rekaman materinya: Materi Pertemuan Kedua --> https://www.youtube.com/watch?v=UTgjakvm6xs

Link full Source Code: https://drive.google.com/file/d/1_o-LorrWoSENejANbHz60s-jUg9ca2jX/view?usp=sharing

Link assets image: iSwift Logo

Summary#

Ringkasan poin penting materi sesi ke-2:

1. Di iOS Development selain mengetahui tentang bahasa pemrograman Swift, perlu untuk memahami dan mengetahui tentang SDK - SDK bawaan Xcode seperti misalnya UIView, ImageView, Button, dll

2. SDK atau Software Development Kit di Xcode pada dasarnya dibuat untuk memudahkan iOS Engineer untuk membuat User Interface aplikasi iOS di Xcode

3. UIView, Auto Layout & Constraint, IBOutlet dan IBDesignable perlu untuk dipahami

4. Penjelasan fungsi file:

• AppDelegate.swift: Ini otomatis di create oleh Xcode setiap kali kita Create New Project. Fungsinya sebagai entry point aplikasi kita berjalan atau pertama kali Running.
• SceneDelegate.swift: File ini berfungsi untuk membuat aplikasi yang multi scene, atau dengan kata lain satu aplikasi bisa banyak scene (multitask)
• ViewController.swift: File tempat dimana kita akan (mostly) ngoding aplikasi from scratch (di project sesi 2 ini)

5. Setting Deployment Target: Aplikasi iOS yang kita bikin, pada prinsipnya bisa kita atur minimum device support dan minimum versi iOS yang disupport. For the record, pengguna iPhone yang masih di iOS 10 masih cukup banyak. Jadi bisa dipertimbangkan untuk minimum iOS version yang akan kita support adalah iOS 10. Untuk lebih jelasnya tentang strategi Deployment Target, bisa disimak pada link rekaman Zoom meeting diatas.

6. Constraint & Auto Layout: Ada bacaan bagus tentang ini, bisa di cek pada link ini

7. Safe Area: Layouting di Xcode dipermudah dengan adanya standar dan guidelines screen size, margin dan safe area, sehingga aplikasi yang kita kembangkan akan responsive di semua device iPhone. Jika ingin mengetahui berapa saja ukuran screen size dan safe area semua device Apple, bisa di cek di halaman website ini Screensizes dot app

Results#

Hasil akhir user interface yang akan kita kerjakan di sesi ini adalah sebagai berikut:

Final Code#

ViewController.swift

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var logoImageView: UIImageView!
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var loginLabel: UILabel!
    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var submitButton: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setup()
    }
    func setup() {
        logoImageView.layer.cornerRadius = 50
        logoImageView.layer.masksToBounds = true
        containerView.backgroundColor = UIColor.white
        containerView.layer.cornerRadius = 10
        containerView.layer.masksToBounds = true
        containerView.layer.borderColor = UIColor.lightGray.cgColor
        containerView.layer.borderWidth = 1
        submitButton.layer.cornerRadius = 18
        submitButton.layer.masksToBounds = true
    }
    @IBAction func submitButtonTapped(_ sender: Any) {
        let validation = validate()
        if validation.isValid {
            login()
        }
        else {
            let alert = UIAlertController(title: "Error", message: validation.message, preferredStyle: UIAlertController.Style.alert)
            alert.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
            present(alert, animated: true, completion: nil)
        }
    }
    func login() {
        print("Login berhasil")
    }
    func validate() -> (isValid: Bool, message: String) {
        guard let email = emailTextField.text, !email.isEmpty else {
            return (false, "Email tidak boleh kosong")
        }
        guard let password = passwordTextField.text, !password.isEmpty else {
            return (false, "Password tidak boleh kosong")
        }
        return (true, "")
    }
}

💡

Ikuti perkembangannya di akun Twitter Hidayat Abisena ⚡️!