article

Thursday, January 13, 2022

SwiftUI Grocery App UI

SwiftUI Grocery App UI
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
//
//  ContentView.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct ContentView: View {
     
    @State var selected = "Home"
     
    var body: some View {
         
        NavigationView{
            VStack{
                if self.selected == "Home"{
                    Home()
                }
                else if self.selected == "Wishlist"{
                    GeometryReader{_ in
                        Text("Wishlist")
                    }
                }
                else{
                    GeometryReader{_ in
                        Text("Cart")
                    }
                }
                CustomTabView(selected: $selected)
            }
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
 
struct CustomTabView : View {
     
    @Binding var selected : String
     
    var body : some View{
        HStack{
            ForEach(tabs,id: \.self){i in
                VStack(spacing: 10){
                     
                    Capsule()
                        .fill(Color.clear)
                        .frame(height: 5)
                        .overlay(
                            Capsule().fill(self.selected == i ? Color("Color") : Color.clear).frame(width: 55, height: 5)
                         )
                     
                    Button(action: {
                        self.selected = i
                    }) {
                        VStack{
                            Image(i).renderingMode(.original)
                            Text(i).foregroundColor(.black)
                        }
                    }
                }
            }
        }.padding(.horizontal)
    }
}
Home.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
//
//  Home.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct Home : View {
     
    @State var txt = ""
     
    var body : some View{
         
        VStack(spacing: 15){
            HStack(spacing: 12){
                Image("photo1").renderingMode(.original).resizable().frame(width: 30, height: 30)
                Text("Cairocoders").font(.body)
                 
                Spacer()
                 
                Button(action: {
                }) {
                    Image(systemName: "cart").renderingMode(.original)
                }
            }
 
            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 15){
                    HStack(spacing: 15){
                        HStack{
                            Image(systemName: "magnifyingglass").font(.body)
                            TextField("Search Groceries", text: $txt)
                        }.padding(10)
                        .background(Color("Color1"))
                        .cornerRadius(20)
                         
                        Button(action: {
                        }) {
                            Image(systemName: "mic").renderingMode(.original)
                        }
                    }
                     
                    Image("banner")
                        .resizable()
                        .frame(height: 170)
                        .cornerRadius(10)
                        .overlay(
                            VStack{
                                Spacer()
                                HStack{
                                    Text("GET 30% OFF").font(.title).foregroundColor(.white)
                                    Spacer()
                                }.padding()
                            }
                        )
                     
                    HStack{
                        Text("Categories").font(.title)
                         
                        Spacer()
                         
                        Button(action: {
                        }) {
                            Text("More")
                        }.foregroundColor(Color("Color"))
                         
                    }.padding(.vertical, 15)
                     
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 15){
                            ForEach(categories,id: \.self){i in
                                VStack{
                                    Image(i).renderingMode(.original)
                                    Text(i)
                                }
                            }
                        }
                    }
 
                    HomeBottomView()
                }
            }
        }//end VStack
        .padding(.horizontal)
        .background(Color.white)
    }
}
 
struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}
 
 
struct HomeBottomView : View {
     
    var body : some View{
         
        VStack(spacing: 15){
            HStack{
                Text("Deal of the Day").font(.title)
                 
                Spacer()
                 
                Button(action: {
                }) {
                    Text("More")
                }.foregroundColor(Color("Color"))
                 
            }.padding(.vertical, 15)
             
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 15){
                    ForEach(dealoftheday){i in
                        DealCellView(data: i)
                    }
                }
            }
             
            HStack{
                Text("Popular").font(.title)
                Spacer()
            }.padding(.vertical, 15)
             
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 15){
                    ForEach(recipeitems){i in
                        PopularCellView(data: i)
                    }
                }
            }
        } //End VStack
    }
}
 
struct DealCellView : View {
     
    var data : deal
    @State var show = false
     
    var body : some View{
        ZStack{
            NavigationLink(destination: Detail(show: self.$show, viewdata: data), isActive: self.$show) {
                Text("")
            }
            VStack(spacing: 10){
                Image(data.image).resizable().scaledToFill().frame(width: 150, height: 150).cornerRadius(10)
                     
                Text(data.name).fontWeight(.semibold)
                Text(data.price).foregroundColor(.green).fontWeight(.semibold)
            }.onTapGesture {
                self.show.toggle()
            }
        }
    }
}
 
