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 kodeColor.redatau jika kalian memakai UIKit cukup memanggilnya dengan
UIColor.redUntuk mengimport warna dari luar,
- Pada tab list item file pilih asset color
- Klik kanan new set color, lalu rename sesuai mau kamu
- Klik kanan pada folder asset color, pilih reveal in finder
- Cari file JSON berdasarkan nama warna tadi, terus buka pakai text editor lalu edit nilai RGB agar sesuai dengan warna yang kamu inginkan.
- 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
- Akan susah untuk tracing secara langsung siapa yang menggunakan warna tersebut (caller), kalau mau mencarinya harus menggunakan menu “search in workshop”.
- 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.
- 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)
0 komentar:
Posting Komentar