SwiftUI using the width of a view in its modifiers

Question

Created Jun ’20

Replies 4

Boosts 0

Views 3.0k

Participants 3

I'm trying to create a rounded button with dynamic height/width. To be perfectly rounded, the corner radius must be equal to half of the button's height. Is there a way to dynamically update the corner radius used by the modifier as the view's bound's are changed?

This is what I have so far for the button's label:

Code Block HStack {
		Image(systemName: "plus")
		Text("Add")
}
.padding(.vertical, 5)
.padding(.horizontal)
.overlay(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 1))

Answered by OOPer in 616280022

You can define your own shape, and use CGRect in its implementation of path(in:).

Code Block struct CircularEndBox: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let cornerSize: CGSize
        if rect.width > rect.height {
            cornerSize = CGSize(width: rect.height/2, height: rect.height/2)
        } else {
            cornerSize = CGSize(width: rect.width/2, height: rect.width/2)
        }
        path.addRoundedRect(in: rect, cornerSize: cornerSize)
        return path
    }
}

You can use it the same way as other Shapes.

Code Block             HStack {
                    Image(systemName: "plus")
                    Text("Add")
            }
            .padding(.vertical, 5)
            .padding(.horizontal)
            .overlay(CircularEndBox().stroke(lineWidth: 1))

Boost

Answer 1

mtsrodrigues OP

Jun ’20

This is actually a little complex to do. You should definitely watch the great talk "SwiftUI under the hood" given by Chris Eidhof in BA: Swiftable conferece. He goes through the entire process of creating a dynamic circular button while explaining some interesting details of the framework. The video is available on Youtube.

1

Answer 2

robin10 OP

Jun ’20

Thanks for your reply, I'll definitely give it a watch, cheers 🙂

0

Answer 3

OOPer OP

Jun ’20

Accepted Answer

You can define your own shape, and use CGRect in its implementation of path(in:).

Code Block struct CircularEndBox: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let cornerSize: CGSize
        if rect.width > rect.height {
            cornerSize = CGSize(width: rect.height/2, height: rect.height/2)
        } else {
            cornerSize = CGSize(width: rect.width/2, height: rect.width/2)
        }
        path.addRoundedRect(in: rect, cornerSize: cornerSize)
        return path
    }
}

You can use it the same way as other Shapes.

Code Block             HStack {
                    Image(systemName: "plus")
                    Text("Add")
            }
            .padding(.vertical, 5)
            .padding(.horizontal)
            .overlay(CircularEndBox().stroke(lineWidth: 1))

0

Answer 4

robin10 OP

Jun ’20

That's perfect, really elegant, thanks a lot :)

0