UI高级控件

ScrollView

ScrollView的作用

1.用于显示超出应用程序窗口大小的内容

2.允许用户通过拖动手势滚动查看视图中的内容

3.允许用户通过捏合手势缩放视图中的内容

ScrollView的常见属性

•CGSize contentSize：设置UIScrollView的滚动范围

•CGPoint contentOffset：UIScrollView当前滚动的位置

•UIEdgeInsets contentInset：增加滚动视图四周的增加滚动范围

ScrollView的常见属性示意图

ScrollView常见属性演练——简单使用

1.用代码创建UIImageView并添加至ScrollView

2.设置ScrollView的ContentSize实现滚动效果

3.设置ScrollView的嵌入属性

4.点击按钮通过ContentOffset属性用代码移动ScrollView中的内容

5.对比两种移动内容的动画实现方式

6.用代码修正移动的位置

ScrollView的其他属性

属性

作用

BOOL bounces

是否有弹簧效果

BOOL scrollEnabled

是否能滚动

BOOL showsHorizontalScrollIndicator

是否显示水平方向的滚动条

BOOL showsVerticalScrollIndicator

是否显示垂直方向的滚动条

UIScrollViewIndicatorStyle indicatorStyle

设定滚动条的样式

BOOL dragging

是否正在被拖拽

BOOL tracking

按住手指还没有开始拖动的时候值是YES，否则NO

BOOL decelerating

是否正在减速

BOOL zooming

是否正在缩放

ScrollView的手势缩放步骤

1.设置UIScrollView的id<UISCrollViewDelegate>delegate代理对象

2.设置minimumZoomScale：缩小的最小比例

3.设置maximumZoomScale：放大的最大比例

4.让代理对象实现以下方法，返回需要缩放的视图控件

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

与缩放相关的方法还包括：

// 正在缩放时调用的方法

- (void)scrollViewDidZoom:(UIScrollView *)scrollView

// 缩放完成时调用的方法

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView*)view atScale:(float)scale

ScrollView的代理协议示意图

ScrollView实现分页效果

•要实现分页效果，将滚动视图的pagingEnabled属性设置为YES即可。设置该属性后滚动视图会被分割成多个独立的页面，用户原本的滚动体验会变成了页面切换的效果

UIPageControl分页控制控件

•要使用滚动视图的分页效果，通常会配合UIPageControl分页控制控件，以增强分页效果。

•该控件的常用属性如下：

•NSIntegernumberOfPages：总页数

•NSIntegercurrentPage：当前的页码

•BOOLhidesForSinglePage：当只有一页的时候，是否要隐藏视图

•UIColor*currentPageIndicatorTintColor：当前选中页面标示的颜色

•UIColor *pageIndicatorTintColor：其他页面标示的颜色

UIPageControl控件监听页面变化方法

[pageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];// 添加事件监听方法

- (void)pageChanged:(UIPageControl *)pageControl// 页面变化调用方法

•注意：pageChanged事件的触发方式

分页效果演练1——单张图片的分页效果

•Android手机的桌面背景图片有类似的效果

•演练目标：

•使用一张1280*920大小的图像实现两个分页滚动视图效果

分页效果演练2——多张图片的分页效果

•演练要求：

•所有控件均通过代码创建

数据选择控件

UIDatePicker——方便用户选择日期

•作用：方便用户的日期选择，并保证日期格式正确

•1.  初始化

// 初始化日期控件，不用设置宽高，因为它的宽高是固定的

UIDatePicker *datePicker = [[UIDatePicker alloc]init];

•2.  常用设置

// 设置日期控件区域为简体中文

[datePicker setLocale:[[NSLocale alloc]initWithLocaleIdentifier:@"zh_Hans_CN"]];

// 设置日期控件格式

[datePicker setDatePickerMode:UIDatePickerModeDate];

UIDatePicker——监听方法

•3.设置日期选择控件的监听方法

// 设定日期控件监听方法

[datePicker addTarget:self action:@selector(dateValueChange:) forControlEvents:UIControlEventValueChanged];

