Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC20 · 13 min · Developer Tools

Add custom views and modifiers to the Xcode Library

The Xcode Library is an easy way for you to discover available SwiftUI views and drag and drop them to the Xcode Previews canvas, enabling rich visual editing of your app. We’ll show you how to extend the content of the Xcode Library with your own views and modifiers, optimizing for reusability and discoverability within your app or Swift packages. For more on Xcode Previews, check out "Structure your app for SwiftUI previews", and "Visually edit SwiftUI views".

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 5 snippets

LibraryContentProvider swift · at 1:57 ↗ 
public protocol LibraryContentProvider {
  @LibraryContentBuilder
  var views: [LibraryItem] { get }

  @LibraryContentBuilder
  public func modifiers(base: ModifierBase) -> [LibraryItem]
}
LibraryItem swift · at 2:32 ↗ 
LibraryItem(
  SmoothieRowView(smoothie: .lemonberry),
  visible: true,
  title: "Smoothie Row View",
  category: .control
)
LibraryContent swift · at 3:22 ↗ 
struct LibraryContent: LibraryContentProvider {
    @LibraryContentBuilder
    var views: [LibraryItem] {
        LibraryItem(
            SmoothieRowView(smoothie: .lemonberry),
            category: .control
        )
        
        LibraryItem(
            SmoothieRowView(smoothie: .lemonberry, showNearbyPopularity: true),
            title: "Smoothie Row View With Popularity",
            category: .control
        )
    }
}
Image extension swift · at 8:57 ↗ 
extension Image {
    func resizedToFill(width: CGFloat, height: CGFloat) -> some View {
        return self
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: width, height: height)
    }
}
Modifiers swift · at 9:17 ↗ 
@LibraryContentBuilder
    func modifiers(base: Image) -> [LibraryItem] {
        LibraryItem(
            base.resizedToFill(width: 100.0, height: 100.0)
        )
    }