Tampilkan postingan dengan label SwiftUI. Tampilkan semua postingan
Tampilkan postingan dengan label SwiftUI. Tampilkan semua postingan

Sabtu, 30 Mei 2020

Manajemen Color atau Warna di Xcode (Swift) Agar Rapi dan Dinamis

Oke, sekarang saya akan berbagi tips bagaimana mengatur atau memanajemen penggunaan warna agar lebih rapi dan dinamis. Untuk kamu yang sedang belajar membuat aplikasi untuk iOS menggunakan Xcode dan Swift tips ini akan sangat membantu. Hal dasar yang perlu dipelajari pertama kali adalah bagaimana cara mengimport warna dari luar. Secara default Xcode telah menyediakan warna dasar, jika kalian memakai SwiftUI cukup memanggilnya dengan kode
Color.red
atau jika kalian memakai UIKit cukup memanggilnya dengan
UIColor.red
Untuk mengimport warna dari luar,

  1. Pada tab list item file pilih asset color 
  2. Klik kanan new set color, lalu rename sesuai mau kamu 
  3. Klik kanan pada folder asset color, pilih reveal in finder 
  4. Cari file JSON berdasarkan nama warna tadi, terus buka pakai text editor lalu edit nilai RGB agar sesuai dengan warna yang kamu inginkan. 
  5. Tips dari saya adalah buka directory/folder warna menggunakan text editor Atom, jadi apabila kamu menambahkan warna kembali di Xcode untuk mengubah nilainya tinggal membuka Atom. 

Setelah selesai, kamu bisa memanggil warna yang kamu tambahkan tadi dengan kode sebagai berikut :

Untuk SwiftUI,
Color.init(“nama warna”)
Sedangkan untuk UIKit,
Color.init(named : ”nama warna”) 
 Jika kamu menggunakan cara di atas kekurangannya adalah

  1. Akan susah untuk tracing secara langsung siapa yang menggunakan warna tersebut (caller), kalau mau mencarinya harus menggunakan menu “search in workshop”. 
  2. Kamu akan kesulitan untuk memanggil nama warna. Jadi tiap mau menambahkan warna kamu harus membuka asset color untuk mengetahui nama warna yang ingin kamu gunakan. 
  3. Apabila ada perubahan refactor akan sulit dilakukan. 
Lalu, apakah ada cara lain yang lebih mudah? Tentu saja, caranya kamu bisa membuat file extension dari class Color atau UIColor. Contohnya seperti di bawah ini.

import Foundation
import SwiftUI

extension Color {

    struct FlatColor {
        
        struct Grey {
            static let Accent = Color.init("Color Accent Grey")
            static let Accent400 = Color.init("Color Accent Grey 400")
            static let Light = Color.init("Color Grey Light")
            static let Light1 = Color.init("Color Light Grey 1")
            static let Light2 = Color.init("Color Light Grey 2")
            static let IronGray = Color(netHex: 0x75706B)
        }
        
        struct Red {
            static let Maroon = Color.init("Color Red Maroon")
        }
        
        struct View {
            static let Shadow = Color.init("Color Accent Grey 400")
        }
    }

    struct GradientColor {
        struct View {
            static let Shadow = Color.init("Color Accent Grey 400")
        }
    }

    init(netHex:Int) {
        self.init(red:Double((netHex >> 16) & 0xff), green:Double((netHex >> 8) & 0xff), blue:Double(netHex & 0xff))
    }

}


Nah, jika dilihat dari kodingan tersebut terdapat kata extension. Extension kalau di Java sama seperti extend yakni kamu dapat mengextend class utama (penurunan sifat). Class utama yang sama pakai adalah class Color. Lalu terdapat dua struct utama, yakni FlatColor dan GradientColor. Hal tersebut saya pakai agar mempermudah untuk membedakan warna yang ingin saya panggil. Misalnya kalau saya mau memanggil warna dasar/satu macam warna, contohnya memanggil warna light grey cukup dengan. 
Color.FlatColor.Grey.Light
Selain itu terdapat struct View untuk mengelompokkan warna yang khusus dipakai untuk mengolah element view seperti shadow. Sedangkan struct utama GradientColor untuk mengelompokkan warna-warna gradient.

Terdapat juga fungsi untuk dengan parameter netHex yang bertujuan untuk memanggil warna berdasarkan parameter nilai hex yang diinputkan, contohnya :
Color(netHex: 0x757068)

Jumat, 29 Mei 2020

Kenapa Saya Lebih Memilih Menggunakan SwiftUI Ketimbang UIKit dan Storyboard



Storyboard and UIKit

Untuk programmer/developer iOS yang sudah mempunyai banyak pengalaman tentu tidak asing dengan Storyboard dan UIKit. Storyboard adalah fitur atau tool yang terdapat pada aplikasi Xcode. Fitur ini membantu developer untuk melihat layout atau tampilan aplikasi yang sedang dibikin tanpa harus melakukan build. Selain itu, untuk membuat layout kamu juga tinggal drag and drop.

Di atas sudah saya jelaskan kelebihannya, lalu apakah Storyboard memiliki kekurangan? Ketika saya mencoba membuat layout menggunakan Storyboard banyak kekurangan yang saya temukan antara lain pada saat membuka file Storyboard loadingnya lumayan lama. Kekurangan lainnya adalah penggunaan constraint agar posisi atau tata letak layout sesuai dengan yang kita inginkan cukup memakan waktu karena sangat berbeda dibandingkan constraint layout yang ada di Android Studio.

