article

Wednesday, November 10, 2021

SwiftUI Fashion Shop App UI Design

SwiftUI Fashion Shop App UI Design

ContentView.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
//
//  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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
//
//  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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//
//  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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//
//  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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
//
//  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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//
//  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")]),
]

Posted by ednalan at 11:46 PM . Under .

Related Post