版本记录
| 版本号 | 修改时间 |
|---|---|
| V1.0 | 2017.04.18 |
前言
很多APP都有很多图片轮播banner，是用户了解app的重要接口，也是app发布活动或者消息的很好选择。比如每年双11或者其他节日，天猫等app都会在banner上加入很多活动接口，以便用户尽快获得活动的信息。banner的实现有很多第三方框架，我自己封装了一个图片轮播器github，有什么不对的地方希望大家能给我指出，谢谢。
详细设计
我们先看一下代码组织结构。
代码组织结构
接着看详细的代码
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
设计结果
我们直接看下边的gif图。
设计结果
可以看见实现了图片轮播的效果。
后记
这个东西很简单，但是我还是自己写了一遍，有些东西很长时间不写就忘记不少了，但是看看还是能很快的捡起来，相信大家和我都是一样的。希望我写的这个小东西能对大家有用，再次谢谢大家对我的支持。
