Skip to content
Introduce how to make the Storyboard file and Xib file correspond to the preview function by SwiftUI.
Branch: master
Clone or download
Latest commit f310105 Jul 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Entity 🆕 Create previews sample view Jun 17, 2019
Extensions 🆕 Create previews sample view Jun 17, 2019
Resources/Assets.xcassets 🆕 Create previews sample view Jun 17, 2019
StoryboardPreviews.xcodeproj 🔧 Delete copy plist file Jun 19, 2019
StoryboardPreviews 🆕 Create previews sample view Jun 17, 2019
StoryboardPreviewsTests 🆕 Create base project Jun 17, 2019
StoryboardPreviewsUITests
SwiftUI 🆕 Create preview-only target Jun 19, 2019
UIKit 🆕 Create preview-only target Jun 19, 2019
png 🆕 Create preview-only target Jun 19, 2019
.gitignore 🆕 Create base project Jun 17, 2019
LICENSE 🆕 Create LICENSE file Jul 5, 2019
README.md 🔧 Fix README file Jul 9, 2019

README.md

image

Sample of Preview function by SwiftUI

Introduce how to make the Storyboard file and Xib file correspond to the preview function by SwiftUI.
You can use SwiftUI preview feature while continuing to support iOS 13 and below!!

Usage

In order to try the preview feature, you need to select a preview-only target. That's because the target version needs to be iOS 13 or more for the preview feature to work.
The swift file described for previews is linked to "preview-only target" only.
If you change the parameter for UIView or UIViewController inside updateUIView method, it will be reflected in the preview.

image
import SwiftUI
import UIKit

#if DEBUG
// Create new for preview
struct UserDetailBasicInfoCellPreviews: PreviewProvider {
    static var previews: some View {
        Group {
            // Sets the format of the preview
            UserDetailBasicInfoCell()
                .previewLayout(.fixed(width: 320, height: 100))
                .previewDevice(PreviewDevice(rawValue: "iPhone SE"))
            UserDetailBasicInfoCell()
                .previewLayout(.fixed(width: 414, height: 100))
                .previewDevice(PreviewDevice(rawValue: "iPhone XS Max"))
        }
    }

    static var platform: PreviewPlatform? = .iOS
}

// UserDetailBasicInfoCell.swift
// UserDetailBasicInfoCell.xib
extension UserDetailBasicInfoCell: UIViewRepresentable {
    typealias UIViewType = UserDetailBasicInfoCell

    func makeUIView(context: Context) -> UserDetailBasicInfoCell {
        return Self.instantiate()
    }

    func updateUIView(_ uiView: UserDetailBasicInfoCell, context: Context) {
        // Make parameter change for preview
    }
}
#endif

Let's try!

There is a layout bug in this sample. Fix bugs quickly using this review feature!

Before After

Information

This is using the actual product. Some images have been replaced with dummy data.

License

StoryboardPreviewsBySwiftUI is available under the MIT license. See the LICENSE file for more info.

You can’t perform that action at this time.