您的位置:首页 > 产品设计 > UI/UE

UIScrollView

2015-11-12 17:28 375 查看
1 、 什么是UIScrollView

* 动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限

* 当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容

* 普通的UIView不具备滚动功能,不适合显示过多的内容

*UIScrollView是一个能够滚动的视图控件,可以用来展示大量的内容,并且可以通过滚动查看所有 的内容
* 举例:手机上的“设置”
2、基本使用

*UIScrollView的用法很简单
*将需要展示的内容添加到UIScrollView中
*设置UIScrollView的contentSize属性,告诉UIScrollView所有内容的尺寸,也就是告诉它滚动的范围(能滚多远,滚到哪里是尽头)
***无法滚动的解决方案:
没有设置contentSize

scrollEnabled = NO

没有接收到触摸事件:userInteractionEnabled = NO

*UIScrollView显示内容的小细节
*超出UIScrollView边框的内容会被自动隐藏
*用户可以用过手势拖动来查看超出边框并被隐藏的内容

3、创建属性

@property(nonatomic) CGPoint contentOffset;
// 这个属性用来表示UIScrollView滚动的位置(其实就是内容左上角与scrollView左上角的间距值)
// 设置x  越往右越大
contentOffset.x
// 设置y  越往下越大
contentOffset.y


@property(nonatomic) CGSize contentSize;

// 这个属性用来表示UIScrollView内容的尺寸,滚动范围(能滚多远)
// 设置宽度
contentSize.width
// 设置高度
contentSize.hight


@property(nonatomic) UIEdgeInsets contentInset;
// 这个属性能够在UIScrollView的4周增加额外的滚动区域,一般用来避免scrollView的内容被其他控件挡住
// top

contentInset.top
// left

contentInset.left
// right

contentInset.right
// bottom

contentInset.bottom


4、其他属性

@property(nonatomic) BOOL bounces;
//设置UIScrollView是否需要弹簧效果

@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
//设置UIScrollView是否能滚动

@property(nonatomic) BOOL showsHorizontalScrollIndicator;
//是否显示水平滚动条

@property(nonatomic) BOOL showsVerticalScrollIndicator;
//是否显示垂直滚动条


5、代理

很多时候,我们想在UIScrollView正在滚动 或 滚动到某个位置 或者 停止滚动 时做一些特定的操作

要想完成上述功能,前提条件就是能够监听到UIScrollView的整个滚动过程

当UIScrollView发生一系列的滚动操作时, 会自动通知它的代理(delegate)对象,给它的代理发送相应的消息,让代理得知它的滚动情况

也就是说,要想监听UIScrollView的滚动过程,就必须先给UIScrollView设置一个代理对象,然后通过代理得知UIScrollView的滚动过程

@interface UISCrollView:UIView<NSCoding>
{
@package
id  _delegate
}

@property(nonatomic)   CGPoint                contentOffset;
@property(nonatomic)   CGSize                 contentSize;
@property(nonatomic)   UIEdgeInsets           contentInset;
@property(nonatomic,assign)  id<UIScrollViewDelegate>     delegate;

- 设置scrollView的delegate(代理)为控制器对象

scrollView.delegate = 控制器;

- 给scrollView中的内容设置缩放比例

self.scrollView.maximumZoomScale = 2.0;

self.scrollView.minimumZoomScale = 0.2;

- 这个方法是系统自动调用的,不用穿参数,自动传,,意思当开始滚的时候就调用该方法

-(void)scrollViewDidScroll:(UIScrollView *)scrollView


- 控制器要遵守UIScrollViewDelegate协议

@interface 控制器 () <UIScrollViewDelegate>


@end

- 控制器要实现UIScrollViewDelegate协议里面的代理方法

#pragma mark - <UIScrollViewDelegate>  代理方法


/**


* 只要scrollView在滚动,就会调用这个方法(监听scrollView的滚动)


*/


- (void)scrollViewDidScroll:(UIScrollView *)scrollView


{


NSLog(@"scrollViewDidScroll");


}



通信关系: 当用户进行不同的操作、动作、行为时,发送特定的消息。

6、UIScrollView和控制器

一般情况下,就设置UIScrollView所在的控制器 为 UIScrollView的delegate
*设置控制器为UIScrollView的delegate有2种方法:
*通过代码(控制器应该遵守UIScrollViewDelegate协议,self就是控制器,最后是实现协议的相关方法)

@interface ViewController()<UIScrollViewDelegate>
@end
@implementtion ViewController
self.scrollView.delegate = self;
@end


*通过storyboard拖线(右击UIScrollView)

7、缩放

UIScrollView 缩放原理:

当用户在UIScrollView身上使用捏合手势时,UIScrollView会给代理发送一条消息,询问代理究竟要缩放自己内部的哪一个子控件(哪一块内容)

// 用户使用捏合手势时调用   这个方法返回的控件就是需要缩放的控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;


步骤:

设置UIScrollView的id<UISCrollViewDelegate> delegate代理对象
设置minimumZoomScale :缩小的最小比例
设置maximumZoomScale :放大的最大比例
//让代理对象实现下面的方法,返回需要缩放的视图控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
跟缩放相关的其他代理方法
//缩放完毕的时候调用
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view

//正在缩放的时候调用
- (void)scrollViewDidZoom:(UIScrollView *)scrollView


8、 分页

*只要将UIScrollView的pageEnabled属性设置为YES,UIScrollView会被分割成多个独立页面,里面的内容就能进行分页展示

常见属性:

// 一共有多少页
@property(nonatomic) NSInteger numberOfPages;
// 当前显示的页码
@property(nonatomic) NSInteger currentPage;
// 只有一页时,是否需要隐藏页码指示器
@property(nonatomic) BOOL hidesForSinglePage;
// 其他页码指示器的颜色
@property(nonatomic,retain) UIColor *pageIndicatorTintColor;
// 当前页码指示器的颜色
@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;


9、 定时器 NSTimer

* 使用:

## NSTimer的使用
- 开启定时器
@property (nonatomic, weak) NSTimer *timer;

// 返回一个自动开始执行任务的定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"123" repeats:YES];

// 修改NSTimer在NSRunLoop中的模式:NSRunLoopCommonModes
// 主线程不管在处理什么操作,都会抽时间处理NSTimer
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];

// - 关闭定时器

[self.timer invalidate];


* 作用:

1,在指定的时间执行指定的任务

2,每隔一段时间执行指定的任务

调用下面的方法就会开启一个定时任务:

+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti
target       :      (id)aTarget
selector     :     (SEL)aSelector
userInfo    :     (id)userInfo
repeats     :     (BOOL)yesOrNo;
// 每隔ti秒 调用一次aTarget的aSelector的方法,yes OR no  决定是否重复执行这个任务


* 通过invalidate方法可以停止定时器的工作,一旦定时器被停止了,就不能再次执行任务。只能再创建一个新的定时器才能执行新的任务

- (void)invalidate;


* 解决定时器在主线程不工作的原因

NSTimer *timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(next) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: