提示框 & 选择器

原生 UIAlertController 的高级用法，支持 TextField、TextView、DatePicker、PickerView、TableView、CollectionView 和 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
}

设置 Content ViewController

当将您自己的自定义 UIViewController 设置到 UIAlertController 中时，请记住设置控制器的 preferredContentSize.height，否则将不起作用。您不能设置 preferredContentSize.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()

选择器

为了更好的用户体验，当在 contentViewController 中设置选择器时，最好在 UIAlertController 中使用 .actionSheet 样式。如果您喜欢，也可以使用 .alert 样式，但是 .actionSheet 样式更宽，用户可以看到更多内容，并且操作按钮位于底部，也更方便用户触摸。

UITextField 在原生的 UIAlertController 中，您只能将 UITextField 添加到 .alert 样式中，并且是默认样式，您无法更改诸如 .borderColor、.borderWidth、.frame.size 等属性。但是，如果您使用 UITextField 创建自己的 UIViewController，这将解决所有这些问题。

单个 TextField 选择器

您可以使用 UIAlertController 的 .alert 和 .actionSheet 两种样式。

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()

两个 TextFields 选择器

您可以使用 UIAlertController 的 .alert 和 .actionSheet 两种样式。

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()

日期选择器

UIDatePicker 在 .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()

选择器视图

如何使用 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()

本地化选择器

国家选择器

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()

颜色选择器

如何使用从 Storyboard 实例化并带有 Autolayout 的 UIViewController 作为 UIAlertController 中的 contentViewController 的示例。

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()

Telegram 选择器

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()

提示框 vs. 操作表

使用 .actionSheet 和 .alert 样式时，有一些事情需要记住

选择器最好在 .actionSheet 样式中使用。
UITextField 可以在两种样式中使用。

安装

CocoaPods

pod 'MMBAlertsPickers'

手动

下载并将 /Source 文件夹拖放到您的项目中。

要求

Swift 4
iOS 11 或更高版本

作者

Roman Volodko - dillidon

交流

如果您发现了一个错误，请打开一个 issue。
如果您有功能请求，请打开一个 issue。
如果您想要贡献代码，请提交一个 pull request。

许可

本项目基于 MIT 许可。