article

Friday, November 5, 2021

SwiftUI Travelling App Design

SwiftUI Travelling App Design

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

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        TabView{
            Home().tabItem {
                Image(systemName: "house").font(.title)
            }
            
            Text("activity").tabItem {
                Image(systemName: "person.fill.checkmark").font(.title)
            }
            
            Text("search").tabItem {
                Image(systemName: "magnifyingglass.circle").font(.title)
            }
            
            Text("person").tabItem {
                Image(systemName: "gear").font(.title)
            }
        }
    }
}

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

import SwiftUI

struct Home : View {
    
    @State var selectedTab = Tabs.FirstTab
    
    var body : some View{
        
        VStack(alignment: .leading,spacing: 12){
            HStack{
                Button(action: {
                }) {
                    Image(systemName: "slider.horizontal.3")
                }
                
                Spacer()
                
                Button(action: {
                }) {
                    Image("photo1")
                        .resizable()
                        .frame(width: 40, height: 40)
                        .clipShape(Circle())
                }
            }
            
            Text("Find More").fontWeight(.heavy).font(.largeTitle).padding(.top,15)
            HStack{
                HStack {
                    
                    Text("Experiences").fontWeight(.heavy)
                        .foregroundColor(selectedTab == .FirstTab ? Color.red : Color.black)
                    .onTapGesture {
                        self.selectedTab = .FirstTab
                    }
                    
                    Spacer()
                    
                    Text("Adventures").fontWeight(.heavy)
                        .foregroundColor(selectedTab == .SecondTab ? Color.red : Color.black)
                    .onTapGesture {
                        self.selectedTab = .SecondTab
                    }
                    
                    Spacer()
                    
                    Text("Activities").fontWeight(.heavy)
                        .foregroundColor(selectedTab == .ThirdTab ? Color.red : Color.black)
                    .onTapGesture {
                        self.selectedTab = .ThirdTab
                    }
                }
                
                Spacer()
            }.padding([.top],30)
            .padding(.bottom, 15)
        
            if selectedTab == .FirstTab {
                FirstTabView()
            } else if selectedTab == .SecondTab {
                SecondTabView()
            } else {
                ThirdTabView()
            }
        }.padding()
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

struct FirstTabView : View {
    var body : some View {
        ExperiencesTab()
        BottomView().padding(.top, 10)
    }
}

struct SecondTabView : View {
    var body : some View {
        AdventuresTab()
        BottomView().padding(.top, 10)
    }
}

struct ThirdTabView : View {
    var body : some View {
        ActivitiesTab()
        BottomView().padding(.top, 10)
    }
}

enum Tabs {
    case FirstTab
    case SecondTab
    case ThirdTab
}
BottomView.swift
//
//  BottomView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct BottomView : View {
      
      var body : some View{
          
          VStack{
              HStack{
                  Text("What you want ?").fontWeight(.heavy)
                  Spacer()
                  
                  Button(action: {
                  }) {
                      Text("View all").foregroundColor(.gray)
                  }
                  
              }.padding([.top], 15)
              
              ScrollView(.horizontal, showsIndicators: false) {
                  HStack(spacing: 35){
                      Button(action: {
                      }) {
                          VStack(spacing: 8){
                              Image("whatyouwant_01")
                                  .resizable().frame(width: 50, height: 50).cornerRadius(10)
                              Text("Hiking").foregroundColor(.gray)
                          }
                      }
                      
                      Button(action: {
                      }) {
                          VStack(spacing: 8){
                              Image("whatyouwant_02")
                                  .resizable().frame(width: 50, height: 50).cornerRadius(10)
                              Text("Ski").foregroundColor(.gray)
                          }
                      }
                          
                      Button(action: {
                              
                      }) {
                          VStack(spacing: 8){
                              Image("whatyouwant_03")
                                  .resizable().frame(width: 50, height: 50).cornerRadius(10)
                              Text("Sky Diving").foregroundColor(.gray)
                          }
                      }
                      Button(action: {
                              
                      }) {
                          VStack(spacing: 8){
                              Image("whatyouwant_04")
                                  .resizable().frame(width: 50, height: 50).cornerRadius(10)
                              Text("SkateBoard").foregroundColor(.gray)
                          }
                      }
                  }
              }.padding(.leading, 20)
              .padding([.top,.bottom], 15)
          }
      }
  }

struct BottomView_Previews: PreviewProvider {
    static var previews: some View {
        BottomView()
    }
}
//
//  Detail.swift
//  Swiftuitest
//
//  Created by Cairocoders on 11/4/21.
//

import SwiftUI

struct Detail : View {
    
