Another way to use XCode Previews

What I came up with I’m sure isn’t anything revolutionary or new. I’ve known this method to be used in other tools before, especially when dealing with HTML. To get to the point, basically you can use previews to layout the different styles of Views you have created.

The best example of this are the colors for the Labels in Decisive Wife. When I originally created the colors for the Labels for iOS 12, I had to create a Label for each color and view the collection in the Ask Sheri view. This allowed me to determine the best colors for the text and border to make everything visible. With the move the SwiftUI, I added new colors such as pink and cyan. Instead of having to create Labels in the app and re-running every time I make an adjustment, I created the following preview using the new collection view.

Moving to iOS 14 gave me access to the Color assets to use instead of the standard ones provided to me by the OS. So I went in and created more muted colors so they weren’t as bright. Using the new preview system I was able to quickly see if the border and text colors selections were still a good match.

struct LabelColor_Previews: PreviewProvider {
    static var previews: some View {
        let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 2)
        return LazyVGrid(columns: columns) {
            ForEach(LabelColor.allCases) { labelColor in
                Text(labelColor.rawValue)
                    .padding(8)
                    .frame(width: 100)
                    .foregroundColor(labelColor.textColorSU)
                    .background(labelColor.backgroundColorSU)
                    .border(labelColor.borderColorSU, width: 4)
                    .cornerRadius(5)
                
            }
            .padding(2)
        }
        .background(Color.lightShades)
    }
}

Another example of this is my preview for button styles. I only have two so far but a simple VStack is able to lay them out so I can view them quickly without going to a screen which uses them.

struct ButtonStyles_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            Button("ClassicRctBtnStyle") {
                print("classic btn touched")
            }
            .buttonStyle(ClassicRctBtnStyle())
            Button("NavBarBtnStyle") {
                print("nav btn touched")
            }
            .buttonStyle(NavBarBtnStyle())
        }
        .background(Color.lightShades)
    }
}