简介:
我们今天我们讲的是一个滚动屏幕的控件：UIScrollView
我们都知道我们的移动设备的屏幕大小是有限的，因此直接展示在用户眼前的内容也相当有限的
当我们的展示的内容较多，超出一个屏幕时，用户可以通过滚动收拾来查看屏幕以外的的内容
普通的UIView是不具备滚动的功能的，不能显示过多的内容
01程序介绍:
- 大图展示
- 喜马拉雅
- 图片缩放
- 图片轮播器
2. 展示效果:
**大图展示: **
**喜马拉雅: **
**图片缩放: **
**图片轮播: **
这个最上面的那个图片会每隔一段时间, 自动换成下一个图片, 这个就类似于我们手机中的APP某宝中最上面播放广告的程序一样
1. storyboard的设置
-
ScrollView在这个位置, 只用将其拖入storyboard里面就行了
Snip20160313_2.png
我们就直接利用这四个程序来介绍我们今天的关于
ScrollView的新知识
1. 知识点介绍
-
ScrollView的使用方法:
将需要展示的内容添加到UIScrollView中
设置UIScrollView的contentSize属性，告诉UIScrollView所有内容的尺寸，也就是告诉它滚动的范围（能滚多远，滚到哪里是尽头）
- 在我们的这个ScrollView中, 其实有很多的知识点:
首先我们将要介绍的就是代理: UIScrollViewDelegate
其实当用户在与手机屏幕交互的时候, 就是图片随着用户的手而改变的时候, 这个ScrollView的代理, 就会告诉他我们的图片已经到了那个位置,
其中这里面也牵扯到了:
- 关于我们的
ScrollView的坐标问题:
@property(nonatomic)CGPointcontentOffset;
这个属性用来表示UIScrollView滚动的位置
@property(nonatomic)CGSizecontentSize;
这个属性用来表示UIScrollView内容的尺寸，滚动范围（能滚多远）
@property(nonatomic)UIEdgeInsetscontentInset;
这个属性能够在UIScrollView的4周增加额外的滚动区域
大图展示很简单
- 就是 直接将 我们的图片放到我们的
storyboard里面
- 代码编写:
#import "MJViewController.h"
@interface MJViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIImageView *minionView;
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end
@implementation MJViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// NSTimer
self.scrollView.contentSize = self.minionView.frame.size;
self.scrollView.delegate = self;
}
@end
如果我们的图片无法滚动可能存在以下一个问题:
2. 喜马拉雅:
关于喜马拉雅的程序其实是比较简单的
storyboard设置:
**代码: **
#import "MJViewController.h"
@interface MJViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end
@implementation MJViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.scrollView.contentSize = CGSizeMake(0, 560);
self.scrollView.contentInset = UIEdgeInsetsMake(64, 0, 44, 0);
self.scrollView.contentOffset = CGPointMake(0, -64);
}
@end
然后, 就没有然后了, 其实就是这么简单.
3. 图片缩放
**代码: **
#import "MJViewController.h"
@interface MJViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIImageView *minionView;
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end
@implementation MJViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.scrollView.contentSize = self.minionView.frame.size;
self.scrollView.maximumZoomScale = 2.0;
self.scrollView.minimumZoomScale = 0.2;
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.minionView;
}
@end
这里我们详细介绍一下代理
很多时候，我们想在UIScrollView正在滚动的 或者 滚动到某个位置 或者 停止滚动 时做一写特定的操作
但是想要完成上述的功能，前提条件就是能够监听到UIScrollView的整个滚动的过程
当我们的UIScrollView发生一系列的滚动操作时，会自动通知它的代理（delegate）对象，给它的代理发送相应的消息，让代理得知它的情况
我们的这个代理是我们这个UIScrollView自己含有的一个属性，而这个属性主要工作就是监听我们的UIScrollView的滚动情况
注意的是在我们以前就说过我们的代理是需要我们的协议的，这个协议里面放的方法就是这些：
如果有人不大清楚代理模式（详见我的文集OC学习笔记）里面有关于我们的代理模式的笔记
一般我们都是用我们的控制器做我们的UIScrollView代理
协议的命名规范：一般是以我们的这个代理者的名称开头
三个步骤：
1、遵守协议：
@interface MJViewController () <UIScrollViewDelegate>
2、设置控制器ScrollView的delegate：
3、实现代理的协议里面的方法。
作用：1、监听（监听我们任何时间的任何事件监听）让一个对象A监听另一个对象B的行为
2、通知思想（一个对象做了某件事情通知另一个对象)
所以以上就是关于代理的知识点, 和他的使用方法
重点: 图片轮播器
注意：我们的这个图片轮播器将我们的图片一张一张的显示出来
我们如果是直接将我们的UIView拖进去的话，我们不好控制，而且以后我们的图片增加的时候，我们不容易改变
所以我们分几步：
1、将一个UIScrollView放到我们的storyboard里面
2、我们利用我们的代码将我们的图片添加到这个里面
2.1、注意下面的代码中有一个控件：这个是我们分页的时候，当用户翻到多少页的时候的一个索引(Page Control)
2.2、我们的分页功能是怎么做出来的？
就是我们的代码中没有告诉我们的控制器在何时、何处分页，他是怎么做到分页的？
我们的分页这个操作，我们的控制器是按照我们的UIScrollView的尺寸选择何处分页的，所以一般我们在给我们的UIScrollView设置尺寸的时候一定要按照我们的图片的尺寸来
即: 我们的scrollView每一次分页都是按照自己的尺寸来的, 所以我们将scrollView的尺寸设置的和我们所要播放的图片的尺寸大小一致, 就可以完成我们想要的效果
3、让我们的小按钮（索引）监听我们的图片的滚动
其他的麻烦大家看我自己原来的笔记吧, 抱歉, 我真的是混乱的不行了, 对不起了各位:
抱歉了, 各位. 我现在真的有点混乱了, 我会将代码全部写出来的, 大家, 看着代码理解吧. 真的很抱歉
图片轮播器的storyboard:
代码:
#import "MJViewController.h"
const int MJImageCount = 5;
@interface MJViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (strong, nonatomic) NSTimer *timer;
@end
@implementation MJViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 1.添加图片
CGFloat imageW = 300;
CGFloat imageH = 130;
CGFloat imageY = 0;
for (int index = 1; index <= MJImageCount; index++) {
CGFloat imageX = (index - 1) * imageW;
UIImageView *imageView = [[UIImageView alloc] init];
imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"img_%02d", index]];
[self.scrollView addSubview:imageView];
}
// 2.设置内容尺寸
self.scrollView.contentSize = CGSizeMake(imageW * MJImageCount, 0);
self.scrollView.pagingEnabled = YES;
// 3.分页
self.pageControl.numberOfPages = MJImageCount;
// 4.定时器
self.timer = [NSTimer timerWithTimeInterval:1.5 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)nextImage
{
// 1.下一页
if (self.pageControl.currentPage == MJImageCount - 1) {
self.pageControl.currentPage = 0;
} else {
self.pageControl.currentPage++;
}
// 2.设置滚动
CGPoint offset = CGPointMake(self.scrollView.frame.size.width * self.pageControl.currentPage, 0);
[self.scrollView setContentOffset:offset animated:YES];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
self.timer = [NSTimer timerWithTimeInterval:1.5 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self.timer invalidate];
self.timer = nil;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (self.timer) return;
self.pageControl.currentPage = (scrollView.contentOffset.x + scrollView.frame.size.width * 0.5) / scrollView.frame.size.width;
}
@end
作者说:
抱歉了各位, 真的很抱歉, 如果你点开了这篇文章, 如果你感觉浪费了你的流量, 真的很抱歉, 在写这篇文章的时候, 脑子确实有点乱, 真的很抱歉...
下一次,讲的是我这学期刚学的TableView, 那个文章会有条理一点. 这次真的很抱歉
