This not-so serious blog post illustrates the use of various SwiftUI view modifiers. The inspiration of this blog post is Valentine's Day 2022 :)
Mark your Calendar
Valentine's Day is on February 14th and I don't want to stand with empty hands in front of my spouse. So let's mark the calendar.
struct MarkYourCalendar: View {
@State private var vDay = Date("20220214")
var body: some View {
DatePicker(
"Start Date",
selection: $vDay,
displayedComponents: [.date]
)
.datePickerStyle(.graphical)
}
}
Using the datePickerStyle
view modifier to pass in the graphical
will display display an interactive calendar (or clock).
There are other DatePickerStyle
's to specify the appearance and interaction of all date pickers within a view hierarchy.
The complete list of types:
- automatic
- compact
- field
- graphical (used here)
- stepperField
- wheel
P.S.: I am using here an extension on Date
to initialize an instance from a string
extension Date {
init(_ input: String) {
self = Date.from(input)
}
static func from(_ input: String) -> Date {
let df = DateFormatter()
df.dateFormat = "yyyyMMdd"
return df.date(from: input) ?? Date()
}
}
Cover your tracks
The redacted
view modifier is a great way to hide sensitive data and to handle loading states. In my case I don't want my spouse to know the gift just yet.
struct ValentinesDayGift: View {
var body: some View {
HStack {
Text("I bought my wife: ")
Text("She cannot know yet").redacted(reason: .placeholder)
}
}
}
Learn more about the redacted
view modifier by reading serialcoder.dev/text-tutorials/swiftui/the-..
Don't be afraid to mask your feelings
Using the mask
view modifier let's me create this wonderful Valentine's Day card in SwiftUI.
struct ValentinesDayGift: View {
var body: some View {
VStack(spacing: 20) {
Text("Happy Valentine's Day")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(.white)
Image("Jeanine")
.resizable()
.frame(width: 200, height: 200)
.mask(
Image(systemName: "heart.fill")
.resizable()
)
}
.frame(
maxWidth: 500,
maxHeight: 300
)
.background(.purple)
}
}
My wife thinks I am dorky but sweet. She was very happy with her special Valentine's Day card. Mission accomplished :)
The mask() modifier is different from clipShape(), because it also applies any transparency from the masking view β you get to have holes in your underlying view based on the transparency of your mask.
Learn more about the mask
view modifier by reading fivestars.blog/articles/swiftui-masking