    var travel : Travelling
    
    var body : some View{
        
        VStack{
            GeometryReader { geometry in
                Image(travel.image)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .offset(y: geometry.frame(in: .global).minY/50)
                    .padding(.bottom, -200)
                    .edgesIgnoringSafeArea(.all)
            }
            GeometryReader{geo in
                ScrollView(.vertical, showsIndicators: true) {
                    
                    VStack(alignment: .leading){
                        
                        VStack(alignment: .leading, spacing: 10){
                            HStack{
                                VStack(alignment: .leading){
                                    Text(travel.name).fontWeight(.heavy).font(.largeTitle)
                                }
                                
                                Spacer()
                                Text("$587").foregroundColor(Color.orange).font(.largeTitle)
                            }
                        }.padding()
                        
                        VStack(alignment: .leading, spacing: 15){
                            HStack(spacing: 5){
                                Image(systemName: "mappin.and.ellipse").renderingMode(.original)
                                Text(travel.location).foregroundColor(Color.orange)
                            }
                            
                            HStack(spacing : 8){
                                ForEach(0..<travel.rating){_ in
                                    Image(systemName: "star.fill").font(.body).foregroundColor(.yellow)
                                }
                            }
                            
                            Text("People").fontWeight(.heavy)
                            Text("Number Of People In Your Group").foregroundColor(.gray)
                            HStack(spacing: 6){
                                ForEach(0..<5){i in
                                    Button(action: {
                                        
                                    }) {
                                        Text("\(i + 1)").foregroundColor(.white).padding(20)
                                    }.background(Color.orange)
                                    .cornerRadius(8)
                                }
                            }
                        }.padding(.horizontal,15)
                        
                       detailBottom()
                    }
                }
                
            }.background(Color.white)
            .clipShape(Rounded())
            .padding(.top, -75)
        }
    }
}

struct Detail_Previews: PreviewProvider {
    static var previews: some View {
        let travels =  Travelling(id: 1, name: "test", image: "details", rating: 1, location: "Olongapo")
        return Detail(travel: travels)
    
    }
}
detailBottom.swift
 
//
//  detailBottom.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct detailBottom : View {
    
    var body : some View{
        
        VStack(alignment: .leading, spacing: 10){
            Text("Description").fontWeight(.heavy)
            Text("Towering redwoods, peaceful parkland and the magnificent coast are just some of the landscapes that make the Peninsula and South Bay extraordinary.").foregroundColor(.gray)
            
            HStack(spacing: 8){
                Button(action: {
                    
                }) {
                    Image(systemName: "bookmark")
                }
                
                Button(action: {
                    
                }) {
                    HStack(spacing: 6){
                        Text("Book Your Experience")
                        Image(systemName: "arrow.right.circle").renderingMode(.original)
                    }.foregroundColor(.white)
                    .padding()
                }.background(Color.orange)
                .cornerRadius(8)
            }.padding(.top, 6)
            
        }.padding()
    }
}

struct detailBottom_Previews: PreviewProvider {
    static var previews: some View {
        detailBottom()
    }
}
ExperiencesTab.swift
 
//
//  ExperiencesTab.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ExperiencesTab: View {
    
    @State var show = false
    @State var idSelected = 1
    @State var imageSelected = "fishing"
    @State var nameSelected = "Fishing Time"
    @State var locationSelected = "Olongapo City"
    @State var ratingSelected = 5
    var body : some View{
        
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 20){
                
                ForEach(data){i in
                    VStack(alignment: .leading,spacing: 12){
                        Button(action: {
                            self.show.toggle()
                            self.idSelected = i.id
                            self.imageSelected = i.image
                            self.nameSelected = i.name
                            self.locationSelected = i.location
                            self.ratingSelected = i.rating
                        }) {
                            Image(i.image)
                                .resizable().frame(width: 200, height: 300).cornerRadius(20)
                        }
                        Text(i.name).fontWeight(.heavy)
                        HStack(spacing: 5){
                            Image(systemName: "mappin.and.ellipse").renderingMode(.original)
                            Text(i.location).foregroundColor(.gray)
                        }
                    }
                }
            }
            .sheet(isPresented: $show) {
                Detail(travel: Travelling(id: self.idSelected, name: self.nameSelected, image: self.imageSelected, rating: self.ratingSelected, location: self.locationSelected))
            }
        }
    }
}

struct ExperiencesTab_Previews: PreviewProvider {
    static var previews: some View {
        ExperiencesTab()
    }
}
AdventuresTab.swift
 
