SwiftUI Practice – FeaturePost
Custom feature post card and video post card built in SwiftUI. I copied the design for the FeatureView and VideoPost from Apple’s Developer app.
Customization (VideoPost)
- Change image background
Use in your code
FeatureView(date: Date(), title: "Hello Developer", post: "post") VideoPost(background: background, duration: duration)
FeatureView
struct FeatureView: View { var date: Date var title: String var post: String var dateHeader: String { let dateFormatter = DateFormatter() dateFormatter.dateFormat = "MMMM yyyy" return dateFormatter.string(from: date) } var body: some View { VStack(spacing: 0) { Image("feature") .resizable() .scaledToFit() ZStack { Image("feature") .resizable() .scaledToFit() .blur(radius: 50) .rotationEffect(.degrees(180)) VStack(alignment: .leading, spacing: 15) { Text(dateHeader) .font(.title3) .textCase(.uppercase) .foregroundStyle(.white.opacity(0.50)) Text(title) .font(.largeTitle) .bold() .foregroundStyle(.white) Text(post) .font(.title2) .foregroundStyle(.white.opacity(0.50)) } .frame(maxWidth: .infinity) .padding() .padding(.bottom, 10) .background(.black.opacity(0.25)) } } .background(Color(red: 25 / 255, green: 60 / 255, blue: 131 / 255)) .clipShape(RoundedRectangle(cornerRadius: 15)) } }
VideoPost
struct VideoPost: View { @State private var isFavorite: Bool = false var background: String var duration: String var body: some View { Image(background) .resizable() .scaledToFit() .overlay(alignment: .topTrailing) { Button { withAnimation { isFavorite.toggle() } } label: { Image(systemName: "bookmark.fill") .offset(x: -10, y: 15) .font(.title) .foregroundStyle(isFavorite ? .white : .black.opacity(0.5)) } } .overlay(alignment: .bottomTrailing) { PlayView(duration: duration) .offset(x: -10, y: -15) } .clipShape(RoundedRectangle(cornerRadius: 15)) } }
PlayView
struct PlayView: View { var duration: String var body: some View { ZStack { RoundedRectangle(cornerRadius: 15) .fill(.black.opacity(0.5)) .frame(width: 90, height: 45) HStack { Image(systemName: "arrowtriangle.right.fill") .resizable() .scaledToFit() .foregroundStyle(.white) .frame(width: 20) Text(duration) .font(.title2) .foregroundStyle(.white) } } } }
You can download the code for this project on GitHub