İçeriğe geç

SwiftUI ile Gradient kullanmak

Merhabalar bu yazımda SwiftUI ile birlike uygulamalarınızda kolay bir şekilde Gradient nesneler oluşturmayı göstereceğim.

Material tasarım anlayışı ile birlikte yükselişe geçen gradient renk kullanımı, günümüzde hala yoğun bir şekilde devam etmek. Uygulamalara arka fon veya elementlerde dikkat çekici, güzel bir hava katmakta.

Aşağıda yazdığım örneği inceleyebilirsiniz.

LinearGradient yerine, AngularGradient veya RadialGradient‘ de kullanabilirsiniz.

struct GradientBackgroundView: View {
    
    var colors:[Color]
    
    var body: some View {
        Rectangle()
            .fill(LinearGradient(gradient: Gradient(colors: colors), startPoint: .top, endPoint: .bottom))
            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height, alignment: .center)
            .edgesIgnoringSafeArea(.all)
    }
}

Daha sonrasında yazdığımız bu gradient nesnesini ana view içerisinde kullanalım.

struct CustomView:View {
    
    var body: some View {
        ZStack {
            GradientBackgroundView(colors: [Color(hex: 0x8E2DE2), Color(hex: 0x4A00E0)])
            Text("SwiftUI ❤️")
                .font(.custom("Helvetica Neue", size: 40))
                .fontWeight(.bold)
                .foregroundColor(.white)
                .shadow(color: .black, radius: 10, x: 0, y: 1)
        }
    }
}

Hex ile Color oluşturmak için kullandığım extension init sizlerle paylaşayım.

extension Color {
    init(hex: Int, alpha: Double = 1) {
        let components = (
            R: Double((hex >> 16) & 0xff) / 255,
            G: Double((hex >> 08) & 0xff) / 255,
            B: Double((hex >> 00) & 0xff) / 255
        )
        self.init(
            .sRGB,
            red: components.R,
            green: components.G,
            blue: components.B,
            opacity: alpha
        )
    }
}

Çeşitli gradient renkler bulmak istiyorsanız uiGradients sayfasınada göz atabilirsiniz.

 

 

Tarih:SwiftUI

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2020 Kenan Atmaca