iOS 14 – How to use UIColorWell and UIColorPickerViewController?

iOS 14 comes up with three new concepts of pickers, which are Menu, Date Picker and Color Picker. All of this will be useful for the developers as well as users of iOS. Today we will learn about the UIColorWell and UIColorPickerViewController.

UIColorWell

UIColorWell is UIControl that displays a color picker. This control looks like this:

Here I am posting an example which will create an UIColorWell by code. You can also create it by the storyboard using UIView and later by adding subclass name as UIColorWell.

As I have displayed you can give the custom title for the color picker controller.

	import UIKit
	class ViewController: UIViewController {
	var colorWell: UIColorWell!
	override func viewDidLoad() {
	super.viewDidLoad()
	addColorWell()
	}
	func addColorWell() {
	colorWell = UIColorWell(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
	self.view.addSubview(colorWell)
	colorWell.center = view.center
	colorWell.title = "Select Color"
	colorWell.addTarget(self, action: #selector(colorWellChanged(_:)), for: .valueChanged)
	}
	@objc func colorWellChanged(_ sender: Any) {
	self.view.backgroundColor = colorWell.selectedColor
	}
	}

view raw UIColorWellSample.swift hosted with ❤ by GitHub

By clicking on UIColorWell user can pick the color from the grid, spectrum, RGB sliders or by color picker available on the top left side.

If you select any color from picker then UIColorWell will look like above. Here I have selected black color.

UIColorPickerViewController

UIColorPickerViewController is a view controller that informs your app about user interaction with the color picker. You can add your own control and display color picker by some event on it.

Here I am posting an example to present a color picker controller from the UIButton.

	import UIKit
	class ViewController: UIViewController {
	override func viewDidLoad() {
	super.viewDidLoad()
	}
	@IBAction func btnColorPickerPressed(_ sender: Any) {
	let colorPickerVC = UIColorPickerViewController()
	colorPickerVC.delegate = self
	present(colorPickerVC, animated: true) {
	}
	}
	}
	extension ViewController : UIColorPickerViewControllerDelegate {
	func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
	}
	func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
	self.view.backgroundColor = viewController.selectedColor
	}
	}

view raw UIColorPickerViewControllerSample.swift hosted with ❤ by GitHub

There are two delegate methods of this controller which are DidFinish and DidSelectColor.

Conclusion

So many things are there to explore in Xcode 12, iOS 14 and macOS Big Sur. If I get time, I will keep posted!

I am posting tweets/retweets about iOS everyday.

I hope you learned something. If you did, feel free to share this article with a friend or on social media. Let me know if you have any questions, comments or feedback – either via Twitter or email.

Stay Safe At Home. Learn Something New. Share To The World.
Happy Coding 🙂