版本記錄

前言

很多APP都有很多圖片輪播banner，是用戶了解app的重要接口，也是app發(fā)布活動(dòng)或者消息的很好選擇。比如每年雙11或者其他節(jié)日，天貓等app都會(huì)在banner上加入很多活動(dòng)接口，以便用戶盡快獲得活動(dòng)的信息。banner的實(shí)現(xiàn)有很多第三方框架，我自己封裝了一個(gè)圖片輪播器github，有什么不對(duì)的地方希望大家能給我指出，謝謝。

詳細(xì)設(shè)計(jì)

我們先看一下代碼組織結(jié)構(gòu)。

代碼組織結(jié)構(gòu)

接著看詳細(xì)的代碼

1. AppDelegate.m

#import "AppDelegate.h"
#import "JJBannerVC.h"

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    JJBannerVC *bannerVC = [[JJBannerVC alloc] init];
    self.window.rootViewController = bannerVC;
    [self.window makeKeyAndVisible];
    
    return YES;
}


- (void)applicationWillResignActive:(UIApplication *)application {
    
}

- (void)applicationDidEnterBackground:(UIApplication *)application {
    
}

- (void)applicationWillEnterForeground:(UIApplication *)application {
    
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
    
}

- (void)applicationWillTerminate:(UIApplication *)application {
    
}

@end

2.JJBannerVC.h

#import <UIKit/UIKit.h>

@interface JJBannerVC : UIViewController

@end

3.JJBannerVC.m

#import "JJBannerVC.h"
#import "JJBannerView.h"
#import "Masonry.h"

@interface JJBannerVC ()

@property (nonatomic, strong) JJBannerView *bannerView;


@end

@implementation JJBannerVC

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.bannerView = [[JJBannerView alloc] initWithFrame:CGRectZero];
    [self.view addSubview:self.bannerView];
    
    self.bannerView.imageArr = [self loadImageArr];
    
}

- (void)viewWillLayoutSubviews
{
    [self.bannerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.offset(0);
    }];
}

#pragma mark - Object Private Function

- (NSArray *)loadImageArr
{
    NSMutableArray *imageArrM = [NSMutableArray array];
    for (NSInteger i = 0; i < 5; i ++) {
        NSString *imageStr = [NSString stringWithFormat:@"Home_Scroll_%02zd",i+1];
        UIImage *image = [UIImage imageNamed:imageStr];
        [imageArrM addObject:image];
    }
    return imageArrM.copy;
}

@end

4.JJBannerView.h

#import <UIKit/UIKit.h>

@interface JJBannerView : UIView

@property (nonatomic, strong) NSArray *imageArr;

@end

5. JJBannerView.m

#import "JJBannerView.h"
#import "JJBannerFlowLayout.h"
#import "Masonry.h"
#import "JJBannerCollectionViewCell.h"

#define kJJBannerViewSectionCount               (100)

@interface JJBannerView () <UICollectionViewDelegate, UICollectionViewDataSource>

@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) UIPageControl *pageControl;
@property (nonatomic, strong) NSTimer *timer;

@end

@implementation JJBannerView

static NSString * const cellIdentify = @"cellIdentify";

#pragma mark - Overide Base Function

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setupCollectionView];
        [self setupPageControl];
        [self setupTimer];
    }
    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    [self.pageControl mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.offset(-40);
        make.centerX.equalTo(self);
    }];
    
    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.offset(0);
    }];

}

- (void)removeFromSuperview
{
    [super removeFromSuperview];
    
    [self.timer invalidate];
}

#pragma mark - Object Private Function

- (void)setupCollectionView
{
    JJBannerFlowLayout *flowLayout = [[JJBannerFlowLayout alloc] init];
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
    [self addSubview:self.collectionView];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.collectionView registerClass:[JJBannerCollectionViewCell class] forCellWithReuseIdentifier:cellIdentify];
    self.collectionView.pagingEnabled = YES;
    self.collectionView.bounces = NO;
    self.collectionView.showsHorizontalScrollIndicator = NO;
    self.collectionView.showsVerticalScrollIndicator = NO;
    
}

- (void)setupPageControl
{
    UIPageControl *pageControl = [[UIPageControl alloc] init];
    pageControl.currentPageIndicatorTintColor = [UIColor darkGrayColor];
    pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
    [self addSubview:pageControl];
    self.pageControl = pageControl;

}

