How to Add Custom Modifiers and Views to Xcode's Library
Tags: swift, ios, xcode, swiftui
Published: 2020-10-17 00:11:48

---
title: How to Add Custom Modifiers and Views to Xcode's Library
published: true
description: 
tags: #swift #ios #xcode #swiftui
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p>SwiftUI allows us to add our own custom views and modifiers to Xcode's library. By doing this we are able to easily access our custom views and add them into our code in just a click. Let's see how we can take advantage of this in our own SwiftUI project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First thing we will need is to add a new SwiftUI file to our project to store our custom views and modifiers. We'll name our file <strong>LibraryContent</strong> and replace the boilerplate code with the code in the example below.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">import SwiftUI

struct LibraryContent: LibraryContentProvider {
    @LibraryContentBuilder
    var views: [LibraryItem] {
        LibraryItem(CloseButton(), category: .control)
    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>In the example code we are creating a <a href="https://developer.apple.com/documentation/developertoolssupport/libraryitem">LibraryItem</a> so we can add our custom view to the Xcode library. We chose to add our custom close button because we will most likely use this view throughout the app and we will want to have quick access to it from our Xcode library.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If we dive into the Documentation for <a href="https://developer.apple.com/documentation/developertoolssupport/libraryitem">LibraryItem</a> we can see that we can add things like a title and category to our <a href="https://developer.apple.com/documentation/developertoolssupport/libraryitem">LibraryItem</a>. This is to help us better organization our views and modifiers in our Xcode Library. In our example we are adding the close button to the <strong>.control</strong> category. Also you will notice we didn't add a title to our <strong>LibraryItem</strong> but Xcode is smart enough to use the filename "CloseButton" as the title.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now Xcode probably is showing some errors because it can't find our <strong>CloseButton</strong> view. Let's go ahead and create a new SwiftUI file and name it <strong>CloseButton</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In our <strong>CloseButton.swift</strong> file add the following code.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">import SwiftUI

struct CloseButton: View {
    var body: some View {
        Image(systemName: "xmark")
                    .font(.system(size: 17, weight: .bold))
                    .foregroundColor(.white)
                    .padding(.all, 10)
                    .background(Color.black.opacity(0.6))
                    .clipShape(Circle())
    }
}

struct CloseButton_Previews: PreviewProvider {
    static var previews: some View {
        CloseButton()
    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>If we go and run the preview canvas in<strong> CloseButton.swift</strong> we should see a circular button with an <strong>X</strong> in the center.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now if we go to our Xcode library we can see that our close button has been added. We can open up our Xcode library by going to the <strong>+</strong> button in the top right of Xcode or by using the keyboard shortcut <strong>Command + Shift + L</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now that the Xcode library is open we can use its search bar at the top to search for our custom "Close button". Like in the image below we should see our new custom view show up and allow us to drag and drop it or double click on it to add it to our current SwiftUI file.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1117,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://swifttomcom.files.wordpress.com/2020/10/screen-shot-2020-10-13-at-3.39.02-pm.png?w=1024" alt="" class="wp-image-1117"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>We can also add custom modifiers to our library like we did our custom view. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To add a reusable modifier we will need to add a <strong>View</strong> extension to our <strong>LibraryContent.swift</strong> file. Inside of the extension we will need to create a function that returns a view with the modifiers we want added. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's take a look at the example code below.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">extension View {
    func customViewStyle() -> some View {
        return self
            .background(Color.red)
            .cornerRadius(22)
            .shadow(color: Color.red.opacity(0.3), radius: 20, x: 0, y: 10)

    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Above we created our <strong>customViewStyle()</strong> function which is returning a view with 3 custom modifiers. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With just this code we can now go to any file in our project and apply our new custom modifier. Let's see this in action by going to our <strong>ContentView.swift</strong> file. At the end of the Hello World text view we can add our new modifier.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
            .customViewStyle()
    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":1122,"width":294,"height":599,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/10/screen-shot-2020-10-14-at-5.25.26-pm.png?w=503" alt="" class="wp-image-1122" width="294" height="599"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This is great but the only problem is that our new modifier for our view doesn't show up in our Xcode library. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's go back to the <strong>LibraryContent.swift</strong> file and under our <strong>CloseButton()</strong> let's add another <strong>@LibraryContentBuilder</strong> with the following code.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">    @LibraryContentBuilder
    func modifiers(base: Image) -> [LibraryItem] {
        LibraryItem(
            base.customViewStyle(),
            title: "Custom View Style 1",
            category: .effect
        )
    }
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>As you can see in the example above this code is very similar to how we added our custom close button to our library. Now if we go to our library with the second tab selected and search for our modifier we will see our "Custom View Style 1" modifier has been added. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1126,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://swifttomcom.files.wordpress.com/2020/10/screen-shot-2020-10-14-at-5.37.05-pm.png?w=1024" alt="" class="wp-image-1126"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Lastly let's make our custom modifier customizable. We are going to change the hard coded values into variables so that anyone that is using our modifier can style it to their liking. Let's go back to our<strong> LibraryContent.swift</strong> file and add the following changes to our code. </p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">    @LibraryContentBuilder
    func modifiers(base: Image) -> [LibraryItem] {
        LibraryItem(
            // Added default values for our customViewStyle function
            
            base.customViewStyle(color: Color.red, cornerRadius: 22),
            title: "Custom View Style 1",
            category: .effect
        )
    }
}

extension View {
    // Add variables to our function so we can customize it to our like for the specific view we are working on
    
    func customViewStyle(color: Color, cornerRadius: CGFloat) -> some View {
        return self
            .background(color)
            .cornerRadius(cornerRadius)
            .shadow(color: color.opacity(0.3), radius: 20, x: 0, y: 10)

    }
}
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>As you can see in the code above we added variables to our <strong>customViewStyle()</strong> function so we can change the color and the corner radius to whatever value we want. We also added our previously hard coded values as the default values for our modifier. Let's go back to our <strong>ContentView.swift</strong> file and apply our updated modifier to the Hello World text view.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
            .customViewStyle(color: .green, cornerRadius: 10)
    }
}
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":1129,"width":294,"height":599,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttomcom.files.wordpress.com/2020/10/screen-shot-2020-10-14-at-5.48.55-pm.png?w=505" alt="" class="wp-image-1129" width="294" height="599"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Hope this helps you on your next SwiftUI project! </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>All the code in this post can be found on my <a href="https://github.com/Tprezioso/AddingCustomLibraryComponents">Github</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 👨🏻‍💻  Happy coding! 👨🏻‍💻</p>
<!-- /wp:paragraph -->