a user profile screen in SwiftUI that includes an image, name, and a short bio, utilizing VStack
, HStack
, and Spacer
for layout:
import SwiftUI
struct ProfileView: View {
var body: some View {
VStack {
Image("profile_image") // Replace "profile_image" with your image asset name
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 150, height: 150)
.clipShape(Circle())
.padding(.top, 30)
Text("John Doe")
.font(.title)
.fontWeight(.bold)
.padding(.top, 20)
Text("iOS Developer")
.font(.headline)
.foregroundColor(.gray)
.padding(.top, 5)
Divider()
.padding(.vertical, 20)
HStack {
Text("Bio:")
.font(.headline)
.foregroundColor(.black)
Spacer() // Pushes the following text to the right edge
Text("Passionate about creating amazing apps with SwiftUI.")
.font(.body)
.foregroundColor(.black)
}
.padding(.horizontal, 20)
Spacer() // Pushes all content to the top
Text("Follow me on Twitter: @johndoe")
.font(.footnote)
.foregroundColor(.blue)
.padding(.bottom, 20)
}
.padding()
}
}
import SwiftUI
@main
struct ProfileApp: App {
var body: some Scene {
WindowGroup {
ProfileView()
}
}
}
Explanation:
- ProfileView Struct:
- Image: Displays a circular profile image with padding at the top.
- Name and Role: Displays the user’s name as a title and their role as a subtitle.
- Divider: Separates the name and bio sections with padding above and below.
- Bio Section: Uses
HStack
to display “Bio:” text and the user’s bio, aligned horizontally withSpacer
pushing the bio text to the right edge. - Spacer: Pushes all content to the top, ensuring the bio section stays near the bottom.
- Footer: Displays a footer text with a link to follow the user on Twitter.
- ProfileApp Struct:
- Sets up the main window of the app with
ProfileView
as its root view.
- Sets up the main window of the app with
How to Use:
- Replace
"profile_image"
with the name of your own image asset. - Copy the code into a new SwiftUI project in Xcode.
- Run the project on a simulator or device to see the profile screen layout.