当初就像在网上找用scrollView写的轮播图可是 到处都是collectionView的 没有scrollView的 今天就写了个scrollView的手动轮播图和大家分享
要写这样一个轮播图
首先要有scrollView(创建scrollView)然后为了 达到更好的效果 还需要对scrollView做一系列的属性设置
然后还要有一堆图片(用一个数组来存放这些图片)
最后再将图片放到scrollView上 实现轮播(其实看似简单 但是其中有一些小细节 需要特别的注意 假设有5张图片 当一次按顺序滑到第5张时 再滑动就应该出现第1张 如果只是单纯地改变scrollView的偏移量 这样滑到第1张得效果很不好 很突兀 不是理想效果 我们就要想办法解决这个问题)
我设计的这款轮播图 还带有图片缩放功能
下面我们通过代码来实现我们想要的效果
// ViewController.m
#import "ViewController.h"
#define WIDTH self.view.frame.size.width
#define HEIGHT self.view.frame.size.height
@interface ViewController ()
@property (nonatomic, strong) UIScrollView *photoScrollView;
@property (nonatomic, strong) UIScrollView *smallScrollView;
@property (nonatomic, strong) UIPageControl *page;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.photoScrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
self.photoScrollView.contentSize = CGSizeMake(WIDTH * 9, 0);
self.photoScrollView.delegate = self;
self.photoScrollView.pagingEnabled = YES;
self.photoScrollView.bounces = NO;
[self.view addSubview:self.photoScrollView];
NSArray *photoArr = @[@"u=3808451166,1723806820&fm=23&gp=0", @"u=1019182931,1402276621&fm=23&gp=0",@"u=1712427375,1304261470&fm=23&gp=0", @"u=2019074505,523552158&fm=23&gp=0", @"u=2216889308,3751754546&fm=23&gp=0", @"u=2301975825,1085041863&fm=23&gp=0", @"u=2427941702,1013456056&fm=23&gp=0", @"u=3808451166,1723806820&fm=23&gp=0", @"u=1019182931,1402276621&fm=23&gp=0"];
for (NSInteger i = 0; i < photoArr.count; i++) {
self.smallScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(i * WIDTH, 0, WIDTH, HEIGHT)];
self.smallScrollView.delegate = self;
self.smallScrollView.minimumZoomScale = 0.5;
self.smallScrollView.maximumZoomScale = 2;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
UIImage *image = [UIImage imageNamed:photoArr[i]];
[imageView setImage:image];
[self.smallScrollView addSubview:imageView];
[self.photoScrollView addSubview:self.smallScrollView];
}
self.photoScrollView.contentOffset = CGPointMake(WIDTH, 0);
self.page = [[UIPageControl alloc] initWithFrame:CGRectMake(50, HEIGHT - 20, 100, 20)];
self.page.numberOfPages = 7;
self.page.currentPage = 0;
[self.page addTarget:self action:@selector(pageChange:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:self.page];
}
// 点击小点 图片跟着滑动
- (void)pageChange:(UIPageControl *)page {
[self.photoScrollView setContentOffset:CGPointMake((page.currentPage + 1) * WIDTH, 0) animated:YES];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return [scrollView.subviews firstObject];
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
for (UIScrollView *scroll in scrollView.subviews) {
if ([scroll isKindOfClass:[UIScrollView class]]) {
scroll.zoomScale = 1;
}
}
self.page.currentPage = self.photoScrollView.contentOffset.x / WIDTH - 1;
if (self.photoScrollView.contentOffset.x == 8 * WIDTH) {
self.photoScrollView.contentOffset = CGPointMake(WIDTH, 0);
self.page.currentPage = 0;
}
if (self.photoScrollView.contentOffset.x == 0) {
self.photoScrollView.contentOffset =CGPointMake(7 * WIDTH, 0);
self.page.currentPage = 6;
}
NSLog(@"%f", self.photoScrollView.contentOffset.x);
}
让我们来分析一下 我们变成的整体过程:
签订UIScrollView协议 设置三个属性 一个大的scrollView 一个小的scrollView 和一个pageControl
在viewDidLoad中书写代码 创建一个大的scrollView(photoScrollView) 并对他进行一些列的设置 将它放在self.view上
创建数组 数组中存放图片名 (其中要注意 这里一共是要轮播7张图片 但是我们为了实现的效果 在数组中方9张图片 顺序是: 7 1 2 3 4 5 6 7 1 同时photoScrollView的滑动范围 设置为CGSizeMake(WIDTH * 9, 0))
for 循环 一共是9张图片 要在循环里 创建UIImageView 然后创建smallScrollView 按照上面的顺序将将创建好 UIImageView 放在smallScrollView 上(这个scrollView是负责图片缩放的 在这里要设置缩放比例) 最后再将smallScrollView放在photoScrollView上
这一步很重要 通过以上的一系列操作 我们已经将图片都按照顺序排在photoScrollView上了 接下来 我们要设置这个photoScrollView的偏移量 要他显示的第一张图片是我们的第一张图片(self.photoScrollView.contentOffset = CGPointMake(WIDTH, 0);)
创建pageControl 这里我们轮播的图片是7张 所以self.page.numberOfPages = 7; 而且要给pageControl绑定事件
实现图片的放大功能
- (UIView *)viewForZoomingInScrollView: (UIScrollView *)scrollView {
return [scrollView.subviews firstObject];
}实现图片的轮播 (在scrollView停止减速的这个方法里来实现)
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
// 对一个图片实现缩放后 滑到另一张图片 然后再划回来 使图片变为原来大小
for (UIScrollView *scroll in scrollView.subviews) {
if ([scroll isKindOfClass:[UIScrollView class]]) {
scroll.zoomScale = 1;
}
}
// 设置当滑动图片时小点跟着移动
self.page.currentPage = self.photoScrollView.contentOffset.x / WIDTH - 1;
// 当scrollView滑到最后一张时 改变scrollView的偏移量 让scrollView显示第一张图片 这时同时设置小点的位置也是0 才能做到滑动图片小点的移动是同步的
if (self.photoScrollView.contentOffset.x == 8 * WIDTH) {
self.photoScrollView.contentOffset = CGPointMake(WIDTH, 0);
self.page.currentPage = 0;
}
if (self.photoScrollView.contentOffset.x == 0) {
self.photoScrollView.contentOffset =CGPointMake(7 * WIDTH, 0);
self.page.currentPage = 6;
}
NSLog(@"%f", self.photoScrollView.contentOffset.x);
}设置点击小点图片也会跟着移动
- (void)pageChange:(UIPageControl *)page {
[self.photoScrollView setContentOffset:CGPointMake((page.currentPage + 1) * WIDTH, 0) animated:YES];
}