1. 程式人生 > >7.使用UITableView和UIDatePicker製作一個日期選擇器

7.使用UITableView和UIDatePicker製作一個日期選擇器

介紹就不說了, 直接來看吧

已更新到Swift 2.0版本, 支援Xcode7, iOS9

1.搭建介面

PS: 這裡的Controller必須是UITableViewController, 否則的話就會在實現的時候出現很多問題

1.選中UITableView, 把UITableViewCell設定成靜態Cells
1

2.選中標題名, 把Cell的數量設為2, 標題名改成你所喜歡的名字
2

3.選中UITableViewCell, 把它的樣式更改成Right Detail
3

4.選中UIDatePicker, 把他的樣式成改成Date and Time
4

5.選中第二個UITableViewCell, 把最重要的一個選項勾上
5

2.實現程式碼

1.關聯控制元件

// 1.關聯UITableViewCell裡的DetaiLabel 
@IBOutlet weak var detailLabel: UILabel! 

// 2.關聯UIDatePicker控制元件 
@IBOutlet weak var datePicker: UIDatePicker! 

// 3.設定一個Bool型別的輔助引數, 預設為false 
var datePickerHidden = false

2.設定操作邏輯

// 5.自定義UIDatePicker方法 
func datePickerChanged () { 
    // 5.1設定DetaiLabel的文字為UIDatePicker控制元件所選中的內容, 並且設定選中的日期和時間樣式. 
detailLabel.text = NSDateFormatter.localizedStringFromDate(datePicker.date, dateStyle: NSDateFormatterStyle.ShortStyle, timeStyle: NSDateFormatterStyle.ShortStyle) } // 6.自定義點選UITableViewCell的時間 override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { // 6.1判斷, 如果當前點選的行數和組數為0 的話, 那麼就呼叫下面的方法
if indexPath.section == 0 && indexPath.row == 0 { toggleDatepicker() } // 6.2操作優化, 沒當點選玩之後就取消選中狀態 self.tableView.deselectRowAtIndexPath(indexPath, animated: true) } // 7.自定義UIDatePicker切換方法 func toggleDatepicker() { // 7.1當自定義切換方法被呼叫, 那麼自定義的Bool引數就更改成true或者false狀態 datePickerHidden = !datePickerHidden // 7.2開始更新當前的TableView tableView.beginUpdates() // 7.3結束更新當前的TableView tableView.endUpdates() }

3.獲取UIDatePicker的點選事件

// 8.設定UIDatePicker的點選事件 
@IBAction func datePickerValue(sender: UIDatePicker) { 
    // 8.1每當點選UIDatePicker, 就呼叫下面的方法    
    datePickerChanged() 
}

4.設定UITableViewCell的高度

// 9.自定義當前的UITableViewCell高度 
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 
// 9.1判斷, 如果當前的Cell為第0組的第1個, 那麼就返回0, 否則就返回系統定義的高度 
    if datePickerHidden && indexPath.section == 0 && indexPath.row == 1 { 
        return 0 
    } else { 
        return super.tableView(tableView, heightForRowAtIndexPath: indexPath) 
    } 
}

3.最終效果

0

好了, 這次我們就講到這裡, 下次我們繼續~