article

Wednesday, February 16, 2022

SwiftUI UnSpash App UI

SwiftUI UnSpash 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
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
//
//  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