How to get round shape images of the same size based on SF Symbols in SwiftUI?

Question

In my application I want to get simple round buttons based on SF Symbols of the same size. However, the same approach results in different image sizes depending on the symbol. For example, an image with a plus sign is larger than a minus sign.

To solve this problem, I use the ZStack trick in which I put a transparent plus under the minus. But I think this is not the best solution. Are there any better solutions?

HStack{
    
    Image(systemName: "plus")
        .padding()
                .overlay(
                    Circle()
                        .stroke(Color.primary,
                                lineWidth:1))
        
        
    Image(systemName: "minus")
        .padding()
                .overlay(
                    Circle()
                        .stroke(Color.primary,
                                lineWidth:1))
    //my solution
    ZStack {
      Image(systemName: "plus")
        .padding()
        .opacity(0.0)
        .overlay(
            Circle()
                .stroke(Color.primary,
                        lineWidth:1))
      Image(systemName: "minus")
    }
    
}

"minus" in the center has a smaller size than "plus", "minus" on the right - my solution:

"minus" in the center has a smaller size than "plus", "minus" on the right - my solution

score 1 · Answer 1 · answered Mar 24 '21 at 14:30

1

use .circle

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        HStack {
            
            Image(systemName: "plus.circle")
                .resizable()
                .frame(width: 50, height: 50, alignment: .center)

            
            
            Image(systemName: "minus.circle")
                .resizable()
                .frame(width: 50, height: 50, alignment: .center)
            
        }

    }
}

answered Mar 24 '21 at 14:30

ios coder

1
4
31
91

1

Thanks for your answer, but I use different symbols and want to have a consistent design for all buttons, plus and minus are shown only to demonstrate the problem. – vtezin Mar 24 '21 at 15:03

score 1 · Accepted Answer · answered Mar 24 '21 at 18:13

You can use ViewModifier or if are buttons ButtonStyle

ViewModifier

    @available(iOS 13.0, *)
struct fillButtonCircle: ViewModifier {
    var foregroundColor: Color = .white
    var backgroundColor: Color = .green
    var dimension: CGFloat = 10
    func body(content: Content) -> some View {
        content
            .foregroundColor(foregroundColor)
            .padding(dimension)
            .background(backgroundColor)
            .clipShape(Circle())
            .frame(width: dimension, height: dimension)
            .overlay(
                Circle()
                    .stroke(Color.primary,
                            lineWidth:1))
    }
}

ButtonStyle

    @available(iOS 13.0, *)
struct CircleScaleButton: ButtonStyle {
    var color: Color = .blue
    var maxHeight: CGFloat = 35
    
    public func makeBody(configuration: Self.Configuration) -> some View {
        
            configuration.label
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: maxHeight, alignment: .center)
                .foregroundColor(.black)
                .background(RoundedRectangle(cornerRadius: 35/2.0).fill(self.color))
                .compositingGroup()
                .clipShape(Circle())
                .overlay(
                    Circle()
                        .stroke(Color.primary,
                                lineWidth:1))
                .opacity(configuration.isPressed ? 0.8 : 1.0)
                .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
    }
}

Example

    struct SwiftUIViewTest: View {
    var body: some View {
       
                
        VStack {
            Text("Button")
            
            HStack {
                Button(action: {}, label: {
                    Image(systemName: "plus")
                })
                .buttonStyle(CircleScaleButton(color: .clear, maxHeight: 45))
                
                Button(action: {}, label: {
                    Image(systemName: "minus")
                })
                .buttonStyle(CircleScaleButton(color: .clear, maxHeight: 45))
            }
            
            Spacer()
                .frame(height: 50)
            
            Text("Image")
            HStack {
               
                Image(systemName: "plus")
                    .modifier(fillButtonCircle(foregroundColor: .black, backgroundColor: .clear, dimension: 40))
                               
                Image(systemName: "minus")
                    .modifier(fillButtonCircle(foregroundColor: .black, backgroundColor: .clear, dimension: 40))
            }
                   
        }
            
    }
}

Many thanks! Buttons really come out the same size. Plus, using ButtonStyle makes the interface look nicer. This is a new skill for me. — vtezin, Mar 24 '21 at 19:10

How to get round shape images of the same size based on SF Symbols in SwiftUI?

2 Answers2