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.

iOS
Using iAd to Display Banner Ad in Your App
iOS
Working with SQLite Databases in iOS with FMDB Library
Tutorial
macOS Programming: Working with Dark Theme and Building a BMI Calculator
Shares