How to Make a Custom HUD View in SwiftUI
Tags: swift, swiftui, ios
Published: 2021-03-10 23:25:51

---
title: How to Make a Custom HUD View in SwiftUI
published: true
description: 
tags: #swift #swiftui #ios
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p>In this post we are going to make a custom <strong>HUD</strong> view with a timer. The timer will dismiss our HUD view after about a second. Our <strong>HUD</strong> view will be similar to the pop up view we see on our screen when we put our phone into silent mode. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1607,"width":400,"height":287,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttom.com/wp-content/uploads/2021/03/silentMode.jpg" alt="" class="wp-image-1607" width="400" height="287"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Let's jump right in by creating a new SwiftUI file and naming it <strong>HUDView</strong>. Next we are going to copy the code below into our <strong>HUDView.swift</strong> file.</p>
<!-- /wp:paragraph -->

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

struct HUDView&lt;Content: View&gt;: View {
    var content: Content
    @ViewBuilder var body: some View {
        content
            .padding(.horizontal, 10)
            .padding(10)
            .background(
                Capsule()
                    .foregroundColor(Color.white)
                    .shadow(color: Color(.black).opacity(0.10), radius: 10, x: 0, y: 5)
            )
    }
}

struct HUD_Previews: PreviewProvider {
    static var previews: some View {
        HUDView(content: Text("HI"))
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Above we created a <strong>HUD</strong> view that takes in a view as a variable and then presents that view when the <strong>HUD</strong> appears. We also stylized our <strong>HUD</strong> to look like the pill shaped silent mode view in the image above. Now that we have created our <strong>HUD</strong> lets go add it to our <strong>ContentView.swift</strong> file. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In our <strong>ContentView</strong> file we will replace the boilerplate code with the code below.</p>
<!-- /wp:paragraph -->

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

struct ContentView: View {
    var body: some View {
        HUDView(content: Text("Hello, World!"))
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:image {"align":"center","id":1599,"width":313,"height":555,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttom.com/wp-content/uploads/2021/03/Simulator-Screen-Shot-iPod-touch-7th-generation-2021-03-08-at-14.10.56-577x1024.png" alt="" class="wp-image-1599" width="313" height="555"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In our preview screen we should see a pill shaped view with a text view saying "Hello World!". </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next we will need to move our <strong>HUD</strong> view from the middle of our view to the top of our view. Let's take a look at the example below to see how we can setup our <strong>HUD</strong> view.</p>
<!-- /wp:paragraph -->

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

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            NavigationView {
                Button("Save") {
                    
                }
                .navigationTitle("Home")
            }
            HUDView(content: Text("Save"))
        }
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:image {"align":"center","id":1603,"width":313,"height":555,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttom.com/wp-content/uploads/2021/03/Simulator-Screen-Shot-iPod-touch-7th-generation-2021-03-08-at-14.35.20-577x1024.png" alt="" class="wp-image-1603" width="313" height="555"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see in the code above we added a <strong>ZStack</strong> to keep our <strong>HUD</strong> view aligned to the top and above the content on screen. Next we added a save button which will show our <strong>HUD</strong> view when we tap on the button. Lastly we added a <strong>NavigationView</strong> so we can have a navigation title on our screen for some style points. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now when our save button is tapped we will want to present our <strong>HUDView</strong>. Then after 1.5 seconds we will have our <strong>HUD</strong> dismiss itself. To do this let us add the code below to our <strong>ContentView</strong> file.</p>
<!-- /wp:paragraph -->

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

struct ContentView: View {
    @State private var showHUD = false
    var body: some View {
        ZStack(alignment: .top) {
            NavigationView {
                Button("Save") {
                    withAnimation {
                        self.showHUD.toggle()
                        dismissHUD()
                    }
                }
                .navigationTitle("Home")
            }
            
            HUDView(content: Text("Save"))
                .offset(y: showHUD ? 0 : -100)
                .animation(.spring())
        }
    }

    func dismissHUD() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
            self.showHUD = false
        }
    }

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

<!-- wp:paragraph -->
<p>Above we added a <strong>@State</strong> property to track when we will show and hide the <strong>HUD</strong> view. Then we added the <strong>dismissHUD() </strong>function so that we can dismiss the <strong>HUD</strong> view after 1.5 seconds(feel free to change the time to dismiss to whatever you like best). Lastly we added an <strong>.offset</strong> and <strong>.animation(.spring())</strong> modifier to our <strong>HUD</strong> view. We added the <strong>.offset</strong> modifier so we can hide the <strong>HUD</strong> view offscreen when not being shown. We also added a spring animation to give our <strong>HUD</strong> some bounce when entering the view from off screen. Now when we run our app and press our save button, we should see our <strong>HUD</strong> appear and then disappear after 1.5 seconds.</p>
<!-- /wp:paragraph -->

<!-- wp:video {"controls":false,"guid":"GThOyjdD","id":1612,"loop":true,"src":"https://swifttom.com/screen-recording-2021-03-09-at-5-57-01-pm-mov/","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><div class="wp-block-embed__wrapper">
https://videopress.com/v/GThOyjdD?controls=false&amp;loop=true&amp;preloadContent=metadata
</div></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p>Thanks for reading! Hope this helps you in your next SwiftUI project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy Coding!</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://i.gifer.com/LhZn.gif" alt="Iron man GIF - Find on GIFER"/></figure></div>
<!-- /wp:image -->