article

Wednesday, November 10, 2021

SwiftUI Fashion Shop App UI Design

SwiftUI Fashion Shop App UI Design

ContentView.swift
 
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        NavigationView{
            ZStack(alignment: .leading) {
                TabView{
                    MainView().tabItem {
                    
                        Image(systemName: "house").font(.title)
                    }
                     
                    Text("Discover").tabItem {
                        Image(systemName: "magnifyingglass").font(.title)
                    }
                     
                    Text("Favorites").tabItem {
                        Image(systemName: "suit.heart").font(.title)
                    }
                     
                    Text("Alert").tabItem {
                        Image(systemName: "bell").font(.title)
                    }
                }.accentColor(.red)
                .edgesIgnoringSafeArea(.top)
            }
            .navigationBarTitle(Text(""), displayMode: .inline)
            .navigationBarItems(leading:
                HStack {
                    Button(action: {
                        withAnimation {
                           
                        }
                        print("Open the side menu")
                    }) {
                        Image("photo1").resizable().frame(width: 35, height: 35).clipShape(Circle())
                    }
                 
                    Text("Home").font(.title)
                }
                ,trailing:
                    HStack(spacing: 18){
                                        
                        Button(action: {
                        }) {
                           Image(systemName: "magnifyingglass")
                        }
                                        
                        Button(action: {
                        }) {
                            Image(systemName: "bell")
                        }
                                        
                        Button(action: {
                        }) {
                           Image(systemName: "cart")
                        }
                     }
            )
        }// End Navigation
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
MainView.swift
 
//
//  MainView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct MainView : View {
    
    @State var selected = "Dress"
    @State private var selection = 1
    var body : some View{
        
        VStack(alignment: .leading,spacing: 12){
            HStack{
                
                HStack{
                    
                    
                    Button(action: {
                        
                    }) {
                        
                        HStack{
                            
                            Picker(selection: $selection, label: Text("Category")) {
                                 Text("Casual Dress").tag(1)
                                 Text("Pants").tag(2)
                            }.foregroundColor(.black)
                            .background(Color.white)
                            .font(.title)
                            
                            Spacer()
                            
                            Image(systemName: "arrow.down.circle")
                            
                        }.padding()
                        
                    }.foregroundColor(.black)
                    .background(Color.white)
                    
                    
                    Button(action: {
                        
                        
                    }) {
                        
                        Image(systemName: "slider.vertical.3")
                        
                    }.background(Color.white)
                }
            }
            
            HStack{
                
                ForEach(types,id: \.self){ i in
                    
                    HStack{
                        
                        Button(action: {
                            
                            self.selected = i
                            
                        }) {
                            
                            Text(i).padding()
                        }
                        .foregroundColor(self.selected == i ? .white : .black)
                        .background(self.selected == i ? Color.black : Color.clear)
                        .cornerRadius(10)
                        
                        Spacer(minLength: 0)
                        
                    }
                }
            }
            
            DetailsScroll()
            
        }.padding()
        .background(Color("Color"))
        .animation(.spring())
        
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
    }
}
DetailsScroll.swift
 
//
//  DetailsScroll.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct DetailsScroll : View {
    
    @State var show = false
    
    var body : some View{
        
        ScrollView(.vertical, showsIndicators: false) {
            
            VStack(spacing: 12){
                
                ForEach(datas){i in
                    
                    HStack{
                        
                        ForEach(i.rows){j in
                            
                            Cards(row: j)
                        }
                    }
                }
            }
        }
    }
}

struct DetailsScroll_Previews: PreviewProvider {
    static var previews: some View {
        DetailsScroll()
    }
}
Cards.swift
 
