SwiftUI ile Neumorphic tasarım kullanımı

Merhabalar bu yazımda SwiftUI ile birlikte yeni tasarım trendi olabilecek Neumorphic tasarım trendine uygun bir nesne oluşturmayı göstereceğim.

Neumorphic tasarımdan kısaca bahsetmek gerekirse, nesnelere gölge vererek boyut kazandırmaktır. Bu işlem gerçekleştirilirken temiz ve dikkat çekici nesneler oluşturulabilinir. Bu konu hakkında daha detaylı olarak ayrı bir yazı sizlerle paylaşacağım. Bu tasarım yapısı ile oluşturulmuş muhteşem tasarımları dribble üzerinden inceleyebilirsiniz.

Bu tasarım yapısını SwiftUI ile çok kolay ve efektif bir şekilde kullanabiliriz.

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

struct ContentView: View {
    var body: some View {
        ZStack {
            Color(red: 225/255, green: 225/255, blue: 235/255)
            Button (action: {}) {
                Image(systemName: "star.fill")
                    .resizable()
                    .frame(width: 32, height: 32, alignment: .center)
                    .foregroundColor(Color.black.opacity(0.2))
                    .frame(width: 64, height: 64, alignment: .center)
                    .shadow(color: .white, radius: 8, x: -8, y: -8)
                    .shadow(color: Color(red: 163/255, green: 177/255, blue: 198/255), radius: 8, x: 9, y: 9)
                    .padding()
                    .background(Color(red: 224/255, green: 229/255, blue: 236/255))
                    .cornerRadius(20)
            }
            .shadow(color: .white, radius: 8, x: -8, y: -8)
            .shadow(color: Color(red: 163/255, green: 177/255, blue: 198/255), radius: 8, x: 9, y: 9)
        }
    }
}

Bu yapıda ters noktalara gölge vererek nesnelerde derinlik algısı yaratabilirsiniz.