- (void)setupTimer
{
    self.timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];

}

#pragma mark - Object Base Function

- (void)nextPage
{
    NSInteger page = self.pageControl.currentPage;
    NSIndexPath *scrollIndexPath = nil;
    // 如果是最后一張圖片
    if (page == self.imageArr.count - 1) {
        scrollIndexPath = [NSIndexPath indexPathForItem:0 inSection:kJJBannerViewSectionCount/2 + 1];
    }
    else {
        scrollIndexPath = [NSIndexPath indexPathForItem:page + 1 inSection:kJJBannerViewSectionCount/2];
    }
    [self.collectionView scrollToItemAtIndexPath:scrollIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

#pragma mark - UICollectionViewDelegate, UICollectionViewDataSource>

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    self.timer.fireDate = [NSDate distantFuture];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    self.timer.fireDate = [NSDate dateWithTimeIntervalSinceNow:2];
}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    [self scrollViewDidEndDecelerating:scrollView];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSInteger page = scrollView.contentOffset.x / scrollView.bounds.size.width;
    
    NSInteger sectionNum = page / self.imageArr.count;
    NSInteger itemNUm = page % self.imageArr.count;
    
    if (sectionNum == kJJBannerViewSectionCount/2) {
        return;
    }
    NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForItem:itemNUm inSection:kJJBannerViewSectionCount/2];
    [self.collectionView scrollToItemAtIndexPath:scrollIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSInteger page = (scrollView.contentOffset.x/scrollView.bounds.size.width) + 0.499;
    NSInteger pageNO = page % self.imageArr.count;
    self.pageControl.currentPage = pageNO;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return  kJJBannerViewSectionCount;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.imageArr.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    JJBannerCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentify forIndexPath:indexPath];
    cell.indexPath = indexPath;
    return cell;
}

#pragma mark - Getter & Setter Function

- (void)setImageArr:(NSArray *)imageArr
{
    _imageArr = imageArr;
    
    [self.collectionView reloadData];
    self.pageControl.numberOfPages = self.imageArr.count;
    [self layoutIfNeeded];
    NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForItem:0 inSection:kJJBannerViewSectionCount/2];
    [self.collectionView scrollToItemAtIndexPath:scrollIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

@end

6.JJBannerFlowLayout.h

#import <UIKit/UIKit.h>

@interface JJBannerFlowLayout : UICollectionViewFlowLayout

@end

7.JJBannerFlowLayout.m

#import "JJBannerFlowLayout.h"

@implementation JJBannerFlowLayout

- (void)prepareLayout
{
    [super prepareLayout];
    
    self.itemSize = self.collectionView.bounds.size;
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    self.minimumLineSpacing = 0;
    self.minimumInteritemSpacing = 0;
}

@end

8.JJBannerCollectionViewCell.h

#import <UIKit/UIKit.h>

@interface JJBannerCollectionViewCell : UICollectionViewCell

@property (nonatomic, strong) NSIndexPath *indexPath;

@end

9. JJBannerCollectionViewCell.m

#import "JJBannerCollectionViewCell.h"
#import "Masonry.h"

@interface JJBannerCollectionViewCell ()

@property (nonatomic, strong) UIImageView *imageView;


@end

@implementation JJBannerCollectionViewCell

#pragma mark - Override Base Function

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setupUI];
    }
    
    return self;

}

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    [self.imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.offset(0);
    }];

}

#pragma mark - Object Base Function

- (void)setupUI
{
    UIImageView *imageView = [[UIImageView alloc] init];
    
    [self.contentView addSubview:imageView];
    self.imageView = imageView;

}

#pragma mark - Getter & Setter Function

- (void)setIndexPath:(NSIndexPath *)indexPath
{
    _indexPath = indexPath;
    
    self.imageView.image = [UIImage imageNamed:@(indexPath.item).description];
}

@end

設(shè)計(jì)結(jié)果

我們直接看下邊的gif圖。

設(shè)計(jì)結(jié)果

可以看見實(shí)現(xiàn)了圖片輪播的效果。

后記

這個(gè)東西很簡單，但是我還是自己寫了一遍，有些東西很長時(shí)間不寫就忘記不少了，但是看看還是能很快的撿起來，相信大家和我都是一樣的。希望我寫的這個(gè)小東西能對(duì)大家有用，再次謝謝大家對(duì)我的支持。