• Home
  • Basics
  • DSA
  • MAD
  • Concept
  • Practice
  • Misc
    • Tips
    • QA’s
    • Misc
  • Course
  • Home
  • Basics
  • DSA
  • MAD
  • Concept
  • Practice
  • Misc
    • Tips
    • QA’s
    • Misc
  • Course
  • #News
  • #APPS
  • #Apple WWDC
  • #Google I/O
  • #Microsoft Ignite
  • #Let’s Talk
  • #Advertise

MyCodeTips mycodetips-newlogocopy1

  • Home
  • Basics
  • DSA
  • MAD
  • Concept
  • Practice
  • Misc
    • Tips
    • QA’s
    • Misc
  • Course
Swift, SwiftUI

Do I Need a Stylish Button in SwiftUI?

While creating or design an APP one control is always required for an action or event. either saving the data or dismissing the message. Every Programming or UI Based Programming language have their own approach to design Button orStylish Button in SwiftUI.

In SwiftUI creating three buttons: Delete, Edit, and Share that all have the same button style

SwiftUI provides a protocol called ButtonStyle for you to create your own button style. To create a reusable style for our buttons, we create a new struct called GradientBackgroundStyle that conforms to the ButtonStyle protocol.

The protocol requires us to provide the implementation of the makeBody function that accepts a parameter configuration. The configuration parameter includes a label property that you can apply the modifiers to change the button’s style.

You can also determine if the button is pressed by accessing the isPressed properties of the configuration. This allows you to alter the style of the button when the user taps on it.

In Stylish Button in SwiftUI Few Points to remember HStack, ButtonStyle, GradientBackgroundStyle, configuration, makeBody, label, there is a

Creating a New Project with SwiftUI enabled

create a simple button using SwiftUI. First, create a new project using the Single View Application template. Type the name of the project. I set it to SwiftUIButton but you’re free to use any other name. All you need to ensure is to check the Use SwiftUI option.

Once you save the project, Xcode should load the ContentView.swift file and display a preview in the design canvas. In case the preview is not displayed, you can click the Resume button in the canvas.

Creating a Simple Button with SwiftUI

It’s very easy to create a button using SwiftUI. Basically, you can use the code snippet below to create a button:

struct ContentView: View {
 
    var body: some View {
 
        VStack {
 
            Button(action: {
                print("Share tapped!")
            }) {
                HStack {
                    Image(systemName: "square.and.arrow.up")
                        .font(.title)
                    Text("Share")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .padding(.horizontal, 20)
            }
 
            Button(action: {
                print("Edit tapped!")
            }) {
                HStack {
                    Image(systemName: "square.and.pencil")
                        .font(.title)
                    Text("Edit")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .padding(.horizontal, 20)
            }
 
            Button(action: {
                print("Delete tapped!")
            }) {
                HStack {
                    Image(systemName: "trash")
                        .font(.title)
                    Text("Delete")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .padding(.horizontal, 20)
            }
 
        }
    }
}
struct GradientBackgroundStyle: ButtonStyle {
 
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding()
            .foregroundColor(.white)
            .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
            .cornerRadius(40)
            .padding(.horizontal, 20)
    }
}
Button(action: {
    print("Delete tapped!")
}) {
    HStack {
        Image(systemName: "trash")
            .font(.title)
        Text("Delete")
            .fontWeight(.semibold)
            .font(.title)
    }
}
.buttonStyle(GradientBackgroundStyle())

SwiftUI having some good features to design or decorate buttons like the Stylish Button in SwiftUI.

Happy Coding 🙂

  • Click to share on Reddit (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • More
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
Written by Ranjan - July 27, 2021 - 1556 Views
Tags | swift, swiftUI
AUTHOR
Ranjan

This website is basically about of what we learnt from my years of experience as a software engineer on software development specifically on mobile application development, design patterns/architectures and its changing scenarios, security, troubleshooting, tools, tips&tricks and many more.

You Might Also Like

control-system-swift

Control Flow in Swift

November 18, 2021
mycodetips-swiftui

Basic Introduction to Swift vs SwiftUI

October 20, 2020
swift-concurrency-await

Concurrency in Swift

November 17, 2021
Next Post
Previous Post

Support us

Subscribe for updates

Join 8,278 other subscribers

Latest Posts

  • Exploring Single Point Failure
    Exploring Single Point Failures: Causes and Impacts
  • primitive-datatypes-new
    Exploring the Pros and Cons of Primitive Data Types
  • best practice clean code
    Essential Coding Standards and Best Practices for Clean Code
  • YT-Featured-Templates--lld
    What Business Problems Solves in Low Level Design (LLD)
  • SRP-SingleResopnsibility
    SRP : Single Responsibility Principle in Swift and Objective-C
whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

do2day

Do2Day

  • #about
  • #myapps
  • #contact
  • #privacy
  • #Advertise
  • #myQuestions

Android Database Interview IOS IOSQuestions Javascript Objective-c Programming Swift Tips&Tricks Web Wordpress

  • Exploring Single Point Failures: Causes and Impacts
  • Exploring the Pros and Cons of Primitive Data Types
  • Essential Coding Standards and Best Practices for Clean Code
MyCodeTips

©mycodetips.com

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.