Swift 的警报和选择器
警报和选择器
本机UIAlertController的高级用法,包括TextField,TextView,DatePicker,PickerView,TableView,CollectionView和MapView。
特征
- 基于 UITextField、UITextView、UIDatePicker、UIPickerView、UITableView、UICollectionView 和 MKMapView 的自定义选取器。
- 使用情节提要的示例。
- 轻松的内容视图控制器放置。
- 属性标题标签和消息标签。
- 按钮自定义:图像和标题颜色。
- 易于理解的操作按钮放置。
- 易于演示。
- Pure Swift 4.
Usage
- New Alert
let alert = UIAlertController(style: .alert, title: "Title", message: "Message")
// or
let alert = UIAlertController(style: .alert)
- Set and styling title
alert.set(title: "Title", font: .systemFont(ofSize: 20), color: .black)
// or
alert.setTitle(font: .systemFont(ofSize: 20), color: .black)
- Set and styling message
alert.set(message: "Message", font: .systemFont(ofSize: 16), color: .black)
// or
alert.setMessage(font: .systemFont(ofSize: 16), color: .black)
- Add button with image
alert.addAction(image: image, title: "Title", color: .black, style: .default) { action in
// completion handler
}
- Show Alert
// show alert
alert.show()
// or show alert with options
alert.show(animated: true, vibrate: true) {
// completion handler
}
Set Content ViewController
When setting your own custom into keep in mind to set of the controller otherwise it will no effect. You can not set .UIViewController
UIAlertController
prefferedContentSize.height
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()
Pickers
For UX better to use style in when set picker into . If you like you can use style as well, buy style 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..actionSheet
UIAlertController
contentViewController
.alert
.actionSheet
UITextField
In native UIAlertController you can only add to style with default style and you can not change such properties as , , and so on. But if you make your own with , it will solve all these problems.UITextField
.alert
.borderColor
.borderWidth
.frame.size
UIViewController
UITextField
One TextField Picker
You can use both styles and of ..alert
.actionSheet
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()
Two TextFields Picker
You can use both styles and of ..alert
.actionSheet
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()
DatePicker
UIDatePicker
does not look very much in style..alert
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()
PickerView
Example how to use as and change height of the .UIPickerView
contentViewController
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()
Locale Pickers
-
Country Picker
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()
-
Phone Code Picker
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()
-
Currency Picker
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()
Image Picker
- Horizontal Image Picker with paging and single selection:
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()
- Vertical Image Picker w/o paging and with multiple selection:
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()
PhotoLibrary Picker
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()
ColorPicker
Example how to use UIViewController instantiated from Storyboard with Autolayout as in the .contentViewController
UIAlertController
let alert = UIAlertController(style: .actionSheet)
alert.addColorPicker(color: color) { color in
// action with selected color
}
alert.addAction(title: "Done", style: .cancel)
alert.show()
Contacts Picker
let alert = UIAlertController(style: .actionSheet)
alert.addContactsPicker { contact in
// action with contact
}
alert.addAction(title: "Cancel", style: .cancel)
alert.show()
Location Picker
let alert = UIAlertController(style: .actionSheet)
alert.addLocationPicker { location in
// action with location
}
alert.addAction(title: "Cancel", style: .cancel)
alert.show()
Telegram Picker
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()
TextViewer
let alert = UIAlertController(style: .actionSheet)
alert.addTextViewer(text: .attributedText(text))
alert.addAction(title: "OK", style: .cancel)
alert.show()
Alerts vs. Action Sheets
There are some things to keep in mind when using and styles:.actionSheet
.alert
- Pickers better to use in style.
.actionSheet
UITextField
can be used in both styles.
Installing
Manually
Download and drop folder in your project./Source
Requirements
- Swift 4
- iOS 11 or higher
Authors
- Roman Volodko – dillidon
Communication
- If you found a bug, open an issue.
- If you have a feature request, open an issue.
- If you want to contribute, submit a pull request.
License
This project is licensed under the MIT License.