article

Wednesday, November 17, 2021

SwiftUI Movie Booking Design App UI

SwiftUI Movie Booking Design 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
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct ContentView: View {
       
    @State var show = false
     
    var body: some View {
        VStack {
          Home()
          SearchView()
             
          HStack {
            Text("All Movies")
                 
            Spacer()
                 
            Button(action: {
                     
            }) {
                HStack(spacing: 10) {
                    Text("Filter")
                    Image(systemName: "text.justify.right")
                }
            }.foregroundColor(.black)
          }.padding(.bottom, 15)
             
          Cards()
             
        }.padding()
    }
}
 
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Home
?
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
//
//  Home.swift
//  Swiftuitest
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct Home: View {
     
    @State private var selection = 1
     
    var body: some View {
        VStack(spacing: 15) {
            HStack {
                VStack(alignment: .leading, spacing: 15) {
                    Text("Browse").font(.largeTitle)
                     
                    Button(action: {
                         
                    }) {
                        HStack(spacing: 8) {
                            Picker(selection: $selection, label: Text("Movie In")) {
                                Text("Movies in Cinema 1").tag(1)
                                Text("Movies in Cinema 2").tag(2)
                            }
                            Image(systemName: "chevron.down").font(.body)
                        }
                    }
                    .foregroundColor(.black)
                }
                 
                Spacer()
                 
                Button(action: {
                     
                }) {
                    Image(systemName: "slider.horizontal.3")
                }
                 
            }
        }.padding(.top, 15)
    }
}
 
struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}
SearchView.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
//
//  SearchView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct SearchView: View {
    @State var txt = ""
     
    var body: some View {
         
        HStack(spacing: 15) {
            Image(systemName: "magnifyingglass").font(.body)
            TextField("Search Movies", text: $txt)
        }
        .padding()
        .foregroundColor(.black)
        .background(Color("Color"))
        .cornerRadius(20)
        //.padding(.vertical, 15)
    }
}
 
struct SearchView_Previews: PreviewProvider {
    static var previews: some View {
        SearchView()
    }
}
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
//
//  Cards.swift
//  Swiftuitest
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct Cards: View {
     
    @State var show = false
     
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing:15) {
                ForEach(datamodel) {rs in
                   
                    ScrollView(.horizontal,showsIndicators: false) {
                         
                        HStack(spacing : 15) {
                             
                            ForEach(rs.row) { i in
                                VStack(alignment: .leading, spacing: 12) {
                                    Image(i.image).renderingMode(.original).resizable().cornerRadius(15)
                                        .onTapGesture {
                                            self.show.toggle()
                                        }
                                    Text(i.name).font(.caption).lineLimit(1)
                                    Text(i.time).font(.caption)
                                }
                                .foregroundColor(Color.black.opacity(0.5))
                                .frame(width: UIScreen.main.bounds.width / 2 - 25, height: 240)
                            }
 
                        }
                    }
                }
            }
        }
        .padding(.horizontal, 10)
        .sheet(isPresented: $show) {
            Details()
        }
    }
}
 
