article

Wednesday, February 16, 2022

SwiftUI UnSpash App UI

SwiftUI UnSpash App UI

ContentView.swift
 
//
//  ContentView.swift
//  swiftuidev15ios
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView : View {
    
    @State var tabs = ["Wallpapers","Architecture","Nature","People", "Fashion", "Film", "Food & Drink", "Health & Wellnes"]
    @State var txt = ""
    @State var selectedTab = "Nature"
    
    @State var selectedData : [[String]] = [["n1","n2"],["n3","n4"],["n5","n6"]]
    
    @State var wallpaper = [["w1","w2"],["w3","w4"]]
    @State var architecture = [["a1","a2"],["a3","a4"]]
    @State var nature = [["n1","n2"],["n3","n4"],["n5","n6"]]
    @State var people = [["p1","p2"],["p3","p4"]]
    
    var body : some View{
        
        VStack{
            HStack{
                Button(action: {
                    
                }) {
                    Image(systemName: "slider.horizontal.3")
                }
                
                Spacer()
                
                Button(action: {
                    
                }) {
                    Image("logo").renderingMode(.original).resizable().frame(width: 25, height: 25)
                }
                
            }.padding()
            .background(Color.white)
            .overlay(Image("unsplash").renderingMode(.original).resizable().frame(width: 150, height: 25))
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack(alignment: .leading, spacing: 15) {
                    HStack{
                        Image(systemName: "magnifyingglass")
                        TextField("Search", text: self.$txt)
                    }.padding(12)
                    .background(Color("Color"))
                    .clipShape(Capsule())
                    
                    ZStack(alignment: .bottomTrailing) {
                        Image("main").resizable().frame(height: 350)
                        HStack(spacing: 15){
                            Button(action: {
                                
                            }) {
                                Image(systemName: "plus.circle").foregroundColor(Color.white)
                            }
                            
                            Button(action: {
                                
                            }) {
                                Image(systemName: "suit.heart").foregroundColor(Color.white)
                            }
                            
                            Button(action: {
                                
                            }) {
                                Image(systemName: "square.and.arrow.down").foregroundColor(Color.white)
                            }
                            
                        }.padding()
                    }
                    
                    Text("Trending").font(.title).padding(.top)
                    
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 15){
                            ForEach(tabs,id: \.self){i in
                                
                                Button(action: {
                                    self.selectedTab = i
                                    
                                    if i == "Wallpapers"{
                                        self.selectedData = self.wallpaper
                                        print("Wallpaper")
                                    }
                                    else if i == "Architecture"{
                                         self.selectedData = self.architecture
                                    }
                                    else if i == "Nature"{
                                         self.selectedData = self.nature
                                    }
                                    else{
                                         self.selectedData = self.people
                                    }
                                }) {
                                    VStack{
                                        Text(i).foregroundColor(.black)
                                        
                                        Capsule()
                                            .fill(self.selectedTab == i ? Color.black : Color.clear)
                                            .frame(height: 6)
                                    }
                                }
                            }
                            
                        }.padding(.top)
                    }
                    
                    VStack(spacing: 18){
                        
                        ForEach(selectedData,id: \.self){i in
                            
                            HStack{
                                
                                ForEach(i,id: \.self){j in
                                    
                                    Image(j)
                                        .renderingMode(.original)
                                        .resizable()
                                        .frame(width: UIScreen.main.bounds.width / 2 - 20, height: 180)
                                        .cornerRadius(15)
                                        .contextMenu{
                                            
                                            Button(action: {
                                                UIImageWriteToSavedPhotosAlbum(UIImage(named: j)!, nil, nil, nil)
                                            }) {
                                                HStack{
                                                    Text("Save")
                                                    
                                                    Image(systemName: "arrow.down").resizable().frame(width: 15, height: 15)
                                                }
                                            }
                                        }
                                }
                            }
                        }
                        
                    }.padding(.top)
                }.padding()
            }
        }.background(Color("bg").edgesIgnoringSafeArea(.bottom))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Related Post