How can I get this kind of Color Picker View in my iOS app?

Question

I would like to implement a ColorPickerView Controller in my app like this in the picture. But I don't know what this circle element is called and may I make that object bigger?

I have encountered a ColorPickerViewController that is presented modally as a complete another scene but at this moment, I would like to implement a color picker as a little window without opening a new window. Please, tell me how I can implement this.

Answer 1

I don't think it's possible to do that without opening it modally. That is the UIColorPickerViewController in UIKit, or ColorPicker in SwiftUI. It looks like this in iOS 14.

and in iPadOS 14 it would look like this

In SwiftUI it can be created like this:

struct ContentView: View {

@State var color = Color(.blue)

var body: some View {
        ColorPicker("Color", selection: $color)
            .padding(.horizontal, 150)
}

}

and in UIKit it is like this

// Initializing Color Picker
let picker = UIColorPickerViewController()

// Setting the Initial Color of the Picker

picker.selectedColor = self.view.backgroundColor!

// Setting Delegate
picker.delegate = self

// Presenting the Color Picker
self.present(picker, animated: true, completion: nil)

For more information you can take a look at these websites:

• UIKit: https://www.swiftpal.io/articles/how-to-use-uicolorpickerviewcontroller-in-swift

• Swift UI: https://www.hackingwithswift.com/quick-start/swiftui/how-to-let-users-select-a-color-with-colorpicker

Now Additionally, if you really want it to be in a little window, you can use a PopOver and create your own color picker, it is a bit of work but shouldn't be too hard.

Here are some resources that might help you:

• SwiftUI: https://www.youtube.com/watch?v=4Wbyje-TMME
• UIKit: https://www.hackingwithswift.com/example-code/uikit/how-to-create-popover-menus-using-uipopoverpresentationcontroller
• More UIKit: http://www.thomashanning.com/uipopoverpresentationcontroller/

Answer 2

On button action, use the below code.

@IBAction func colorPickerTapped(_ sender: UIButton) {

let colorPickerVC = UIColorPickerViewController()
colorPickerVC.modalPresentationStyle = .popover
colorPickerVC.modalTransitionStyle = .crossDissolve
present(colorPickerVC, animated: true)

let popOverVC = colorPickerVC.popoverPresentationController
popOverVC?.sourceView = sender
colorPickerVC.delegate = self

}