İçeriğe geç

UINavigationBar’ı gradient yapmak

Merhaba arkadaşlar bu yazımda İOS uygulamalarımızda sıklıkla kullandığımız UINavigationBar nesnesini sade düz renk yerine gradient bir yapıya nasıl kavuştururuz bunun örneğini vereceğim.

Gradient yapı bildiğimiz gibi modern ve meteryal tasarım anlayışında sıklıkla kullanılmakta. İconlar,buttonlar vs. hemen hemen tüm nesneler üzerinde kullanılmakta. Gayette güzel görünmekte. Sosyal medya uygulamalarından Snapchat ‘de gradient navigation bar kullanan uygulamalardan. Lafı fazla uzatmadan örnek kodu sizlerle paylaşayım.

Aşağıdaki extensionu kullanarak kolay bir şekilde navigation bara gradient ekleyebiliriz. Bu işlemi renkleri resim olarak çıktı alıp navigation bar üzerine yerleştirme şeklinde oluyor. Bunun içinde bar üzerinde bulunan setBackgroundImage fonksiyonunu kullanıyoruz.

extension UINavigationBar {
    
    func addGradient( colors : [UIColor]) {
        
        var frame: CGRect = self.bounds
        frame.size.height += 20
        
        setBackgroundImage(UINavigationBar.gradient(size: frame.size, colors: colors), for: .default)
    }
    
    private static func gradient(size : CGSize, colors : [UIColor]) -> UIImage? {
        
        let cgcolors = colors.map { $0.cgColor }
        
        UIGraphicsBeginImageContextWithOptions(size, true, 0.0)
        
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        
        defer { UIGraphicsEndImageContext() }
     
        var locations : [CGFloat] = [0.0, 1.0]
        
        guard let gradient = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: cgcolors as NSArray as CFArray, locations: &locations) else { return nil }
        
        context.drawLinearGradient(gradient, start: CGPoint(x: 0.0, y: 0.0), end: CGPoint(x: size.width, y: 0.0), options: [])
    
        let image = UIGraphicsGetImageFromCurrentImageContext()
        
        return image
    }
}

Kullanım:

navigationController?.navigationBar.addGradient(colors: [UIColor.color(hex: "#7f00ff") , UIColor.color(hex: "#e100ff")])

 

 

 

Tarih:iOS

Bu yazı yorumlara kapalı.

Copyright © 2020 Kenan Atmaca