Swift纯Code之旅 Day7. 「时间魔术师: DatePicker」

今天要来介绍闹钟最重要的元件：DatePicker

昨天我们已经将新增闹钟的页面做出来了，今天就要把最重要的时间选择器给刻上去，
那我们会用到DatePicker这个元件，直接来实作吧！

一样使用code新增 DatePicker 元件

let datePicker: UIDatePicker = {
       let datePicker = UIDatePicker()
        return datePicker
    }()

接着加入画面中

 func setViews() {
        self.view.addSubview(datePicker)
    }

设定Layout

func setLayouts() {
        datePicker.snp.makeConstraints { make in
            // 设定DatePicker元件的左边距离画面的左边间隔17
            make.trailing.equalTo(self.view).offset(-17)
            // 设定DatePicker元件的顶部距离画面的顶部间隔80
            make.top.equalTo(self.view).offset(120)
        }
    }

记得将setViews() & setLayouts() 放入 viewDidLoad()内哦！

override func viewDidLoad() {
        super.viewDidLoad()
        initView()
        setViews()
        setLayouts()
        setNavigation()
    }

执行看看程序吧！

DatePicker确实跑出来了，但外型好像跟Iphone的不太一样？
让我们来改造他一下：

let datePicker: UIDatePicker = {
       let datePicker = UIDatePicker()
        // DatePicker 只显示时间，不显示日期
        datePicker.datePickerMode = .time
        // 让DatePicker显示24小时制
        datePicker.locale = Locale(identifier: "NL")
        // 让DatePicker的样式跟IPhone上一模一样
        datePicker.preferredDatePickerStyle = .inline
        // 设定DatePicker的文字颜色
        datePicker.tintColor = .orange
        return datePicker
    }()

接着再执行看看～

哇靠！变得有模有样了呢

最後呢，再加个文字让他更像IPhone的闹钟介面～

let timeLabel: UILabel = {
        let label = UILabel()
        // Label的文字颜色
        label.textColor = .white
        // Label的内容
        label.text = "时间"
        return label
    }()

一样加入画面

func setViews() {
        self.view.addSubview(datePicker)
        self.view.addSubview(timeLabel)
    }

一样设定Layout

func setLayouts() {
        datePicker.snp.makeConstraints { make in
            // 设定DatePicker元件的左边距离画面的左边间隔17
            make.trailing.equalTo(self.view).offset(-17)
            // 设定DatePicker元件的顶部距离画面的顶部间隔80
            make.top.equalTo(self.view).offset(120)
        }
        
        timeLabel.snp.makeConstraints { make in
            // 设定Label元件的顶部与底部皆与datePicker的顶部与底部一致
            make.top.bottom.equalTo(datePicker)
            // 设定Label元件的左边距离画面的左边间隔17
            make.leading.equalTo(self.view).offset(17)
        }
    }