UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Two questions about the colorpicker

Forums > SwiftUI

Hi! I want to 1. Display a color picker without a title in the picker and 2. I do not want the "pipette" (is that the correct word?) I have the following code that displays the color picker without a title (kinda hack I think) but I can't see how to remove the pipette.

Any ideas?

HStack {
                    Text("Accent color")
                        .font(.system(size: 17, weight: .regular, design: .rounded))
                        .foregroundColor(settingsAccentColor)
                    ColorPicker("", selection: $settingsAccentColor, supportsOpacity: false)
                        .font(.system(size: 17, weight: .regular, design: .rounded))
                        .foregroundColor(settingsAccentColor)
                }

1      

Have a look at this - it shows multiple ways of setting the colour.

As you have done, set the title to "".

1      

@Greenamberred thank you I saw that but it does not explain how to remove the pipette.

1      

There is no way to hide the eyedropper in SwiftUI. You would need to find a 3rd party substitute for ColorPicker if you want that level of customization.

I'm curious why you want to hide it. The eyedropper is a standard interface element that most people would expect to be there in a ColorPicker.

1      

Im with @roosterboy and why do you put HStack with "Accent color" when title does it anyway.

You can hide the Opacity bar

PS if you use "" in the title this will NOT read with voice over on and you will have to add .accessibilityLabel("Pick an Accent Color")

ColorPicker(title: StringProtocol, selection: Binding<Color>, supportsOpacity: Bool)

1      

PS You could do your only picker

struct MyColorPicker: View {
    @Environment(\.dismiss) var dismiss
    @Binding var selectedColor: Color
    let colors: [Color] = [.pink, .purple, .red, .orange, .gray, .green, .teal, .indigo, .blue, .cyan, .mint, .yellow, .primary, .brown]
    let colorColumns = [
        GridItem(.adaptive(minimum: 44))
    ]

    var body: some View {
        LazyVGrid(columns: colorColumns) {
                ForEach(colors, id: \.self) { color in
                    ZStack {
                        color
                            .aspectRatio(1, contentMode: .fit)
                            .cornerRadius(6)

                        if color == selectedColor {
                            Image(systemName: "checkmark.circle")
                                .foregroundColor(.white)
                                .font(.largeTitle)
                        }
                    }
                    .onTapGesture {
                        selectedColor = color
                        dismiss()
                    }
                }
            }
            .padding()
    }
}

Use it

struct ContentView: View {
    @State private var selectedColor = Color.red
    @State private var showingPicker = false

    var body: some View {
        HStack {
            Text("Accent color")
                .foregroundColor(selectedColor)

            Spacer()

            Circle()
                .fill(selectedColor)
                .frame(width: 20)
                .onTapGesture {
                    showingPicker.toggle()
                }

        }
        .padding()
        .sheet(isPresented: $showingPicker) {
            MyColorPicker(selectedColor: $selectedColor)
                .presentationDetents([.medium])
        }

    }
}

1      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.