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

May 30, 2020

/images/blog/calamria-app-image-from-dribbble.png

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

  • 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.

 

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)


Profile

Written by Aprilian Daini
~ A person who interested to build a product.