图片轮播器

之前看App上的图片轮播器,感觉很牛逼,后来做了之后发现也没有想象中的那么难.不过就是一个UIScrollView.

这里的图片轮播器已经封装好了,可以正常使用.

资源链接:点击打开链接

LQPageView.xib布局如下:(默认300*130),

一个UIScrollView和一个UIPageView,两个控件都要放在View里,别把UIPageView放到UIScrollView里面.然后把两个控件拖线到LQPageView.m里.

LQPageView.h里提供一个类方法初始化.并且提供设置图片的属性.

#import <UIKit/UIKit.h>

@interface LQPageView : UIView

@property (nonatomic, strong) NSArray *imageNames;

+ (instancetype)pageView;

@end

LQPageView.m里具体设置各个属性:

#import "LQPageView.h"

@interface LQPageView() <UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

// 保存时钟方便操作
@property (nonatomic, strong) NSTimer *timer;


@end

@implementation LQPageView

+ (instancetype)pageView
{
    // 加载xib视图并返回
    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
}

// 设置图片
- (void)setImageNames:(NSArray *)imageNames
{
    _imageNames = imageNames;
    NSInteger count = imageNames.count;
    for (int i = 0; i < count; ++i) {
        // UIImageView的大小在layoutSubviews里设置.
        // 在这个方法内部获取到的父视图的大小可能不准确
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageNames[i]]];
        // 把图片添加到view里面
        [self.scrollView addSubview:imageView];
    }
    
    // 设置pageControl的点的个数
    self.pageControl.numberOfPages = count;
}


- (void)awakeFromNib
{
    // 必须在这个方法里设置autoresizingMask
    // 设置pageControl始终在左下角
    self.pageControl.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
    // 设置ScrollView的大小随着父视图变化而变化
    self.scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    // 设置pageControl的currentPageImage和pageImage,不设置也可以, 默认是小圆点
    [self.pageControl setValue:[UIImage imageNamed:@"current"] forKey:@"_currentPageImage"];
    [self.pageControl setValue:[UIImage imageNamed:@"other"] forKey:@"_pageImage"];
    // 当只有一张图片是隐藏原点
    self.pageControl.hidesForSinglePage = YES;
    // 起始位置0
    self.pageControl.currentPage = 0;
    // 添加点击方法, 点击pageControl左边减一,右边加一.
    [self.pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    // 添加时钟
    [self startTimer];
}

// 设置子视图的位置大小
- (void)layoutSubviews
{
    // 父视图的宽高
    CGFloat width = self.scrollView.bounds.size.width;
    CGFloat height = self.scrollView.bounds.size.height;
    // 设置图片位置.
    NSInteger index = 0; // 图片个数
    for (UIImageView *imageView in self.scrollView.subviews) {
        imageView.frame = CGRectMake(index * width, 0, width, height);
        index++;
    }
    // 根据图片个数设置contentSize的大小
    self.scrollView.contentSize = CGSizeMake(index * width, 0);
    // 分页
    self.scrollView.pagingEnabled = YES;
    //取消弹簧效果
    self.scrollView.bounces = NO;
    // 设置代理
    self.scrollView.delegate = self;
}

#pragma mark - 时钟相关方法
// 添加时钟
- (void)startTimer
{
    self.timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
// 停止时钟
- (void)stopTimer
{
    [self.timer invalidate];
}
// 下一页
- (void)nextPage
{
    // 让pageControl的currentPage +1
    self.pageControl.currentPage = (self.pageControl.currentPage + 1) % self.pageControl.numberOfPages;
    [self changePage:self.pageControl];
}
// 根据pageControl改变页数
- (void)changePage:(UIPageControl *)pageControl
{
    NSInteger page = pageControl.currentPage;
    [self.scrollView setContentOffset:CGPointMake(page * self.scrollView.bounds.size.width, 0) animated:YES];
}



#pragma ScrollView的代理方法
// 视图滚动是调用该方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 当超过一半时改变pageControl的currentPage
    NSInteger page = (scrollView.contentOffset.x / scrollView.bounds.size.width + 0.5);
    self.pageControl.currentPage = page % self.imageNames.count;
}
// 手指接触屏幕时调用该方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self stopTimer];
}
// 手指离开屏幕时调用该方法
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
}

在ViewControll.m中调用:

#import "ViewController.h"
#import "LQPageView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    LQPageView *pageView = [LQPageView pageView];
    // 设置图片名字数组
    pageView.imageNames = @[@"img_01", @"img_02", @"img_03", @"img_04", @"img_05"];
    // 设置frame(默认(0, 0, 300, 130))
    pageView.frame = CGRectMake(10, 10, 350, 300);
    [self.view addSubview:pageView];
    
    LQPageView *pageView2 = [LQPageView pageView];
    pageView2.imageNames = @[@"img_01", @"img_02", @"img_03", @"img_04", @"img_05"];
    pageView2.frame = CGRectMake(10, 400, 300, 130);
    [self.view addSubview:pageView2];
    
}


@end

运行效果: