How to Make a Expandable Button in SwiftUI
Tags: swift, ios, swiftui
Published: 2020-10-23 21:23:37

---
title: How to Make a Expandable Button in SwiftUI
published: true
description: 
tags: #swift #ios #SwiftUI
//cover_image: https://direct_url_to_image.jpg
---

<!-- wp:paragraph -->
<p>In this post we are going to learn how to make a SwiftUI button that expands out to show more button options. Below is an example of what our button will look like when we are finished.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1180,"width":344,"height":697,"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-21-at-5.47.55-pm-1.png?w=508" alt="" class="wp-image-1180" width="344" height="697"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> Let's get started by creating a new SwiftUI project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In our project let's add a new SwiftUI file and name it <strong>ExpandableButton</strong>. Inside of our <strong>ExpandableButton.swift</strong> file we will add the following code.</p>
<!-- /wp:paragraph -->

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

struct ExpandableButton: View {
    var body: some View {
        Button(action: {
                    print("Expandable button tapped!!!")
        }) {
            Image(systemName: "plus.circle.fill")
                .resizable()
                .frame(width: 75, height: 75)
                .foregroundColor(.green)

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

<!-- wp:paragraph -->
<p>In the code above all we did was create a button and stylize it. Next we will need to wrap our button in a <strong>VStack</strong> so that when we add our menu buttons they will appear above our expandable button.</p>
<!-- /wp:paragraph -->

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

struct ExpandableButton: View {
    var body: some View {
        VStack {
            Button(action: {
                        print("Expandable button tapped!!!")
            }) {
                Image(systemName: "plus.circle.fill")
                    .resizable()
                    .frame(width: 75, height: 75)
                    .foregroundColor(.green)

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

<!-- wp:paragraph -->
<p>Now let's create our menu buttons in a new SwiftUI file. We will name this file <strong>MenuButtons</strong> and we will add the following code to it.</p>
<!-- /wp:paragraph -->

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

struct MenuButtons: View {
    var buttonImage: String
    
    var body: some View {
        Button(action: {
            print("Menu Button tapped")
            
        }) {
            ZStack {
                Circle()
                    .foregroundColor(.green)
                    .frame(width: 50, height: 50)
                
                Image(systemName: buttonImage)
                    .imageScale(.large)
                    .foregroundColor(.white)
                
            }
        }
    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>In the code above we made our menu buttons similar to how we created our expandable button. The only difference is that our menu buttons are slightly smaller and have a green circular background. We also added a <strong>buttonImage</strong> variable so that we can change the image that appears on our menu button. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now that we have our menu button created let's go back and add it to our <strong>ExpandableButton.swift</strong> file. First we will need to create a <strong>@State</strong> variable so that we can control when we show our menu buttons. In this example we will name are state property <strong>isExpanded</strong> and set it to false.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">@State var isExpanded = false</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Next we will add a conditional statement above our expandable button that will check if our button is expanded. If <strong>isExpanded</strong> returns true we will show our the menu buttons.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">            if isExpanded {
                MenuButtons(buttonImage: "camera.fill")
                MenuButtons(buttonImage: "record.circle.fill")
                MenuButtons(buttonImage: "photo")
            }
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>In the action of our expandable button we will toggle our <strong>isExpanded</strong> property so that we can control when to show and hide our menu buttons. We'll also add an animation so that when the expandable button is pressed our button will have a smooth transition. Our code should now look like the example below.</p>
<!-- /wp:paragraph -->

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

struct ExpandableButton: View {
    
    @State var isExpanded = false
    
    var body: some View {
        VStack {
            if isExpanded {
                MenuButtons(buttonImage: "camera.fill")
                MenuButtons(buttonImage: "record.circle.fill")
                MenuButtons(buttonImage: "photo")
            }
            
            Button(action: {
                print("Expandable button tapped!!!")
                isExpanded.toggle()
                
            }) {
                Image(systemName: "plus.circle.fill")
                    .resizable()
                    .frame(width: 75, height: 75)
                    .foregroundColor(.green)
            }
            
            
        }
        .animation(.spring())
    }
}
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Now if we go and run our preview canvas we should see our button. If we go and tap our button then we should see our menu buttons pop up with an animation.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1176,"width":344,"height":697,"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-21-at-5.47.16-pm.png?w=505" alt="" class="wp-image-1176" width="344" height="697"/></figure></div>
<!-- /wp:image -->

<!-- wp:image {"align":"center","id":1177,"width":344,"height":697,"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-21-at-5.47.55-pm.png?w=508" alt="" class="wp-image-1177" width="344" height="697"/></figure></div>
<!-- /wp:image -->

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

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

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