近日發(fā)現(xiàn)釘釘?shù)娜掌谶x擇器使用時(shí)比較方便,就試著寫了一個(gè)筒狠,基本實(shí)現(xiàn)功能并適當(dāng)做了些優(yōu)化汪诉,先看效果:
QCalendarPicker.gif
思路
1、框架主要由三個(gè)部分組成:基礎(chǔ) QCalendarPicker, 日歷模塊 CalendarView, 時(shí)間選擇模塊 TimePickerView唉窃。
QCalendarPicker 負(fù)責(zé)作為基層負(fù)責(zé)顯示界面耙饰、獲取最終數(shù)據(jù)、底層基礎(chǔ)操作等
CalendarView 單獨(dú)的日歷模塊纹份,輸出選中的日期苟跪,是 QTimePicker 主要部分
TimePickerView 時(shí)間選擇, 使用 UIDatePicker, 功能簡(jiǎn)單
2、主要說(shuō)一說(shuō) CalendarView 的實(shí)現(xiàn)
使用 UICollectionView 作為日歷單元格的布局蔓涧,使之滾動(dòng)分頁(yè) collectionView.isPagingEnabled = true件已。
采用 42 * 3 個(gè)item, 每一頁(yè)42個(gè)item共三頁(yè)。初始化時(shí)使 collectionView 滾到第二頁(yè)即顯示頁(yè)面的第一個(gè)item的 下標(biāo)是42.
每次滑動(dòng)一頁(yè)的時(shí)候會(huì)再次使 collectionView 滾到第二頁(yè)元暴,并重置數(shù)據(jù)
使用
使用很簡(jiǎn)單篷扩,把 QTimePicker.swift 拖入項(xiàng)目,使用以下代碼就行
let picker = QCalendarPicker { (date: String) in
print(date)
}
picker.show()
[圖片上傳中...(QDatePicker3.gif-5a5629-1513243999752-0)]
QDatePicker3.gif
QDatePicker
新增傳統(tǒng)的日期選擇器(樣式如上圖)
支持兩種選擇模式
enum QPickerStyle {
case datePicker // 時(shí)間選擇器
case singlePicker // 單項(xiàng)選擇器
}
datePicker 模式下 支持一下日期樣式
enum DatePickerStyle { // 此只在 datePicker 下生效
case YMDHM // 選擇 年月日時(shí)分
case YMD // 選擇 年月日
case MDHM // 選擇 月日時(shí)分
case MD // 選擇 月日
case HM // 選擇 時(shí)分
}
可選彈出動(dòng)畫樣式
enum AminationStyle {
case styleDefault // 默認(rèn)彈出樣式
case styleOptional // 可選彈出樣式
}
使用
使用很簡(jiǎn)單茉盏,把 QDatePicker.swift 拖入項(xiàng)目鉴未,使用以下代碼就行
datePicker模式下的選項(xiàng) 和 singlePicker 模式下的選項(xiàng)互斥
let picker = QDatePicker { (date: String) in
print(date)
}
picker.datePickerStyle = .YMDHM
picker.themeColor = .red
picker.pickerStyle = .singlePicker
picker.animationStyle = .styleOptional
picker.singlePickerDatas = ["小新", "小徹", "阿呆", "正男", "妮妮", "小白", "娜娜子?"]
picker.show()