UI部分 — 6
2018-01-21 15:59
102 查看
- UIScrollView的基本使用
(1)裁剪超出边框内容
//默认scrollView设置该属性为YES
self.scrollView.clipsToBounds =
YES;
(2)设置内容尺寸(滚动范围)
//可滚动尺寸:contentSize的尺寸减去scrollView的尺寸
//注意:contentSize的尺寸小于或者等于scrollView的尺寸是不可以滚动的
self.scrollView.contentSize =
CGSizeMake(325,
225);
(3)是否能够滚动
self.scrollView.scrollEnabled =
NO;
(4)是否能够跟用户交互(响应用户的点击等操作)
//注意:如果设置为NO,那么scrollView以及内部所有的子控件都不能跟用户交互
self.scrollView.userInteractionEnabled =
NO;
(5)是否有弹簧效果
self.scrollView.bounces =
YES;
//不管有没有设置contentSize,是否有弹簧效果(一般用于下拉刷新)
self.scrollView.alwaysBounceHorizontal =
NO;
self.scrollView.alwaysBounceVertical =
NO;
(6)是否显示滚动条
self.scrollView.showsHorizontalScrollIndicator =
YES;
self.scrollView.showsVerticalScrollIndicator =
YES;
(7)注意:千万不要通过索引去subviews数组访问scrollView子控件
通过代码创建scrollView,一开始subviews这个数组为nil
(8)内容的偏移量
//控制内容的位置
self.scrollView.contentOffset =
CGPointMake(0, -100);
[self.scrollView
setContentOffset:CGPointMake(0,
self.scrollView.contentOffset.y)
animated:YES];
//获取内容的位置
CGPoint point = self.scrollView.contentOffset;
(9)内边距
self.scrollView.contentInset =
UIEdgeInsetsMake(100,
0, 0,
0);
(10)补充:点击控制器的view时会自动调用这个方法
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent
*)event{ }
- UIScrollView的代理
(1)要成为UIScrollView的代理,必须遵守<UIScrollViewDelegate>协议
通过监听UIScrollView,会调用代理中的方法
代理协议中的方法称为代理方法
(2)当scrollView正在滚动的时候就会自动调用这个方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { }
(3)用户即将开始拖拽scrollView时就会调用这个方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { }
(4)用户即将停止拖拽scrollView时就会调用这个方法
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity
targetContentOffset:(inout
CGPoint *)targetContentOffset { }
(5)用户已经停止拖拽scrollView时就会调用这个方法
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
if (decelerate ==
NO) {
NSLog(@"用户已经停止拖拽scrollView,停止滚动");
}
else {
NSLog(@"用户已经停止拖拽scrollView,但是scrollView由于惯性会继续滚动,减速");
}
}
(6)scrollView减速完毕会调用,停止滚动
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
NSLog(@"scrollView减速完毕会调用,停止滚动");
}
(7)注意:任何oc对象都可以作为scrollView的代理
苹果设计的代理属性是weak,防止循环引用
- 常见控件的事件监听
(1)UIButton
UIButton *btn = [UIButton
buttonWithType:UIButtonTypeCustom];
//监听btn,执行self中的UIControlEventTouchUpInside方法
//注意:只有继承UIContrl的控件才能使用addTarget方法
[btn addTarget:self
action:@selector(btnClick:)
forControlEvents:UIControlEventTouchUpInside];
- (void)btnClick:(UIButton *)btn { }
(2)UIScrollView
UIScrollView *scrollView =
nil;
scrollView.delegate =
self;
(3)SegmentedControl
[seg addTarget:self
action:@selector(segClick:)
forControlEvents:UIControlEventValueChanged];
- (void)segClick:(UISegmentedControl *)seg { }
(4)textFlied
//第一种方式:通过代理
self.textFlied.delegate =
self;
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
NSLog(@"开始编辑");
}
- (void)textFieldDidEndEditing:(UITextField *)textField
{
NSLog(@"结束编辑");
}
/*
当textField文字改变就会调用这个方法
string
用户输入的文字
return YES:
允许用户输入显示在textField;
return NO:
禁止用户输入显示在textField */
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range
replacementString:(NSString *)string
{
NSLog(@"shouldChangeCharactersInRange--%@",string);
if ([string
isEqualToString:@"1"]) {
return
NO;
}
return
YES;
}
//第二种方式:通过addTarget方法
[self.textFlied
addTarget:self
action:@selector(tfEditingDidBegin)
forControlEvents:UIControlEventEditingDidBegin];
[self.textFlied
addTarget:self
action:@selector(tfEditingDidEnd)
forControlEvents:UIControlEventEditingDidEnd];
[self.textFlied
addTarget:self
action:@selector(tfEditingChanged:)
forControlEvents:UIControlEventEditingChanged];
- (void)tfEditingDidBegin
{
NSLog(@"开始编辑”);
//出现光标
}
- (void)tfEditingDidEnd
{
NSLog(@"结束编辑");
//退出键盘
}
- (void)tfEditingChanged:(UITextField *)tf
{
NSLog(@“文字改变”);
}
//点击view退出键盘
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent
*)event
{
//第一种方式
[self.textFlied
endEditing:YES];
//第二种方式(辞去第一响应者)
[self.textFlied
resignFirstResponder];
//第三种方式
[self.view
endEditing:YES];
}
- UIScrollView实现内容缩放
(1)//设置缩放比例
self.scrollView.maximumZoomScale =
2.0;
self.scrollView.minimumZoomScale =
0.5;
//通过代理缩放子控件
//返回需要缩放的子控件(scrollView的子控件)
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return
self.imageView;
}
//监听缩放事件
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
NSLog(@"scrollViewDidZoom");
}
- UIScrollView实现分页和NSTimer的使用
#import "ViewController.h"
@interface
ViewController () <UIScrollViewDelegate>
@property (weak,
nonatomic) IBOutlet
UIScrollView *scrollView;
@property (weak,
nonatomic) IBOutlet
UIPageControl *pageControl;
//定时器
@property (nonatomic,
weak) NSTimer *timer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super
viewDidLoad];
//添加图片
CGFloat scrollViewW =
self.scrollView.frame.size.width;
CGFloat scrollViewH =
self.scrollView.frame.size.height;
int count =
5;
for (int i =
0; i < count; i ++) {
UIImageView *imageView = [[UIImageView
alloc] init];
NSString *name = [NSString
stringWithFormat:@"img_0%d",i +
1];
imageView.image = [UIImage
imageNamed:name];
imageView.frame =
CGRectMake(i * scrollViewW,
0, scrollViewW, scrollViewH);
[self.scrollView
addSubview:imageView];
}
//设置contentSize
//这个0表示竖直方向不可以滚动
self.scrollView.contentSize =
CGSizeMake(count * scrollViewW,
0);
//开启分页功能
//标准:以scrollView的尺寸为一页
self.scrollView.pagingEnabled =
YES;
//设置总页数
self.pageControl.numberOfPages = count;
//单页的时候是否隐藏pageControl
self.pageControl.hidesForSinglePage =
YES;
//设置pageControl的图片
[self.pageControl
setValue:[UIImage
imageNamed:@"current"]
forKeyPath:@"_currentPageImage"];
[self.pageControl
setValue:[UIImage
imageNamed:@"other"]
forKeyPath: @"_pageImage"];
//开启定时器
[self
startTimer];
}
//UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//四舍五入: int(小数 + 0.5)
//0.2 ---> 0 int(0.2 + 0.5)= 0.7 -> 0
//0.3 ---> 0 int(0.3 + 0.5)= 0.8 -> 0
//0.9 ----> 1 int(0.9 + 0.5)= 1.4 -> 1
//1.5 ----> 2 int(1.5 + 0.5)= 2 -> 2
//计算页码
int page = (int)(scrollView.contentOffset.x
/ scrollView.frame.size.width +
0.5);
//设置页码
self.pageControl.currentPage = page;
}
//线程
//主线程:程序一启动,系统会默认创建一条线程.
//主线程作用:显示刷新UI界面,处理与用用户的交互事件
//多线程的原理: 1s ---> 1万个0.0001s
//定时器相关代码
- (void)startTimer
{
//返回一个自动执行的定时器对象
self.timer = [NSTimer
scheduledTimerWithTimeInterval:2.0
target:self
selector:@selector(nextPage:)
userInfo:@"123"
repeats:YES];
//NSDefaultRunLoopMode(默认):
同一时间只能执行一个任务
//NSRunLoopCommonModes(公用):
可以分配一定的时间执行其他任务
//作用:修改timer在runLoop中的模式为NSRunLoopCommonModes
//目的:不管主线程在做什么操作,都会分配一定的时间处理定时器
[[NSRunLoop
mainRunLoop]
addTimer:self.timer
forMode:NSRunLoopCommonModes];
}
- (void)stopTimer
{
[self.timer
invalidate];
}
//滚动到下一页
- (void)nextPage:(NSTimer *)timer
{
//计算下一页的页码
NSInteger page =
self.pageControl.currentPage +
1;
//超过了最后一页
if ( page == 5) {
page =
0;
}
//滚动到下一页
[self.scrollView
setContentOffset:CGPointMake(page *
self.scrollView.frame.size.width,
0) animated:YES];
}
//用户即将开始拖拽scrollView时,停止定时器
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self
stopTimer];
}
//用户已经停止拖拽scrollView时,开启定时器
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self
startTimer];
}
@end
(1)裁剪超出边框内容
//默认scrollView设置该属性为YES
self.scrollView.clipsToBounds =
YES;
(2)设置内容尺寸(滚动范围)
//可滚动尺寸:contentSize的尺寸减去scrollView的尺寸
//注意:contentSize的尺寸小于或者等于scrollView的尺寸是不可以滚动的
self.scrollView.contentSize =
CGSizeMake(325,
225);
(3)是否能够滚动
self.scrollView.scrollEnabled =
NO;
(4)是否能够跟用户交互(响应用户的点击等操作)
//注意:如果设置为NO,那么scrollView以及内部所有的子控件都不能跟用户交互
self.scrollView.userInteractionEnabled =
NO;
(5)是否有弹簧效果
self.scrollView.bounces =
YES;
//不管有没有设置contentSize,是否有弹簧效果(一般用于下拉刷新)
self.scrollView.alwaysBounceHorizontal =
NO;
self.scrollView.alwaysBounceVertical =
NO;
(6)是否显示滚动条
self.scrollView.showsHorizontalScrollIndicator =
YES;
self.scrollView.showsVerticalScrollIndicator =
YES;
(7)注意:千万不要通过索引去subviews数组访问scrollView子控件
通过代码创建scrollView,一开始subviews这个数组为nil
(8)内容的偏移量
//控制内容的位置
self.scrollView.contentOffset =
CGPointMake(0, -100);
[self.scrollView
setContentOffset:CGPointMake(0,
self.scrollView.contentOffset.y)
animated:YES];
//获取内容的位置
CGPoint point = self.scrollView.contentOffset;
(9)内边距
self.scrollView.contentInset =
UIEdgeInsetsMake(100,
0, 0,
0);
(10)补充:点击控制器的view时会自动调用这个方法
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent
*)event{ }
- UIScrollView的代理
(1)要成为UIScrollView的代理,必须遵守<UIScrollViewDelegate>协议
通过监听UIScrollView,会调用代理中的方法
代理协议中的方法称为代理方法
(2)当scrollView正在滚动的时候就会自动调用这个方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { }
(3)用户即将开始拖拽scrollView时就会调用这个方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { }
(4)用户即将停止拖拽scrollView时就会调用这个方法
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity
targetContentOffset:(inout
CGPoint *)targetContentOffset { }
(5)用户已经停止拖拽scrollView时就会调用这个方法
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
if (decelerate ==
NO) {
NSLog(@"用户已经停止拖拽scrollView,停止滚动");
}
else {
NSLog(@"用户已经停止拖拽scrollView,但是scrollView由于惯性会继续滚动,减速");
}
}
(6)scrollView减速完毕会调用,停止滚动
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
NSLog(@"scrollView减速完毕会调用,停止滚动");
}
(7)注意:任何oc对象都可以作为scrollView的代理
苹果设计的代理属性是weak,防止循环引用
- 常见控件的事件监听
(1)UIButton
UIButton *btn = [UIButton
buttonWithType:UIButtonTypeCustom];
//监听btn,执行self中的UIControlEventTouchUpInside方法
//注意:只有继承UIContrl的控件才能使用addTarget方法
[btn addTarget:self
action:@selector(btnClick:)
forControlEvents:UIControlEventTouchUpInside];
- (void)btnClick:(UIButton *)btn { }
(2)UIScrollView
UIScrollView *scrollView =
nil;
scrollView.delegate =
self;
(3)SegmentedControl
[seg addTarget:self
action:@selector(segClick:)
forControlEvents:UIControlEventValueChanged];
- (void)segClick:(UISegmentedControl *)seg { }
(4)textFlied
//第一种方式:通过代理
self.textFlied.delegate =
self;
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
NSLog(@"开始编辑");
}
- (void)textFieldDidEndEditing:(UITextField *)textField
{
NSLog(@"结束编辑");
}
/*
当textField文字改变就会调用这个方法
string
用户输入的文字
return YES:
允许用户输入显示在textField;
return NO:
禁止用户输入显示在textField */
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range
replacementString:(NSString *)string
{
NSLog(@"shouldChangeCharactersInRange--%@",string);
if ([string
isEqualToString:@"1"]) {
return
NO;
}
return
YES;
}
//第二种方式:通过addTarget方法
[self.textFlied
addTarget:self
action:@selector(tfEditingDidBegin)
forControlEvents:UIControlEventEditingDidBegin];
[self.textFlied
addTarget:self
action:@selector(tfEditingDidEnd)
forControlEvents:UIControlEventEditingDidEnd];
[self.textFlied
addTarget:self
action:@selector(tfEditingChanged:)
forControlEvents:UIControlEventEditingChanged];
- (void)tfEditingDidBegin
{
NSLog(@"开始编辑”);
//出现光标
}
- (void)tfEditingDidEnd
{
NSLog(@"结束编辑");
//退出键盘
}
- (void)tfEditingChanged:(UITextField *)tf
{
NSLog(@“文字改变”);
}
//点击view退出键盘
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent
*)event
{
//第一种方式
[self.textFlied
endEditing:YES];
//第二种方式(辞去第一响应者)
[self.textFlied
resignFirstResponder];
//第三种方式
[self.view
endEditing:YES];
}
- UIScrollView实现内容缩放
(1)//设置缩放比例
self.scrollView.maximumZoomScale =
2.0;
self.scrollView.minimumZoomScale =
0.5;
//通过代理缩放子控件
//返回需要缩放的子控件(scrollView的子控件)
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return
self.imageView;
}
//监听缩放事件
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
NSLog(@"scrollViewDidZoom");
}
- UIScrollView实现分页和NSTimer的使用
#import "ViewController.h"
@interface
ViewController () <UIScrollViewDelegate>
@property (weak,
nonatomic) IBOutlet
UIScrollView *scrollView;
@property (weak,
nonatomic) IBOutlet
UIPageControl *pageControl;
//定时器
@property (nonatomic,
weak) NSTimer *timer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super
viewDidLoad];
//添加图片
CGFloat scrollViewW =
self.scrollView.frame.size.width;
CGFloat scrollViewH =
self.scrollView.frame.size.height;
int count =
5;
for (int i =
0; i < count; i ++) {
UIImageView *imageView = [[UIImageView
alloc] init];
NSString *name = [NSString
stringWithFormat:@"img_0%d",i +
1];
imageView.image = [UIImage
imageNamed:name];
imageView.frame =
CGRectMake(i * scrollViewW,
0, scrollViewW, scrollViewH);
[self.scrollView
addSubview:imageView];
}
//设置contentSize
//这个0表示竖直方向不可以滚动
self.scrollView.contentSize =
CGSizeMake(count * scrollViewW,
0);
//开启分页功能
//标准:以scrollView的尺寸为一页
self.scrollView.pagingEnabled =
YES;
//设置总页数
self.pageControl.numberOfPages = count;
//单页的时候是否隐藏pageControl
self.pageControl.hidesForSinglePage =
YES;
//设置pageControl的图片
[self.pageControl
setValue:[UIImage
imageNamed:@"current"]
forKeyPath:@"_currentPageImage"];
[self.pageControl
setValue:[UIImage
imageNamed:@"other"]
forKeyPath: @"_pageImage"];
//开启定时器
[self
startTimer];
}
//UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//四舍五入: int(小数 + 0.5)
//0.2 ---> 0 int(0.2 + 0.5)= 0.7 -> 0
//0.3 ---> 0 int(0.3 + 0.5)= 0.8 -> 0
//0.9 ----> 1 int(0.9 + 0.5)= 1.4 -> 1
//1.5 ----> 2 int(1.5 + 0.5)= 2 -> 2
//计算页码
int page = (int)(scrollView.contentOffset.x
/ scrollView.frame.size.width +
0.5);
//设置页码
self.pageControl.currentPage = page;
}
//线程
//主线程:程序一启动,系统会默认创建一条线程.
//主线程作用:显示刷新UI界面,处理与用用户的交互事件
//多线程的原理: 1s ---> 1万个0.0001s
//定时器相关代码
- (void)startTimer
{
//返回一个自动执行的定时器对象
self.timer = [NSTimer
scheduledTimerWithTimeInterval:2.0
target:self
selector:@selector(nextPage:)
userInfo:@"123"
repeats:YES];
//NSDefaultRunLoopMode(默认):
同一时间只能执行一个任务
//NSRunLoopCommonModes(公用):
可以分配一定的时间执行其他任务
//作用:修改timer在runLoop中的模式为NSRunLoopCommonModes
//目的:不管主线程在做什么操作,都会分配一定的时间处理定时器
[[NSRunLoop
mainRunLoop]
addTimer:self.timer
forMode:NSRunLoopCommonModes];
}
- (void)stopTimer
{
[self.timer
invalidate];
}
//滚动到下一页
- (void)nextPage:(NSTimer *)timer
{
//计算下一页的页码
NSInteger page =
self.pageControl.currentPage +
1;
//超过了最后一页
if ( page == 5) {
page =
0;
}
//滚动到下一页
[self.scrollView
setContentOffset:CGPointMake(page *
self.scrollView.frame.size.width,
0) animated:YES];
}
//用户即将开始拖拽scrollView时,停止定时器
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self
stopTimer];
}
//用户已经停止拖拽scrollView时,开启定时器
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self
startTimer];
}
@end
相关文章推荐
- Android UI开发第四十二篇——实现实现易信的圆形图像和对话列表的图像显示部分
- Eclipse Forms: 为胖客户端做的漂亮UI(翻译,第三部分)
- 第三部分:Android 应用程序接口指南---第二节:UI---第一章 用户界面和布局
- 第三部分:Android 应用程序接口指南---第二节:UI---第九章 搜索
- UI部分关于Atlas图集制作
- 第三部分:Android 应用程序接口指南---第二节:UI---第十二章 自定义组件
- iOS部分-UI基础控件 - 01天 入门 第06课 gif的简单实用
- UI部分 — 2
- 第二部分:开发简要指南-第六章 使用Fragments构建动态UI
- beagleboneblack WIFI部分的UI配置
- UI部分 — 14
- ios-UI高级 多线程部分内容总结
- ANDROID-友盟反馈自定义UI【部分原创】
- 仿网易云音乐部分UI实现
- iOS部分-UI基础控件 - 01天 入门 第07课 私有扩展&IBAction
- 电梯UI部分
- 四则运算安卓客户端UI截图(部分)
- iOS开发视频教程 UI部分:9、应用程序的生命周期
- UI部分 — 11
- 掌握 Dojo 工具包,第 5 部分: Dojo 的 UI 组件库 - Dijit