UIKit 框架下 Date Picker 日期选择器对齐异常问题咨询

根因 #

iOS 14 及以上版本中，UIDatePicker 的 compact、automatic 样式内置了系统默认左右内边距，手动添加的约束默认绑定控件的外层 frame，实际渲染的选择器内容会因内置边距向右偏移，Attributes Inspector 里的常规对齐配置无法覆盖系统内置边距规则。

修复方案 #

• 方案1：代码配置内边距
  初始化控件后直接清空自带边距，再正常添加约束即可：

  // Swift 代码
  let datePicker = UIDatePicker()
  datePicker.preferredDatePickerStyle = .compact
  // 清空系统内置边距
  datePicker.directionalLayoutMargins = .zero
  // 正常添加约束，例如左对齐父视图左边缘
  datePicker.translatesAutoresizingMaskIntoConstraints = false
  NSLayoutConstraint.activate([
      datePicker.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
      datePicker.centerYAnchor.constraint(equalTo: view.centerYAnchor)
  ])
  

  // Objective-C 代码
  UIDatePicker *datePicker = [[UIDatePicker alloc] init];
  datePicker.preferredDatePickerStyle = UIDatePickerStyleCompact;
  datePicker.directionalLayoutMargins = UIEdgeInsetsZero;
  datePicker.translatesAutoresizingMaskIntoConstraints = NO;
  [NSLayoutConstraint activateConstraints:@[
      [datePicker.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor constant:16],
      [datePicker.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor]
  ]];
  

• 方案2：Storyboard/XIB 配置

  1. 选中 Date Picker 控件，打开约束设置面板，取消约束的 Relative to margin 勾选后再保存约束
  2. 切换到 Identity Inspector，在 User Defined Runtime Attributes 中添加配置：
     • Key Path：directionalLayoutMargins.leading，Type：Number，Value：0
     • 如需右对齐也可添加 directionalLayoutMargins.trailing，值同样设为 0

• 方案3：容器视图嵌套适配（兼容性最高）
  新增一个空白 UIView 作为 Date Picker 的父容器，给容器添加你需要的位置约束，再将 Date Picker 居中/左对齐约束到容器内，即可屏蔽系统内置边距对整体布局的影响，适配不同系统版本的样式变更。

内容的提问来源于stack exchange，提问作者Iggi Jimenez