UIDatePicker 在 iOS14 上的新特性

iOS 9 到 iOS13.4，UIDatePicker 的样式如图

UIDatePicker

如果你的 UI 在 iOS14 上出现了问题，想修改回以前，可以设置 UIDatePicker 的
preferredDatePickerStyle 属性

不同的显示方式可能导致 UI 出现问题

if #available(iOS 13.4, *) {
    preferredDatePickerStyle = .wheels
}

这个新样式是苹果UIDatePicker 的更新，提供一个可供用户点击的更小 UI

@available(iOS 13.4, *)
public enum UIDatePickerStyle : Int {

    
    /// Automatically pick the best style available for the current platform & mode.
    case automatic = 0

    /// Use the wheels (UIPickerView) style. Editing occurs inline.
    case wheels = 1

    /// Use a compact style for the date picker. Editing occurs in an overlay.
    case compact = 2

    /// Use a style for the date picker that allows editing in place.
    @available(iOS 14.0, *)
    case inline = 3
}

preferredDatePickerStyle

实验一下每个值的具体样式：

let picker = UIDatePicker()
view.addSubview(picker)
        
picker.datePickerMode = .date
picker.locale = Locale.init(identifier: "zh_CN")

//        picker.frame =  CGRect(x: 0, y: 100, width: UIScreen.main.bounds.width, height: 300)
picker.center = view.center
picker.preferredDatePickerStyle = .automatic // 修改这个值观察变化

将 preferredDatePickerStyle 设置为:
.automatic：swift 会自动选出合适的样式
.wheels：如前文所提到的，显示经典样式
.compact：可点的小 UI，点按后弹出系统时间选择控件（这是在一个 alert 中）
.inline：直接显示时间选择控件（在当前 UI）

.automatic

.wheels

.compact

. inline

关于 UIDatePicker 的 preferredDatePickerStyle，我比较感兴趣的是它的 .compact，尝试改变其样式，可以直接用在项目里，但灰色的背景不可以通过设置 backgroundColor = .white 去实现，backgroundColor 设置成任意其它值，都可以起效，但设置成 .white 后始终还是有个灰色底，猜想苹果留这个底的原因是提示用户这个控件可按。所以如果要直接使用，可以和设计商量一下，换一个合适自家 APP 的底色。

如果一定要设置成白色，可以在 UIDatePicker 的最上层插入一个白色的 View，设置其大小与 superview 相等

// .compact 时 底色显示为白色
picker.subviews.first?.subviews.forEach { grayView in
    let view = UIView(frame: grayView.bounds)
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .white
    grayView.insertSubview(view, at: 0)
    view.topAnchor.constraint(equalTo: grayView.safeAreaLayoutGuide.topAnchor).isActive = true
    view.bottomAnchor.constraint(equalTo: grayView.safeAreaLayoutGuide.bottomAnchor).isActive = true
    view.leadingAnchor.constraint(equalTo: grayView.safeAreaLayoutGuide.leadingAnchor).isActive = true
    view.trailingAnchor.constraint(equalTo: grayView.safeAreaLayoutGuide.trailingAnchor).isActive = true
}

将 preferredDatePickerStyle 设置为 .compact时，字色修改要用 tintColor 而非textColor

picker.tintColor = .black // 字色为黑色

但如上文所说，底色为白色+背景色也是白色时，不易发现这是一个可点按的控件。

白底黑字

最后编辑于：2020.11.02 16:54:51