iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker

实现:以下几个关于UIPickerView & UIDatePicker 的简单使用


源代码下载地址:点击打开链接


1、Picker控件文档路径


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第1张图片


2、点菜系统


2.1 界面




2.2 实现思路


1> 懒加载数据,这里简单不需要模型,直接用一个数组即可(由三个数组构成的数组)

2> 在Storyboard中拖入UIPickerView控件

3> 跟UITableView控件类似,设置UIPickerView的dataSource数据源和UIPickerViewDelegate代理


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第2张图片


注:在UITableView中,需要设置每个Cell的样式内容在其dataSource,返回UITableViewCell的方法中,但是在UIPickerView中,需要设置每个View的样式内容在其delegate,返回NSString或UIView方法中

UITableView设置Cell样式的dataSource方法:


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第3张图片


UIPickerView设置View样式的delegate方法:




4> 实现数据源和代理

5> 添加UILabel,监听选中哪一行,实现以下代理


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第4张图片


6> 随机处理




补:生成指定范围的随机数




3、国旗选择


3.1 界面




3.2 实现思路


1> 建立国旗模型

2> 设置UIPickerView的dataSource和delegate

3> 实现dataSource和delegate

4> pickViewCell方法测试


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第5张图片


5> 自定义pickerViewCell(继承自UIView),利用XIB,关联类

6> 类方法返回自定义pickerViewCell

7> 自定义pickerView中添加模型,添加setter方法

8> 在ViewController的UIPickerView代理方法中根据模型返回自定义pickerView

9> 设置View高度



3.3 可重用View


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第6张图片


注:在iOS7中,可重用View有bug:第一次会加载所有的View!


4、省市联动


4.1 界面




4.2 实现思路


1> 建立数据模型

注:这里不需要嵌套式模型,字典里面只是一个NSString和数组

2> 设置UIPickerView的dataSource和delegate

3> 实现dataSource和delegate

基本测试:


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第7张图片


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第8张图片


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第9张图片


4> 根据第一组的省份,显示第二组的城市,因此添加一个省份索引,表征当前选中的省份,并设置View的宽度


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第10张图片


5、DatePicker --- 重要


5.1 界面




5.2 UITextField自定义键盘 --- 重要


设置其textField的inputView即可,比如QQ、微信中的表情,将表情放置在一个UIView中,设置inputView。


5.3 实现思路


1> 设置textField的inputView为UIDatePicker




2> 界面中的上一个、下一个为键盘的工具条(UIToolbar),里面的控件为UIBarButtonItem,设置键盘的辅助View(工具条)


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第11张图片


注:一定要设置toolBar的bounds,否则不能改变toolBar的背景颜色,并且不能监听Item的点击事件。

3> 设置datepicker的本地化和模式


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第12张图片


4> UIBarButtonItem监听事件(日期格式处理)


iOS开发 - 第02篇 - UI进阶 - 06 - PickerView & DatePicker_第13张图片


你可能感兴趣的:(UI,ios开发,UIDatePicker,UIPickerView)