実装
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
ScrollView {
VStack(alignment: .leading, spacing: 10) {
headerView()
postDetailView(postCount: 5)
}
}
.navigationTitle("Instagram")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button(action: {}) {
Image(systemName: "camera")
.foregroundStyle(.black)
}
}
ToolbarItem(placement: .navigationBarTrailing) {
Button(action: {}) {
Image(systemName: "paperplane")
.foregroundStyle(.black)
}
}
}
}
}
@ViewBuilder
private func headerView() -> some View {
Text("Stories")
.font(.system(size: 20, design: .default))
.foregroundStyle(.black)
.padding(.leading)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 10) {
ForEach(0..<10) { _ in
VStack {
Image(systemName: "person.circle")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 60, height: 60)
.clipShape(Circle())
.overlay(Circle().stroke(Color(red: 230 / 255, green: 230 / 255, blue: 232 / 255), lineWidth: 1.5))
Text("Username")
.font(.system(size: 12, design: .default))
.foregroundStyle(.black)
}
}
}
.padding(.horizontal)
}
}
@ViewBuilder
private func postDetailView(postCount: Int) -> some View {
ForEach(0..<postCount) { _ in
VStack(alignment: .leading, spacing: 10) {
HStack {
Image(systemName: "person.circle")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 30, height: 30)
.clipShape(Circle())
.overlay(Circle().stroke(Color(red: 230 / 255, green: 230 / 255, blue: 232 / 255), lineWidth: 1.5))
VStack(alignment: .leading, spacing: 2) {
Text("Username")
.foregroundStyle(.black)
Text("Location")
.font(.system(size: 12, design: .default))
.foregroundStyle(Color(red: 138 / 255, green: 138 / 255, blue: 138 / 255))
}
Spacer()
Button(action: {}) {
Image(systemName: "ellipsis")
.foregroundStyle(.black)
}
}
Image("img_hokuto")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(height: 320)
.clipped()
HStack {
Button(action: {}) {
Image(systemName: "heart")
.foregroundStyle(.black)
}
Button(action: {}) {
Image(systemName: "bubble.right")
.foregroundStyle(.black)
}
Button(action: {}) {
Image(systemName: "paperplane")
.foregroundStyle(.black)
}
Spacer()
Button(action: {}) {
Image(systemName: "bookmark")
.foregroundStyle(.black)
}
}
.padding(.vertical)
Text("Liked by username and others")
.foregroundStyle(.black)
Text("Caption")
.foregroundStyle(.black)
Text("View all comments")
.font(.system(size: 12, design: .default))
.foregroundStyle(Color(red: 138 / 255, green: 138 / 255, blue: 138 / 255))
Text("2 hours ago")
.font(.system(size: 12, design: .default))
.foregroundStyle(Color(red: 138 / 255, green: 138 / 255, blue: 138 / 255))
}
.padding(.horizontal)
}
}
}