//
//  Cards.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct Cards : View {
    
    var row : row
    @State var show  = false
    
    
    var body : some View{
        
        VStack(spacing: 8){
            
            NavigationLink(destination: DetailView(show: $show), isActive: $show) {
                
                Image(row.image).renderingMode(.original).resizable().frame(width: UIScreen.main.bounds.width / 2 - 25, height: 240)
            }
            
           
            
            HStack{
                
                VStack(alignment: .leading, spacing: 10){
                    
                    Text(row.name)
                    Text(row.price).fontWeight(.heavy)
                    
                }
                
                Spacer()
                
                Button(action: {
                    
                }) {
                    
                    Image(systemName: "text.redaction")
                    
                }.padding(.trailing, 15)
            }
        }
    }
}

struct Cards_Previews: PreviewProvider {
    static var previews: some View {
        Cards(row: row(id: 1, name: "Test", price: "$199", image: "details"))
    }
}
DetailView.swift
 
//
//  DetailView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct DetailView : View {
    
    @Binding var show : Bool
    @State var size = ""
    
    var body : some View{
        
        VStack(spacing : 0){
            
            HStack(spacing: 18){
                
                Button(action: {
                    
                    self.show.toggle()
                    
                }) {
                    
                    Image(systemName: "arrow.left")
                }
                
                Spacer()
                
                Button(action: {
                    
                }) {
                    
                    Image(systemName: "magnifyingglass")
                }
                
                Button(action: {
                    
                }) {
                    
                    Image(systemName: "cart")
                }

            }.navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
            .padding(15)
                
            
            Image("dress4").resizable()
            
            VStack(alignment: .leading ,spacing: 15){
                
                HStack{
                    
                    VStack(alignment: .leading, spacing: 8){
                        
                        Text("Dresses Slimfit").font(.largeTitle)
                        Text("$199.99").fontWeight(.heavy)
                    }
                    
                    Spacer()
                    
                    HStack(spacing: 10){
                        
                        Circle().fill(Color.green).frame(width: 20, height: 20)
                        Circle().fill(Color.blue).frame(width: 20, height: 20)
                        Circle().fill(Color.red).frame(width: 20, height: 20)
                    }
                }

                
                Text("Fitted top made from a polyamide blend. Features wide straps and chest reinforcement.")
                
                
                
                Text("Select Size")
                
                HStack{
                    
                    ForEach(sizes,id: \.self){i in
                        
                        Button(action: {
                            
                            self.size = i
                            
                        }) {
                            
                            Text(i).padding().border(Color.black, width: self.size == i ? 1.5 : 0)
                            
                        }.foregroundColor(.black)
                    }
                }

                
                HStack{
                    
                    Button(action: {
                        
                    }) {
                        
                        Text("Add To Cart").padding().border(Color.black, width: 1.4)
                        
                    }.foregroundColor(.black)
                    
                    Spacer()
                    
                    Button(action: {
                        
                    }) {
                        
                        Text("Buy Now").padding()
                        
                    }.foregroundColor(.white)
                    .background(Color.black)
                    .cornerRadius(10)
                    
                }.padding([.leading,.trailing], 15)
                .padding(.top, 15)
                
            }.padding()
            .background(rounded().fill(Color.white))
            .padding(.top, -50)
            
        }
    }
}

struct DetailView_Previews: PreviewProvider {
    @State static var show = false
    
    static var previews: some View {
        DetailView(show: $show)
    }
}

struct rounded : Shape {
    
    func path(in rect: CGRect) -> Path {
    
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 35, height: 35))
        
        return Path(path.cgPath)
    }
}
Model.swift
 
//
//  Model.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct type : Identifiable{
    
    var id : Int
    var rows : [row]
}

struct row : Identifiable {
    
    var id : Int
    var name : String
    var price : String
    var image : String
   
}

var sizes = ["S","M","X","XL"]

var types = ["Dress","Pants","Blazers","Jackets"]

var datas = [
    
    type(id: 0,rows: [row(id:0,name: "Trendy Sexsy", price: "$56", image: "dress1"),
                      row(id:1,name: "Floral Smock", price: "$120", image: "dress2")]),

    type(id: 2,rows: [row(id:0,name: "Backless Dress", price: "$136", image: "dress3"),
                      row(id:1,name: "Dresses Slimfit", price: "$150", image: "dress4")]),
]

Related Post