iOS

SwiftUI Tip: Drawing a Border with Rounded Corners for Buttons and Text


With SwiftUI, you can easily draw a border around a button or text (and it actually works for all views) using the border modifier. Say, for example, you want to create a button like this:

swiftui-button-border

Editor’s note: This tutorial has been tested on Xcode 11 beta 6.

We can apply the border modifier on a button object to create a button with a coloured border:

But what if your designer wants you to create a rounded border button like this? How can you do that?

rounded border button - swiftui

Before the release of Xcode 11 beta 6, you can use the border modifier and pass it with the corner radius:

However, the latest beta of Xcode 11 has deprecated the function call. To create a border with rounded corners, you can draw a rounded rectangle and overlay on the button like this:

In the code, we use a RoundedRectangle and its stroke modifier to create the rounded border. You can modify the color and line width to adjust its appearance.

To create a button with different styles, you can just use another shape object to draw the border. Say, you can replace the RoundedRectangle with Capsule to create a border like this:

SwiftUI Tip: Drawing a Border with Rounded Corners for Buttons and Text 1

By specifying your own StrokeStyle, this will enable you to create a button with dash border:

SwiftUI Tip: Drawing a Border with Rounded Corners for Buttons and Text 2

If you want to learn more about SwiftUI buttons, please check out our beginner guide here.

iOS
Building a Chat App in Swift Using Multipeer Connectivity Framework
iOS
iOS Concurrency: Getting Started with NSOperation and Dispatch Queues
Tutorial
Creating an Immersive User Experience with Haptic Feedback in iOS
There are currently no comments.

Shares