Goals are not only absolutely necessary to motivate us. They are essential to really keep us alive.
我们不仅仅需要目标来保持前进的动力。我们需要有目标才能真正活下去。(Robert H. Schuller)
UIScrollView
简介
1.UIScrollView是可以滚动的view,UIView本身不能滚动,子类UIScrollview拓展了滚动方面的功能。
2.UIScrollView是所有滚动视图的基类。以后的UITableView,UITextView等视图都是继承于该类。
3.使用场景:显示不下(单张大图);内容太多(图文混排);滚动头条(图片);相册等
滚动相关属性
contentSize //定义内容区域大小,决定是否能够滑动
contentOffset //视图左上角距离坐标原点的偏移量
scrollsToTop //滑动到顶部(点状态条的时候)
pagingEnabled //是否整屏翻动
bounces //边界是否回弹
scrollEnabled //是否能够滚动
showsHorizontalScrollIndicator //控制是否显示水平方向的滚动条
showVerticalScrollIndicator //控制是否显示垂直方向的滚动条
alwaysBounceVertical //控制垂直方向遇到边框是否反弹
alwaysBounceHorizontal //控制水平方向遇到边框是否反弹
缩放相关属性
minimumZoomScale // 缩小的最小比例
maximumZoomScale //放大的最大比例
zoomScale //设置变化比例
zooming //判断是否正在进行缩放反弹
bouncesZoom //控制缩放的时候是否会反弹
要实现缩放,还需要实现delegate,指定缩放的视图是谁。
UIPageControl
简介
1.UIPageControl与UILabel相似 通常与UIScrollView配合使用
2.currentPage //当前页
3.numberOfPages //指定页面的个数
注意:
UIPageControl父类为UIControl ,所以可以添加事件,只不过事件触发使用的不是UIControlEventsTouchUpInside而是UIControlEventsValueChanged。
两者的结合使用
通常在Scrollview滚动的时候修改pageControl的currentPage
当滑动画面时,我们需要改变下部小圆点的激活位置,所以我们用如下的方法实现
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//首先通过tag值得到pageControl
UIPageControl *pageControl = (UIPageControl *)[self.view viewWithTag:1011];
//page的计算方法为scrollView的偏移量除以屏幕的宽度即为第几页。
int page = scrollView.contentOffset.x/CGRectGetWidth(self.view.frame);
pageControl.currentPage = page;
}
同时,我们需要实现,改变下方小圆点来实现页面的切换
- (void)pageAction: (UIPageControl *)sender{
//根据当前的页数。是的scrollView也滑动到对应的子视图。通过设置scrollView的contentOffSet来实现(改变contentOffSet实际上就是改变scrollView的bounds)
//得到当前的页数
int page = (int)sender.currentPage;
//根据当前页数来计算偏移量
//step1:得到scrollView
UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:1000];
//step2:设置scrollView的偏移量---当前的页数乘以屏幕宽度
[scrollView setContentOffset:CGPointMake(page*CGRectGetWidth(self.view.frame), 0) animated:YES];
}
滚动视图与缩放有关的代理方法
//指定scrollView的某一个子视图为可缩放视图,前提是此视图已经添加到scrollView上面
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
UIImageView *imageView = (UIImageView *)[scrollView viewWithTag:1200];
return imageView;
}
//开始缩放的代理方法----第二个参数View是指我们将要缩放的视图。
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view{
NSLog(@"%@",view);
}
//正在缩放的代理方法,只要正在缩放,就会执行该方法,所以会多次调用。
- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
//在缩放过程中,为了使得该子视图一直在屏幕中间,所以我们需要在他缩放过程中一直调整他的center
UIImageView *imageView = (UIImageView *)[scrollView viewWithTag:1200];
NSLog(@"frame---%@",NSStringFromCGRect(imageView.frame));
imageView.center = scrollView.center;
NSLog(@"contentSize***%@",NSStringFromCGSize(scrollView.contentSize));
}
//缩放结束的代理方法
/**
*
* @param scrollView 当前的滚动视图
* @param view 当前正在缩放的视图
* @param scale 当前正在缩放视图的缩放比例
*/
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale{
//缩放完成之后恢复原大小,这里使用的是2D仿射变换函数中与捏合有关的函数
// view.transform = CGAffineTransformMakeScale(1, 1);
}
实例训练(部分代码)
制作一个iPhone相册,可以实现缩放,翻页等基本功能
此处以三张图片为例
先创建一个大的滚动视图,宽为三个屏幕的宽度
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.frame)*3, CGRectGetHeight(self.view.frame)) ;
scrollView.backgroundColor = [UIColor grayColor];
scrollView.tag = 1000;
scrollView.pagingEnabled = YES;
scrollView.delegate = self;
NSLog(@"%f",CGRectGetWidth(self.view.frame));
再创建三个scrollView以及三个imageView,效率至上,用for循环
for (int i = 0; i <3; i++) {
UIScrollView *scrollView1 = [[UIScrollView alloc]initWithFrame:CGRectMake(i*(CGRectGetWidth(self.view.frame)), 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];
scrollView1.minimumZoomScale = 0.5;
scrollView1.maximumZoomScale = 1.5;
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];
imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpeg",i]]];
imageView.tag = 1300+i;
imageView.center = self.view.center;
scrollView1.tag = 1100+i;
scrollView1.delegate = self;
[scrollView1 addSubview:imageView];
[scrollView addSubview:scrollView1];
为了实现缩放功能,首先需要导入想要缩放的视图
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
UIImageView *imageView;
for (int i = 0; i <3; i++) {
if ([scrollView viewWithTag:1300+i]) {
UIScrollView *scroll = (UIScrollView *)[scrollView viewWithTag:1100+i];
imageView = (UIImageView *)[scroll viewWithTag:1300+i];
}
}
return imageView;
}
每次缩放,让图片回到屏幕的中心
-(void)scrollViewDidZoom:(UIScrollView *)scrollView{
UIImageView *imageView;
for (int i = 0; i <3; i++) {
if ([scrollView viewWithTag:1300+i]) {
UIScrollView *scroll = (UIScrollView *)[scrollView viewWithTag:1100+i];
imageView = (UIImageView *)[scroll viewWithTag:1300+i];
imageView.center = self.view.center;
}
}
}
缩放过后,我们回看照片需要它恢复到初始的大小
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
UIPageControl *pageControl = (UIPageControl *)[self.view viewWithTag:1200];
int page = scrollView.contentOffset.x/CGRectGetWidth(self.view.frame);
pageControl.currentPage = page;
UIImageView *imageView;
for (int i = 0; i <3; i++) {
if ([scrollView viewWithTag:1300+i]) {
UIScrollView *scroll = (UIScrollView *)[scrollView viewWithTag:1100+i];
imageView = (UIImageView *)[scroll viewWithTag:1300+i];
//这里需要使用2D仿射变换函数里面的缩放函数来使图像恢复原来大小
imageView.transform = CGAffineTransformMakeScale(1, 1);
}
}
}
pageControl由于比较简单,这里就不再赘述了,篇幅太不好控制了。。。
好啦,今天就到这里了,下次再见喽
-By Jason