How can I change layout of apple ColorPicker from Circle to Square in SwiftUI?

Question

The default button style of ColorPicker is a circle as bellow.

I want to change the style of the circle button to Rectangle. But seems no API can change it style. So I put a Rectangle over it , and set it allowsHitTesting to false to transport click event to ColorPicker.

struct ColorPickerView: View {
    @State private var colorValue = Color.orange
    var body: some View {
        ZStack() {
            ColorPicker("", selection: $colorValue)
                .labelsHidden()
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 40, height: 40, alignment: .center)
                .allowsHitTesting(false)
        }
    }
}

But the ColorPicker did not present after click.

I put a circle bellow the Rectangle to test whether allowsHitTesting is useful. It can work properly responding to tap gesture to print "Circle tapped!".

struct ColorPickerView: View {
    @State private var colorValue = Color.orange
    var body: some View {
        ZStack() {
            ColorPicker("", selection: $colorValue)
                .labelsHidden()
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 40, height: 40, alignment: .center)
                .onTapGesture {
                    print("Circle tapped!")
                }
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 40, height: 40, alignment: .center)
                .allowsHitTesting(false)
        }
    }
}

Why the ColorPicker can not responding to tap gesture? Or Is there a way to customize the ColorPicker button？

ios coder · Accepted Answer · 2021-04-18T05:39:17.397

12

Simply use opacity, and send the ColorPicker to overlay, like in the code:

struct SquareColorPickerView: View {
    
    @Binding var colorValue: Color
    
    var body: some View {
        
        colorValue
            .frame(width: 40, height: 40, alignment: .center)
            .cornerRadius(10.0)
            .overlay(RoundedRectangle(cornerRadius: 10.0).stroke(Color.white, style: StrokeStyle(lineWidth: 5)))
            .padding(10)
            .background(AngularGradient(gradient: Gradient(colors: [.red,.yellow,.green,.blue,.purple,.pink]), center:.center).cornerRadius(20.0))
            .overlay(ColorPicker("", selection: $colorValue).labelsHidden().opacity(0.015))
            .shadow(radius: 5.0)

    }
}

Use case:

struct ContentView: View {
    
    @State private var colorValue = Color.orange
    
    var body: some View {

        SquareColorPickerView(colorValue: $colorValue)

    }
}

edited Apr 18 '21 at 05:39

answered Apr 18 '21 at 04:39

ios coder

1
4
31
91

5

How long have you used swiftui and how can I reach your level? – mars Apr 18 '21 at 05:27
1

There are much better than me here, I am just new here. but thanks. :) – ios coder Apr 18 '21 at 05:29
Here is another question of mine: https://stackoverflow.com/questions/66258627/ios-clock-animations-on-homescreen-widget. Can you help me see this question? – mars Apr 18 '21 at 07:32
widgets are a little tricky to work with them, I have never use it in my apps or projects, but you can find your answer with looking about other question and answers in this website. – ios coder Apr 18 '21 at 07:47

score 0 · Answer 2 · answered Jul 04 '23 at 19:11

Refined ios coder answer to have adjustable size. A Bool to set Square/Circle View would be a nice touch. Credit: ios coder.

struct EyedropperColorPicker: View {
@Binding var colorValue: Color
var size: CGFloat = 20

var body: some View {
    colorValue
        .frame(width: size, height: size, alignment: .center)
        .cornerRadius(size * 0.25) // adjust corner radius proportional to size
        .overlay(RoundedRectangle(cornerRadius: size * 0.25)
            .stroke(Color.white, style: StrokeStyle(lineWidth: size * 0.125))) // adjust border width proportional to size
        .padding(size * 0.25) // adjust padding proportional to size
        .background(
            AngularGradient(gradient: Gradient(colors: [.red,.yellow,.green,.blue,.purple,.pink]), center: .center)
                .cornerRadius(size * 0.5) // adjust corner radius proportional to size
        )
        .overlay(ColorPicker("", selection: $colorValue).labelsHidden().opacity(0.015))
        .shadow(radius: size * 0.125) // adjust shadow radius proportional to size
}

}

How can I change layout of apple ColorPicker from Circle to Square in SwiftUI?

2 Answers2

Linked