Custom Gradasi UIView Pada Storyboard


Disore tanpa sengaja kumenemukan senja 😆, senja ditengah hiruk pikuk penduduk jakarta yang pada sibuk bekerja. Sungguh indah biasan sang senja di kaca gedung pencakar langit apalagi dengan  sedikit tawa anak - anak yang hidup di rumah kecil tengah kota, makin terkesan  gimana gitu rasanya. Tapi itulah hidup,  hidup ini mudah berubah sebagaimana roda transjakarta, kadang berada diatas kadang berada dibawah. Yang penting jangan sombong,  selalu rendah hati  dan selalu optimis 😀.

Loh kok sok bijak gini ya ? maaf 😂,  lagi rindu senja sih. Tapi dengan adanya kejadian tadi, jadi teringat color gradient pada swift, apa coba hubungannya gradient sama cerita diatas 😏 ?, ada keduanya sama- sama terdiri dari beberapa unsur yang colab  menjadi satu kesatuan. Ehhmm.. sedikit betul sih , tapi gimana ya 😂.  Ya udah kembali ke topik tentang gradient,  dengan adanya gradient kita dapat menyatukan dua warna berbeda atau lebih. Misalkan warna hitam keputih, seperti gambar berikut ini.


Untuk Membuat gradient seperti diatas ada beberapa cara pembuatan, bisa melalui swiftnya atau juga bisa melalui storyboardnya 😄.  Pada kesempatan ini kita buat color gradasi yang dinamis, jadi perubahannya melalui Show the Attribute Inspector . biar bisa dipakai di UIView lainnya. tinggal pilih warnanya aja. pertama buat sebuah file swift nya kemudian import UIKit nya, setelah itu tinggal tambahkan class  berikut ini :

@IBDesignable
class GradientViewss: UIView {
    @IBInspectable var startColor:   UIColor = .black { didSet { updateColors() }}
    @IBInspectable var endColor:     UIColor = .white { didSet { updateColors() }}
    @IBInspectable var startLocation: Double =   0.05 { didSet { updateLocations() }}
    @IBInspectable var endLocation:   Double =   0.95 { didSet { updateLocations() }}
    @IBInspectable var horizontalMode:  Bool =  false { didSet { updatePoints() }}
    @IBInspectable var diagonalMode:    Bool =  false { didSet { updatePoints() }}
    
    override public class var layerClass: AnyClass { return CAGradientLayer.self }
    
    var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }
    
    func updatePoints() {
        if horizontalMode {
            gradientLayer.startPoint = diagonalMode ? CGPoint(x: 1, y: 0) : CGPoint(x: 0, y: 0.5)
            gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0.5)
        } else {
            gradientLayer.startPoint = diagonalMode ? CGPoint(x: 0, y: 0) : CGPoint(x: 0.5, y: 0)
            gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 1, y: 1) : CGPoint(x: 0.5, y: 1)
        }
    }
    func updateLocations() {
        gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
    }
    func updateColors() {
        gradientLayer.colors    = [startColor.cgColor, endColor.cgColor]
    }
    
    override public func layoutSubviews() {
        super.layoutSubviews()
        updatePoints()
        updateLocations()
        updateColors()
    }
}


Mudah bangetkan pembuatanya. tinggal panggil aja kelasnya, nanti akan muncul startview dan endviewnya. startview adalah warna atas sedangkan endview adalah warna bawah, tinggal nyesuain warna yang diinginkan 😊. Mudah banget kan  😚 !!







Custom Gradasi UIView Pada Storyboard Custom Gradasi UIView Pada Storyboard Reviewed by sdiik on أغسطس 07, 2019 Rating: 5

ليست هناك تعليقات:

يتم التشغيل بواسطة Blogger.