In this tutorial I'm going to show how design instagram with SwiftUI.
ContentView.swift
//
// ContentView.swift
// swiftuidev
//
// Created by Cairocoders
//
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
NavigationView {
Homepage().navigationTitle("Instagram")
.navigationBarItems(leading:
Button(action: {
}, label: {
Image(systemName: "camera.fill").resizable().frame(width: 35, height: 35)
}), trailing:
HStack {
Button(action: {
}, label: {
Image(systemName: "tv").resizable().frame(width: 35, height: 35)
})
Button(action: {
}, label: {
Image(systemName: "paperplane.circle.fill").resizable().frame(width: 35, height: 35)
})
}
)
}.tabItem {
Image(systemName: "house.fill")
}
Text("Find").tabItem {
Image(systemName: "magnifyingglass.circle")
}
Text("Add").tabItem {
Image(systemName: "person.badge.plus")
}
Text("Likes").tabItem {
Image(systemName: "suit.heart.fill")
}
Text("Bio").tabItem {
Image(systemName: "person.fill.questionmark")
}
}
}
}
struct Homepage : View {
var body: some View {
ScrollView(.vertical, showsIndicators: true) {
VStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack{
ForEach(0..<6) { i in
VStack {
Image("photo\(i)")
.resizable()
.clipShape(Circle())
.frame(width: 80, height: 80)
.overlay(Circle().stroke(lineWidth: 3).fill(Color.red))
.padding(6)
Text("User \(i)")
}
}
}
}
ForEach(0..<5) { photo in
Feeds()
}
}
}
}
}
struct Feeds : View {
var body: some View {
VStack(alignment: .leading, content: {
HStack {
Image("photo1")
.resizable()
.frame(width: 30, height: 30).clipShape(Circle())
Text("User")
.fontWeight(.light)
Spacer()
Button(action: {
}) {
Image(systemName: "line.horizontal.3").resizable().frame(width: 15, height: 15)
}
}
Image("3")
.resizable()
.padding([.top, .bottom], 8)
HStack {
Button(action: {
}) {
Image(systemName: "message").resizable().frame(width: 30, height: 30)
}
Button(action: {
}) {
Image(systemName: "paperplane.fill").resizable().frame(width: 30, height: 30)
}
Spacer()
Button(action: {
}) {
Image(systemName: "bookmark.fill").resizable().frame(width: 30, height: 30)
}
}.padding(8)
Text("983 Likes")
Text("View All 680 Comments")
})
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
