UIPickerView封装,具有多种类型"单列数据,
2017-03-21 本文已影响215人
蚂蚁安然
ConvenientPickerView
一款方便的PickerView,通过简单的代码设置可以实现UIPickerView,无需代理设置,回收之后还会移除,可以设置有两种弹出,一种是UITextField弹出的,另一种是直接弹出.
anran.gif如何使用ConvenientPickerView
- 这里使用这个PickerView最重要的是数据源,一定要是这种数据源
let singleData = ["swift", "ObjecTive-C", "C", "C++", "java", "php", "python", "ruby", "js"]
// 每一列为数组
let multipleData = [["1天", "2天", "3天", "4天", "5天", "6天", "7天"],["1小时", "2小时", "3小时", "4小时", "5小时"], ["1分钟","2分钟","3分钟","4分钟","5分钟","6分钟","7分钟","8分钟","9分钟","10分钟"]]
// 注意这个数据的格式!
let multipleAssociatedData: [[[String: [String]?]]] = [// 数组
[ ["交通工具": ["陆地", "空中", "水上"]],//字典
["食品": ["健康食品", "垃圾食品"]],
["游戏": ["益智游戏", "角色游戏"]]
],// 数组
[ ["陆地": ["公交车", "小轿车", "自行车"]],
["空中": ["飞机"]],
["水上": ["轮船"]],
["健康食品": ["蔬菜", "水果"]],
["垃圾食品": ["辣条", "不健康小吃"]],
["益智游戏": ["消消乐", "消灭星星"]],
["角色游戏": ["lol", "cf"]]
]
]
2.. ConvenientPickerView提供了多种类方法,我们可以通过类方法直接调用
ConvenientPickerView.showSingleColPicker("单列数据",
data: singleData,
defaultSelectedIndex: 2) { [unowned self]
(selectIndex, selectValue) in
self.selectedLabel.text = "选中了第\(selectIndex)行----选中的数据为\(selectValue)"
}
ConvenientPickerView.showMultipleColsPicker("多列不关联数据",
data: multipleData,
defaultSelectedIndexs: [0,1,2]) {[unowned self] (selectedIndexs, selectedValues) in
self.selectedLabel.text = "选中了第\(selectedIndexs)行----选中的数据为\(selectedValues)"
}
// 注意这里设置的是默认的选中值, 而不是选中的下标,省得去数关联数组里的下标
ConvenientPickerView.showMultipleAssociatedColsPicker("多列关联数据", data: multipleAssociatedData, defaultSelectedValues: ["交通工具","陆地","自行车"]) {[unowned self] (selectedIndexs, selectedValues) in
self.selectedLabel.text = "选中了第\(selectedIndexs)行----选中的数据为\(selectedValues)"
}
// 注意设置默认值得时候, 必须设置完整, 不能进行省略 ["四川", "成都", "成华区"] 比如不能设置为["四川", "成都"]
// ["北京", "通州"] 不能设置为["北京"]
ConvenientPickerView.showCitiesPicker("省市区选择",
defaultSelectedValues: ["北京", "/", "/"],
selectTopLevel: true) { [unowned self] (selectedIndexs, selectedValues) in
// 处理数据
let combinedString = selectedValues.reduce("", { (result, value) -> String in
result + " " + value
})
self.selectedLabel.text = "选中了第\(selectedIndexs)行----选中的数据为\(combinedString)"
}
ConvenientPickerView.showDatePicker("日期选择") {[unowned self] ( selectedDate) in
let formatter = DateFormatter()
formatter.dateFormat = "yyyy-MM-dd"
let string = formatter.string(from: selectedDate)
self.selectedLabel.text = "选中了的日期是\(string)"
}
3.. ConvenientPickerView关于UITextField的弹出
// 代码生成
let test = PickerTextField(frame: CGRect(x: 20, y: timeTextField.frame.maxY, width: 340, height: 28))
test.borderStyle = .roundedRect
test.placeholder = "代码初始化"
test.showSingleColPicker("测试代码", data: singleData, defaultSelectedIndex: 0, autoSetSelectedText: true) { [unowned self] (textField, selectedIndex, selectedValue) in
print(selectedValue)
self.selectedDataLabel.text = selectedValue
}
view.addSubview(test)
// 使用Xib的情况:
@IBOutlet weak var singleTextField: PickerTextField!
// 如果设置了autoSetSelectedText为true 将自动设置text的值, 默认以空格分开多列选择, 但你仍然可以在响应完成的closure中修改text的值
singleTextField.showSingleColPicker("编程语言选择", data: singleData, defaultSelectedIndex: 2, autoSetSelectedText: true) {[unowned self] (textField, selectedIndex, selectedValue) in
// 可以使用textField 也可以使用 self.singleTextField
textField.text = "选中了第\(selectedIndex)行----选中的数据为\(selectedValue)"
self.selectedDataLabel.text = "选中了第\(selectedIndex)行----选中的数据为\(selectedValue)"
}
书写思路
-
我将工具栏单独封装为ToolBarView
-
PickeView为单独的View
-
最后在ConvenientPickerView, PickerTextField中调用快速构建代码
总结
本文是在仿写大神的Demo,通过练习封装来提高自己的技术,这里有完成的代码,如果你觉得不错的话,给一个星星源码