File Storyboard kalau dibuka berisi kodingan atau tulisan XML. Jika dibaca mungkin akan membingungkan, lebih mudah untuk membaca kodingan bahasa Swift. Sehingga apabila terjadi conflict di repository project kemungkinan besar akan memakan waktu. Daripada membuat dan me-resolve kodingan layout menggunakan Swift.

Untuk penjelasan mengenai kekeurangan dan keleihan Storybaord di atas sudah saya rangkum seperti di bawah ini.

Kekurangan :
  1. Loading lama 
  2. Harus terbiasa dengan constraint, kalau menurut saya ribet, butuh waktu untuk mengatur layout sesuai dengan yg diinginkan 
  3. Akan susah untuk meresolve apabila terjadi conflict saat menggunakan git
Kelebihan :
  1. Kamu bisa melihat preview layout yg kamu buat dan tahu screen selanjutnya ke mana 
Membuat Layout menggunakan Swift

Selain menggunakan Storyboard, kamu juga bisa membuat layout menggunakan kodingan Swift. Jadi, kamu tidak perlu lagi atau tidak sering-sering membuka file Storyboard. Bagi saya membuat layout menggunakan Swift lebih mudah dibaca dan dipahami daripada drag and drop menggunakan Storyboard. Namun, kekurangannya adalah kamu harus mem-build project untuk bisa melihat perubahan pada layout yang kamu buat.

Kelebihan :
  1. Loading cepat dibandingkan membuka Storyboard.
  2. Kodingan mudah dibaca dan dipahami.
  3. Reusable.
  4. Mudah me-resolve apabaila terjadi conflict.
Kekurangan : 
  1. Harus mem-build untuk melihat perubahan layout.
  2. Tidak ada ada fitur preview.
Membuat Layout Menggunakan SwiftUI


Swift adalah bahasa pemrograman hasil karya Apple untuk menggantikan bahasa Objective-C dan Cococoa Touch yang bisa dibilang sudah ketinggalan dan tidak relevan dengan perkembangan developer. Oleh karena itu Apple membuat Swift untuk mendukung ekosistem Apple ke arah lebih baik lebih modern. Tidak hanya itu, bahasa Swift juga bisa digunakan untuk bahasa server misalnya membuat API.

Jika kamu menggunakan Storyboard, di situ akan kamu temui di mana view dan controller dibuat secara terpisah. Sehingga banyak sekali kodingan yang tidak perlu. Karena dianggap obsolete, usang, dan tidak relevan. Apple menghadirkan teknologi atau fitur baru yang bernama SwiftUI. Pada SwiftUI view dan controller dibuat dalam satu file. Sehingga lebih simple, ringkas, dan lightweight atau mempunyai ukuran file yang lebih kecil dibandingkan menggunakan Storyboard atau UIKit.

Untuk menggunakan SwiftUI kamu harus menggunakan Xcode versi 11. Minimal kamu menggunakan OS Mojave meski tanpa ada fitur live preview. Jika kamu ingin menggunakan fitur live preview SwiftUI maka kamu harus meng-upgrade OS kamu ke Catalina.

Syarat lain untuk menjalankan SwiftUI di Xcode adalah minimal target aplikasi iOS 13. Sehingga apabila target aplikasi masih dibawah iOS13, misalnya iOS 12. Kamu masih bisa menjalankan SwifUI berbarengan dengan UIKit dengan memberikan exception yakni aplikasi iOS 13 akan menjalankan kodingan SefitUI sedangkan dibawah versi itu akan menjalankan kodingan di controller Storyboard yang menggunakn UIKit.

Saat ini adalah waktu yang tepat untuk berinvestasi menggunakan SwiftUI dan mulai migrasi atau meninggalkan Storyboard dan UIKit. Dukungan penuh Apple membuat masa depan SwiftUI semakin cerah. Untuk developer, syarat mengunggah  aplikasi ke App Store adalah minimal target aplikasi untuk iOS 13. Jadi, menurut saya ini adalah salah satu cara atau strategi Apple untuk menyuruh developer untuk mulai migrasi menggunakan SwiftUI.

Membuat layout menggunakan SwiftUI sangatlah mudah, mudah dipahami dan mudah dibaca. Apabila sebelumnya kalian sudah mengenal atau belajar Jetpack Compose di Android ataupun Flutter. Bersyukurlah, karena struktur kodenya sangat mirip (declarative UI) sehingga memudahkan untuk beradaptasi. Oke, sekian penjalsan dari saya.

Kelebihan :
  1. Kodingan mudah dibaca dan mudah dipahami sehingga mempersingkat waktu untuk membuat layout.
  2. Strukturnya sama dengan Jetpack Compose di android dan juga flutter sehingga memudahkan developer untuk beradaptasi.
  3. Karena view dan controller jadi satu jadinya lebih simple dan ringakas.
  4. Dukungan penuh dari Apple. 
  5. Storyboard sudah tidak relevan untuk kebutuhan programmer
Kekurangan :
  1. Karena baru jadi referensinya masih sedikit. Akan tetapi sudah mulai banyak course yang bermunculan baik di Udemy amupun di YouTube.