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:

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

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

SwiftUI
How to Draw Lines and Create Pie Charts Using SwiftUI
Tutorial
Using JavaScript in Swift Projects: Building a Markdown to HTML Editor
iOS
iOS Programming with iCloud: An Introduction
Shares