Be my SwiftUI Valentine

Be my SwiftUI Valentine

TL;DR funny ways how to use SwiftUI modifiers

Β·

2 min read

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).

Screen Shot 2022-02-10 at 7.52.17 PM.png

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)
        }
    }
}

Example of using redacted view modifier

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)
    }
}

Example of using mask view modifier

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

Did you find this article valuable?

Support Marco Eidinger by becoming a sponsor. Any amount is appreciated!