struct PopularCellView : View {
     
    var data : popular
 
    var body : some View{
        ZStack{
            VStack(spacing: 10){
                Image(data.image).resizable().scaledToFill().frame(width: 150, height: 150).cornerRadius(10)
                 
                Text(data.name).fontWeight(.semibold)
                Text(data.price).foregroundColor(.green).fontWeight(.semibold)
            }
        }
    }
}
Detail.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
//
//  Detail.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct Detail : View {
     
    @Binding var show : Bool
    @State var count = 0
    let viewdata : deal
     
    var body : some View{
         
        VStack(spacing: 0){
            Image(viewdata.image)
                .resizable()
                .frame(height: UIScreen.main.bounds.height / 2.5)
                .edgesIgnoringSafeArea(.top)
                .overlay(
                    VStack{
                        HStack(spacing: 12){
                            Button(action: {
                                self.show.toggle()
                            }) {
                                Image(systemName: "arrow.left").renderingMode(.original)
                            }
                             
                            Spacer()
                             
                            Button(action: {
                            }) {
                                Image(systemName: "tray.and.arrow.down.fill").renderingMode(.original)
                            }
                             
                            Button(action: {
                            }) {
                                Image(systemName: "heart").renderingMode(.original)
                            }
                        }.padding()
                         
                        Spacer()
                    }
                )// End Overlay
             
            ScrollView(.vertical, showsIndicators: false) {
                VStack(alignment: .leading,spacing: 15){
                    Text(viewdata.name).font(.title)
                     
                    Text(viewdata.price).foregroundColor(.green)
                     
                    Divider().padding(.vertical, 15)
                     
                    HStack{
                        Text(viewdata.name)
                         
                        Spacer()
                         
                        Button(action: {
                        }) {
                            Image(systemName: "message.and.waveform").renderingMode(.original)
                        }
                    }
                     
                    Text("Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.").foregroundColor(.gray)
                     
                    HStack(spacing: 20){
                        Spacer(minLength: 12)
                        Button(action: {
                            self.count += 1
                        }) {
                            Image(systemName: "plus.circle").font(.largeTitle)
                        }.foregroundColor(.green)
                         
                        Text("\(self.count)")
                         
                        Button(action: {
                            if self.count != 0{
                                self.count -= 1
                            }
                        }) {
                            Image(systemName: "minus.circle").font(.largeTitle)
                        }.foregroundColor(.green)
                         
                        Button(action: {
                        }) {
                            Text("Add to Cart").padding()
                        }.foregroundColor(.white)
                        .background(Color("Color"))
                        .cornerRadius(12)
                         
                        Spacer(minLength: 12)
                    }
                }
                 
            }.padding()
            .background(RoundedCorner().fill(Color.white))
            .padding(.top, -80)
             
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
             
        }
    }
}
 
struct Detail_Previews: PreviewProvider {
    @State static var show = false
    static var previews: some View {
        Detail(show: $show, viewdata: deal(id: 1, name: "Banana", price: "5 / kg", image: "1"))
    }
}
 
struct RoundedCorner : 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
37
38
39
40
//
//  Model.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//
 
import SwiftUI
 
var tabs = ["Home","Wishlist","Cart"]
 
var categories = ["Fruits","Vegetables","Beverages","Meat","Breads"]
 
struct deal : Identifiable {
     
    var id : Int
    var name : String
    var price : String
    var image : String
}
 
struct popular : Identifiable {
     
    var id : Int
    var name : String
    var price : String
    var image : String
}
 
var dealoftheday = [
    deal(id: 0, name: "Strawberry", price: "5.00 / kg",image: "1"),
    deal(id: 1, name: "Pineapples", price: "3.00 / kg",image: "2"),
    deal(id: 2, name: "Banana", price: "3.00 / pack",image: "4")
]
 
var recipeitems = [
    popular(id: 0, name: "Apple", price: "2.99 / kg",image: "3"),
    popular(id: 1, name: "Salad", price: "4.99 / pack",image: "5"),
    popular(id: 2, name: "Broccoli", price: "5.69",image: "6")
]

Related Post