NSDateFormatter——日期转换成字符串

•NSDateFormatter专门负责日期格式的对象

// 设置日期格式

// 1. 实例化日期格式

NSDateFormatter*formatter = [[NSDateFormatter alloc]init];

// 2. 设置日期格式字符串

[formatter setDateFormat:@"yyyy-MM-dd"];

// 3. 将指定日期转换成字符串

NSString *dateString =[formatter stringFromDate:sender.date];

NSDateFormatter——字符串转换成日期

•NSDateFormatter专门负责日期格式的对象

// 设置初始日期

NSDateFormatter *formatter= [[NSDateFormatter alloc]init];

[formattersetDateFormat:@"yyyy-MM-dd"];

NSDate *date= [formatter dateFromString:@”2000-01-01"];

[datePicker setDate:date];

UITextField扩展——设置键盘和键盘上面的工具栏

// 设置日期文本的输入键盘

[_dateText setInputView:datePicker];

// 设置键盘上面的工具控件

UIView*view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 44)];

[view setBackgroundColor:[UIColor grayColor]];

[_dateText setInputAccessoryView:view];

UIDatePicker演练

照片选择

•使用UIImagePickerController可以选择照片

•照片的来源UIImagePickerControllerSourceType包括：

–照片库

–照相机

–保存的照片

•使用步骤

–1.判断照片来源是否可用

–2.实例化照片选择控制器

–3.设置照片源

–4.设置是否允许编辑

–5.设置代理

–6.遵循协议

–7.显示照片选择控制器

照片选择代理方法

1.通过代理方法的didFinishPickingMediaWithInfo字典可以获取选中的照片图像

2.关闭照片选择控制器

3.保存选中的图像

UIPickerView——数据选择视图

•作用：负责从指定的数据源中选择数据

•要求：使用PickerView之前需要指定数据源

UIPickerView——数据源

•数据源负责计算UIPickerView有多少列、多少行数据

•数据源须遵守UIPickerViewDataSource协议，数据源方法如下：

// 返回总的列数

- (NSInteger)numberOfComponentsInPickerView:

// 返回第component列的行数

- (NSInteger)pickerView:numberOfRowsInComponent:

•刷新数据方法

•

[pickerView reloadComponent:1];

一旦调用了这个方法，就会重新给数据源发送消息计算这列的行数、重新给代理发送消息获得这列的内容

UIPickerView——代理

•代理可以给UIPickerView提供具体的数据、监听UIPickerView的一些事件

•代理必须遵守UIPickerViewDelegate协议，常用代理方法如下：

// 第component列第row行显示什么字符串内容

- (NSString *)pickerView:titleForRow:forComponent:

// 每当选择了新的一行就会调用

- (void)pickerView:didSelectRow:inComponent:

UIPickerView——简单演练

UIPickerView——其他代理方法

•代理方法扩展

// 第component列第row行显示什么样的UIView，最后一个view参数是用来性能优化的

- (UIView *)pickerView:viewForRow:forComponent:reusingView:

// 返回第component列每一行的高度

- (CGFloat)pickerView:rowHeightForComponent:

•

•补充：

•自定义PickerView时，需要指定显示选择指示器属性

pickerView.showsSelectionIndicator = YES;

UIPickerView——自定义视图选择演练

UIPickerView综合实例演练

UITextField——常用代理方法扩展

// 当文本框开始获得焦点的时候调用

- (void)textFieldDidBeginEditing:

// 当用户失去焦点的时候调用

-(void)textFieldDidEndEditing:

// 在文本框准备聚焦的时候调用，返回NO代表不允许聚焦（编辑）

-(BOOL)textFieldShouldBeginEditing:

// 在文本框准备失去焦点（退出键盘）的时候调用，返回YES代表允许退出键盘

- (BOOL)textFieldShouldEndEditing:

// 在用户每次输入的时候都会调用，返回YES代表允许输入     

-(BOOL)textField:

shouldChangeCharactersInRange:replacementString: