Advanced usage of UIAlertController and pickers based on it: Telegram, Contacts, Location, PhotoLibrary, Country, Phone Code, Currency, Date...
No Data
Advanced usage of native UIAlertController with TextField, TextView, DatePicker, PickerView, TableView, CollectionView and MapView.
let alert = UIAlertController(style: .alert, title: "Title", message: "Message") // or let alert = UIAlertController(style: .alert)
alert.set(title: "Title", font: .systemFont(ofSize: 20), color: .black) // or alert.setTitle(font: .systemFont(ofSize: 20), color: .black)
alert.set(message: "Message", font: .systemFont(ofSize: 16), color: .black) // or alert.setMessage(font: .systemFont(ofSize: 16), color: .black)
alert.addAction(image: image, title: "Title", color: .black, style: .default) { action in // completion handler }
// show alert alert.show()// or show alert with options alert.show(animated: true, vibrate: true) { // completion handler }
When setting your own custom
UIViewControllerinto
UIAlertControllerkeep in mind to set
prefferedContentSize.heightof the controller otherwise it will no effect. You can not set
prefferedContentSize.width.
let alert = UIAlertController(style: .alert, title: "Title") let vc = CustomViewController() vc.preferredContentSize.height = height alert.setValue(vc, forKey: "contentViewController") alert.show()// or let alert = UIAlertController(style: .alert, title: "Title") let vc = CustomViewController() alert.set(vc: vc, height: height) alert.show()
For UX better to use
.actionSheetstyle in
UIAlertControllerwhen set picker into
contentViewController. If you like you can use
.alertstyle as well, buy
.actionSheetstyle is wider and User can see more as well as action button is placing at bottom that also more convenience for User to touch it.
UITextField In native UIAlertController you can only add
UITextFieldto
.alertstyle with default style and you can not change such properties as
.borderColor,
.borderWidth,
.frame.sizeand so on. But if you make your own
UIViewControllerwith
UITextField, it will solve all these problems.
You can use both styles
.alertand
.actionSheetof
UIAlertController.
let alert = UIAlertController(style: self.alertStyle, title: "TextField") let config: TextField.Config = { textField in textField.becomeFirstResponder() textField.textColor = .black textField.placeholder = "Type something" textField.left(image: image, color: .black) textField.leftViewPadding = 12 textField.borderWidth = 1 textField.cornerRadius = 8 textField.borderColor = UIColor.lightGray.withAlphaComponent(0.5) textField.backgroundColor = nil textField.keyboardAppearance = .default textField.keyboardType = .default textField.isSecureTextEntry = true textField.returnKeyType = .done textField.action { textField in // validation and so on } } alert.addOneTextField(configuration: config) alert.addAction(title: "OK", style: .cancel) alert.show()
You can use both styles
.alertand
.actionSheetof
UIAlertController.
let alert = UIAlertController(style: .alert, title: "Login")let configOne: TextField.Config = { textField in textField.left(image: user), color: .black) textField.leftViewPadding = 16 textField.leftTextPadding = 12 textField.becomeFirstResponder() textField.backgroundColor = nil textField.textColor = .black textField.placeholder = "Name" textField.clearButtonMode = .whileEditing textField.keyboardAppearance = .default textField.keyboardType = .default textField.returnKeyType = .done textField.action { textField in // action with input } }
let configTwo: TextField.Config = { textField in textField.textColor = .black textField.placeholder = "Password" textField.left(image: lock, color: .black) textField.leftViewPadding = 16 textField.leftTextPadding = 12 textField.borderWidth = 1 textField.borderColor = UIColor.lightGray.withAlphaComponent(0.5) textField.backgroundColor = nil textField.clearsOnBeginEditing = true textField.keyboardAppearance = .default textField.keyboardType = .default textField.isSecureTextEntry = true textField.returnKeyType = .done textField.action { textField in // action with input } } // vInset - is top and bottom margin of two textFields
alert.addTwoTextFields(vInset: 12, textFieldOne: configOne, textFieldTwo: configTwo) alert.addAction(title: "OK", style: .cancel) alert.show()
UIDatePickerdoes not look very much in
.alertstyle.
let alert = UIAlertController(style: .actionSheet, title: "Select date") alert.addDatePicker(mode: .dateAndTime, date: date, minimumDate: minDate, maximumDate: maxDate) { date in // action with selected date } alert.addAction(title: "OK", style: .cancel) alert.show()
Example how to use
UIPickerViewas
contentViewControllerand change height of the
UIAlertController.
let alert = UIAlertController(style: .actionSheet, title: "Picker View", message: "Preferred Content Height")let frameSizes: [CGFloat] = (150...400).map { CGFloat($0) } let pickerViewValues: [[String]] = [frameSizes.map { Int($0).description }] let pickerViewSelectedValue: PickerViewViewController.Index = (column: 0, row: frameSizes.index(of: 216) ?? 0)
alert.addPickerView(values: pickerViewValues, initialSelection: pickerViewSelectedValue) { vc, picker, index, values in DispatchQueue.main.async { UIView.animate(withDuration: 1) { vc.preferredContentSize.height = frameSizes[index.row] } } } alert.addAction(title: "Done", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet, message: "Select Country") alert.addLocalePicker(type: .country) { info in // action with selected object } alert.addAction(title: "OK", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet, title: "Phone Codes") alert.addLocalePicker(type: .phoneCode) { info in // action with selected object } alert.addAction(title: "OK", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet, title: "Currencies") alert.addLocalePicker(type: .currency) { info in alert.title = info?.currencyCode alert.message = "is selected" // action with selected object } alert.addAction(title: "OK", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet) let photos: [UIImage] = images alert.addImagePicker( flow: .horizontal, paging: true, images: photos, selection: .single(action: { [unowned self] image in // action with selected image })) alert.addAction(title: "OK", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet) let photos: [UIImage] = images alert.addImagePicker( flow: .vertical, paging: false, height: UIScreen.main.bounds.height, images: photos, selection: .multiple(action: { [unowned self] images in // action with selected images })) alert.addAction(title: "OK", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet) alert.addPhotoLibraryPicker( flow: .horizontal, paging: true, selection: .single(action: { image in // action with selected image })) alert.addAction(title: "Cancel", style: .cancel) alert.show()
Example how to use UIViewController instantiated from Storyboard with Autolayout as
contentViewControllerin the
UIAlertController.
let alert = UIAlertController(style: .actionSheet) alert.addColorPicker(color: color) { color in // action with selected color } alert.addAction(title: "Done", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet) alert.addContactsPicker { contact in // action with contact } alert.addAction(title: "Cancel", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet) alert.addLocationPicker { location in // action with location } alert.addAction(title: "Cancel", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet) alert.addTelegramPicker { result in switch result { case .photo(let assets): // action with assets case .contact(let contact): // action with contact case .location(let location): // action with location } } alert.addAction(title: "Cancel", style: .cancel) alert.show()
let alert = UIAlertController(style: .actionSheet) alert.addTextViewer(text: .attributedText(text)) alert.addAction(title: "OK", style: .cancel) alert.show()
There are some things to keep in mind when using
.actionSheetand
.alertstyles:
.actionSheetstyle.
UITextFieldcan be used in both styles.
Download and drop
/Sourcefolder in your project.
This project is licensed under the MIT License.