SwiftUI ile Custom Side Menu oluşturmak

Merhabalar bu yazımda SwiftUI ile birlikte Yandan açılır Side Menu yapımını sizlerle paylaşacağım.

SwiftUI ile birlikte istediğiniz tasarımı Auto Layout olmadan tüm cihazlarda aynı şekilde gösterebilir ve bu arayüzleri daha sonrasında farklı projelerde kolay bir şekilde kullanabilirsiniz. Buda biz geliştiricilere ek hız ve konfor sağlar. Böyleye uygulamanın tasarımı ile vakit kaybetmeden esas yapacağı işe odaklanmış oluruz.

UIKit ile çoğu uygulamada kullandığımız ve uğraşmayıp çoğu zaman framework kullandığımız yandan açılır menüleri, SwiftUI ile istediğiniz tarzda ve kolay bir şekile yazabilirsiniz.

Aşağıda yazdığım örneği inceleyebilir ve kendi uygulamalarınızda değişiklikler yaparak kullanabilirsiniz.

var edges = UIApplication.shared.windows.first?.safeAreaInsets
var screen = UIScreen.main.bounds

struct ContentView: View {
    
    @State var isShowMenu: Bool = true
    
    var body: some View {
        ZStack {
            VStack {
                HStack {
                    Button(action: {
                        self.isShowMenu = true
                    }) {
                        Image("menu")
                            .font(.system(size: 32, weight: .light, design: .default))
                            .frame(width: 32, height: 32, alignment: .center)
                            .foregroundColor(.black)
                    }
                    .padding()
                    .padding(.top, edges?.top)
                    .padding(.top, 5)
                    Spacer()
                    
                    Image("avatar")
                        .resizable()
                        .frame(width: 32, height: 32, alignment: .center)
                        .clipShape(Circle())
                        .padding()
                        .padding(.top, edges?.top)
                }
                
                Spacer()
            }
            
            MenuView(openMenu: $isShowMenu)
        }
    }
}

struct MenuView: View {
    
    @Binding var openMenu: Bool
    
    var body: some View {
        HStack {
            Color.black.opacity(0.7)
                .edgesIgnoringSafeArea(.all)
            Spacer(minLength: 0)
            VStack {
                HStack {
                    Spacer()
                    Button(action: {
                        self.openMenu = false
                    }, label: {
                        Image(systemName: "arrow.right")
                            .font(.system(size: 20))
                            .frame(width: 48, height: 48)
                            .foregroundColor(.white)
                    })
                    .padding()
                    .padding(.top, edges?.top)
                }
                
                VStack(alignment: .leading) {
                    HStack {
                        Image("avatar")
                            .resizable()
                            .frame(width: 64, height: 64, alignment: .center)
                            .clipShape(Circle())
                            .padding()
                    
                        VStack(alignment: .leading, spacing: 4) {
                            Text("@uikenan")
                                .fontWeight(.black)
                                .foregroundColor(.white)
                            Text("kenanatmaca.com")
                                .font(.system(size: 14))
                                .fontWeight(.medium)
                                .foregroundColor(.white)
                        }
                        .padding(.leading, 0)
                        .padding(.trailing, 14)
                    }
                    
                    MenuItem(imageName: "person.crop.circle.fill", title: "User", color: .white)
                    MenuItem(imageName: "link.circle.fill", title: "Links", color: .white)
                    MenuItem(imageName: "flame.fill", title: "Upgrade Pro", color: .white)
                    MenuItem(imageName: "play.rectangle.fill", title: "Videos", color: .white)
                    MenuItem(imageName: "suit.heart.fill", title: "Favorites", color: .white)
                    
                    Spacer(minLength: 0)
                    
                    HStack(alignment: .center) {
                        Spacer()
                        Text("Copyright © 2020 X App")
                            .font(.system(size: 11))
                            .foregroundColor(.white)
                        Spacer()
                    }
                    .padding(.bottom ,edges?.bottom)
                    .padding(.bottom, 20)
                }
                .padding(.top, -20)
                
                Spacer()
            }
            .frame(width: screen.width * 0.7, height: screen.height + (edges?.top ?? 0))
            .edgesIgnoringSafeArea(.all)
            .background(Color.blue)
        }
        .offset(x: !openMenu ? -400 : 0, y: 0)
        .animation(.spring())
    }
}

struct MenuItem: View {
    
    var imageName: String
    var title: String
    var color: Color
    
    var body: some View {
        HStack {
            Image(systemName: imageName)
                .font(.system(size: 24))
                .foregroundColor(color)
                .padding()
            Text(title)
                .font(.system(size: 15))
                .fontWeight(.bold)
                .foregroundColor(color)
                .padding(.leading, -12)
        }
    }
}