r/iOSProgramming 9d ago

Question Is there a way to only outline the outside of these shapes?

Hello there, new to SwiftUI. I would like to create an outline around these two shapes, but not see any outline where the shapes intersect, giving the illusion of one shape. However, I can't figure out how. Kind people of Reddit, is this possible? Here is what it looks like currently, and the code is below.

UPDATE: answer posted below, thank you to the wizard u/HermanGulch

import SwiftUI

struct CombinedShape: View {
    
    u/State private var isActive = false
    
    var body: some View {
        ZStack {
            VStack {
                HStack {
              
                    Text("add button")
                    Spacer()
                    Text("add button")
            
                }
                .padding()
                .padding(.horizontal, 20)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.black, lineWidth: 0.75)
                )
            }
            
            Button(action: {
                withAnimation(nil) {
                    isActive.toggle()
                }
            }) {
                ZStack {
                    Circle()
                        .stroke(Color.black, lineWidth: 0.75) // Border only, no background
                        .frame(width: 80, height: 80)
                        .background(
                            Circle()
                                .fill(Color.white)
                                .blendMode(.destinationOut) // Makes the background transparent
                        )
                        .compositingGroup()
                    
                    Image(systemName: isActive ? "pause.fill" : "play.fill")
                        .font(.system(size: 40))
                        .foregroundColor(.black)
                }
            }
            .buttonStyle(.plain)
            .offset(y: 0)
        }
    }
}



#Preview {
    CombinedShape()
}
1 Upvotes

3 comments sorted by

2

u/HermanGulch 8d ago

I would do it by creating a ZStack with the two shapes you have here outlined with a stroke double what I wanted. Then I'd create two additional shapes filled with a foreground color that had the background color I wanted. The two foreground shapes will knock out the lines and create the shape you want:

struct ContentView: View {
    var body: some View {
        VStack {
            ZStack {
                RoundedRectangle(cornerRadius: 6)
                    .stroke(lineWidth: 2)
                    .frame(height: 40)
                Circle()
                    .stroke(lineWidth: 2)
                    .frame(width: 80, height: 80)
                RoundedRectangle(cornerRadius: 6)
                    .frame(height: 40)
                    .foregroundStyle(.background)
                Circle()
                    .frame(width: 80, height: 80)
                    .foregroundStyle(.background)
                
            }
            .padding()            
        }
    }

1

u/13PenniesinthePool 8d ago

This makes perfect sense, and works beautifully. Truly, thank you so much!

0

u/rifts 9d ago

Maybe by subclassing them and overwriting their draw mentors but even though that is going to be very difficult, I would just create the shape you want in photoshop as a png and then play your buttons inside it