//
//  AdventuresTab.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct AdventuresTab: View {
    @State var show = false
    
    var body : some View{
        
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 20){
                VStack(alignment: .leading,spacing: 12){
                    Button(action: {
                        self.show.toggle()
                    }) {
                        Image("adventure1")
                            .resizable().frame(width: 200, height: 300).cornerRadius(20)
                    }
                    Text("Travel Time").fontWeight(.heavy)
                    HStack(spacing: 5){
                        Image(systemName: "mappin.and.ellipse").renderingMode(.original)
                        Text("Olongapo City").foregroundColor(.gray)
                    }
                }
                
                VStack(alignment: .leading,spacing: 12){
                    Button(action: {
                        self.show.toggle()
                    }) {
                        Image("adventure2")
                            .resizable().frame(width: 200, height: 300).cornerRadius(20)
                    }
                    Text("Family Camping").fontWeight(.heavy)
                    HStack(spacing: 5){
                        Image(systemName: "mappin.and.ellipse").renderingMode(.original)
                        Text("Subic Bay").foregroundColor(.gray)
                    }
                }
                
                VStack(alignment: .leading,spacing: 12){
                    Button(action: {
                        self.show.toggle()
                    }) {
                        Image("adventure3")
                            .resizable().frame(width: 200, height: 300).cornerRadius(20)
                    }
                    Text("Travelling").fontWeight(.heavy)
                    HStack(spacing: 5){
                        Image(systemName: "mappin.and.ellipse").renderingMode(.original)
                        Text("Clark").foregroundColor(.gray)
                    }
                }
            }
        }.sheet(isPresented: $show) {
            Detail(travel: Travelling(id: 1, name: "Fishing Time", image: "details", rating: 5, location: "Olongapo City"))
        }
    }
}

struct AdventuresTab_Previews: PreviewProvider {
    static var previews: some View {
        AdventuresTab()
    }
}
ActivitiesTab.swift
 
//
//  ActivitiesTab.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ActivitiesTab: View {
    @State var show = false
    
    var body : some View{
        
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 20){
                VStack(alignment: .leading,spacing: 12){
                    Button(action: {
                        self.show.toggle()
                    }) {
                        Image("travelling1")
                            .resizable().frame(width: 200, height: 300).cornerRadius(20)
                    }
                    Text("Wipe-clean").fontWeight(.heavy)
                    HStack(spacing: 5){
                        Image(systemName: "mappin.and.ellipse").renderingMode(.original)
                        Text("Olongapo City").foregroundColor(.gray)
                    }
                }
                
                VStack(alignment: .leading,spacing: 12){
                    Button(action: {
                        self.show.toggle()
                    }) {
                        Image("travelling2")
                            .resizable().frame(width: 200, height: 300).cornerRadius(20)
                    }
                    Text("Family Camping").fontWeight(.heavy)
                    HStack(spacing: 5){
                        Image(systemName: "mappin.and.ellipse").renderingMode(.original)
                        Text("Subic Bay").foregroundColor(.gray)
                    }
                }
                
                VStack(alignment: .leading,spacing: 12){
                    Button(action: {
                        self.show.toggle()
                    }) {
                        Image("travelling3")
                            .resizable().frame(width: 200, height: 300).cornerRadius(20)
                    }
                    Text("Travelling").fontWeight(.heavy)
                    HStack(spacing: 5){
                        Image(systemName: "mappin.and.ellipse").renderingMode(.original)
                        Text("Clark").foregroundColor(.gray)
                    }
                }
            }
        }.sheet(isPresented: $show) {
            Detail(travel: Travelling(id: 1, name: "Fishing Time", image: "details", rating: 5, location: "Olongapo City"))
        }
    }
}

struct ActivitiesTab_Previews: PreviewProvider {
    static var previews: some View {
        ActivitiesTab()
    }
}
Rounded.swift
 
//
//  Rounded.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct Rounded : Shape {
    
    func path(in rect: CGRect) -> Path {
        
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topLeft,.topRight], cornerRadii: CGSize(width: 40, height: 40))
        return Path(path.cgPath)
    }
}

struct Rounded_Previews: PreviewProvider {
    static var previews: some View {
        Rounded()
    }
}
Model.swift
 
//
//  Model.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import Foundation

struct Travelling : Identifiable {
    
    var id : Int
    var name : String
    var image : String
    var rating : Int
    var location : String
}

var data = [
    Travelling(id: 0, name: "Fishing Time", image: "fishing", rating: 2, location: "Olongapo City"),
    Travelling(id: 1, name: "Family Camping", image: "family_camping", rating: 5, location: "Subic Bay"),
    Travelling(id: 2, name: "Travelling", image: "traveling", rating: 3,location: "Clark")
]

Related Post