struct Cards_Previews: PreviewProvider {
    static var previews: some View {
        Cards()
    }
}
Details.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
//
//  Details.swift
//  Swiftuitest
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct Details: View {
     
    @State var selected = ""
    @State var timeselection = ""
     
    var body: some View {
        VStack {
            Image("1").resizable().aspectRatio(1, contentMode: .fill).frame(height:250)
             
            VStack {
                VStack(spacing: 15) {
                    Text("Avengers").foregroundColor(.black)
                     
                    HStack(spacing: 15) {
                         
                        HStack {
                            Image(systemName: "star.fill").font(.caption)
                            Text("4.52")
                        }
                           
                        HStack {
                            Image(systemName: "clock").font(.caption)
                            Text("45 Min")
                        }
                         
                        HStack {
                            Image(systemName: "film").font(.caption)
                            Text("Imax")
                        }
                    }
                     
                    Divider().padding(.vertical, 15)
                    VStack(alignment: .leading) {
                        Text("StoryLine")
                            .background(Color.gray)
                            .foregroundColor(.white)
                            .padding(.bottom, 10)
                        Text("Earth's mightiest heroes must come together and learn to fight as a team if they are going to stop the mischievous Loki and his alien army from enslaving humanity.").font(.caption)
                    }
                }
                .padding()
                .background(Color("Color"))
                .foregroundColor(Color.black.opacity(0.5))
                .cornerRadius(25)
                 
                VStack(alignment: .leading) {
                    Text("Date")
                    HStack(spacing: 5) {
                        ForEach(dates) { i in
                             
                            Button(action: {
                                self.selected = i.date
                            }) {
                                VStack(spacing :5) {
                                    Text(i.date)
                                        .font(.system(size: 30, weight: .bold))
                                    Text(i.day)
                                }.padding()
                            }
                            .foregroundColor(Color.white)
                            .background(self.selected == i.date ? Color.blue : Color.gray)
                            .cornerRadius(10)
                        }
                    }
                    .padding(.vertical, 10)
                     
                    Text("Time")
                    HStack(spacing: 5) {
                        ForEach(times) { t in
                             
                            Button(action: {
                                self.timeselection = t.time
                            }) {
                                VStack(spacing :5) {
                                    Text(t.time)
                                }.padding()
                            }
                            .foregroundColor(Color.white)
                            .background(self.timeselection == t.time ? Color.blue : Color.gray)
                            .cornerRadius(10)
                        }
                    }
                    .padding(.vertical, 10)
                }
                 
 
                 
                HStack(spacing: 15) {
                    Text("$45")
                     
                    Button(action : {
                         
                    }) {
                        Text("Book Now").padding(.vertical, 15).padding(.horizontal, 15)
                    }
                    .foregroundColor(.white)
                    .background(Color.orange)
                    .clipShape(Capsule())
                }.padding(.top, 15)
                 
                Spacer()
            }
            .padding(.horizontal, 25)
            .padding(.top, -35)
        }
    }
}
 
struct Details_Previews: PreviewProvider {
    static var previews: some View {
        Details()
    }
}
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//
//  Model.swift
//  Swiftuitest
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct type : Identifiable {
    var id : Int
    var row : [row]
}
 
struct row : Identifiable {
    var id : Int
    var name : String
    var time : String
    var image : String
}
 
struct datetype : Identifiable {
    var id : Int
    var date : String
    var day : String
}
 
var datamodel = [type(id: 0, row: [
    row(id: 0, name: "Avengers", time: "1h 12m", image: "1"),
    row(id: 1, name: "Onward", time: "1h 42m", image: "2"),
    row(id: 2, name: "Soul", time: "1h 40m", image: "3"),
]),
type(id: 1, row: [
    row(id: 0, name: "Cruella", time: "1h 12m", image: "4"),
    row(id: 1, name: "Jungle Cruise", time: "1h 42m", image: "5"),
    row(id: 2, name: "The Call of the Wild", time: "1h 40m", image: "6"),
]),
type(id: 2, row: [
    row(id: 0, name: "Joker", time: "1h 12m", image: "7"),
    row(id: 1, name: "Mulan", time: "1h 42m", image: "8"),
    row(id: 2, name: "Mortal Komba", time: "1h 40m", image: "9"),
])]
 
var dates = [datetype(id: 0, date: "15", day: "01/20"),
             datetype(id: 1, date: "16", day: "01/20"),
             datetype(id: 2, date: "17", day: "01/20"),
             datetype(id: 3, date: "18", day: "01/20")]
 
struct timetype : Identifiable {
    var id : Int
    var time : String
}
 
var times = [timetype(id: 0, time: "0:00"),
            timetype(id: 1, time: "1:00"),
            timetype(id: 2, time: "2:00"),
            timetype(id: 3, time: "3:00")]

Posted by ednalan at 2:57 PM . Under .

Related Post