Add custom views and modifiers to the Xcode Library
Description: 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".
Recap
Xcode 12 lets us add custom SwiftUI views and modifiers to the Xcode library. The Xcode library makes it easy to for our views to be reusable in everywhere.
Benefits:
- Discoverability
- Learning
- Visual Editing
How to extend the Xcode library
In order to donate views and modifiers to the Xcode library, we need make create a new object conforming to the LibraryContentProvider
protocol, which returns an array of library items.
public protocol LibraryContentProvider {
@LibraryContentProvider
var views: [LibraryItem] { get }
@LibraryContentProvider
func modifiers(base: ModifierBase) -> [LibraryItem]
}
Adding a Custom View
We can add custom View
s to the Xcode Library by implementing the views
property of the LibraryContentProvider
protocol:
struct LibraryContent: LibraryContentProvider {
@LibraryContentProvider
var views: [LibraryItem] {
LibraryItem (
SmoothieRowView(smoothie: .salak),
category: .control
)
}
}
Now we can conveniently reuse our SmoothieRowView
view via the Xcode library.
We can improve our LibraryItem
s by adding more information such as:
- a title for the item in the library
- a category for the item in the library title
- an alias (via
matchingSignature
), used by the code completion engine to insert or view among the possible code completions.
Adding a Custom Modifier
Similarly to View
s we can also add modifiers to the Xcode library.
Let's say that we have the following modifier for example:
extension Image {
func resizedToFill(width: CGFloat, height: CGFloat) -> some View {
self
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: width, height: height)
}
}
We can add this custom .resizedToFill
modifier to the Xcode Library by implementing the modifiers(base:)
of the LibraryContentProvider
protocol:
struct LibraryContent: LibraryContentProvider {
@LibraryContentBuilder
func modifiers(base: Image) -> [LibraryItem] {
LibraryItem (
base.resizedToFill(width: 20, height: 20)
)
}
}
Result:
Now we can easily search the method name in your Xcode library.