iOS-边界露出卡片式轮播图控件

1.需求

a.图片轮播
b.要求露出前后两张图的部分
c.支持翻页滚动

image.png

(不知道为什么licecap录出来的gif都是黑屏，只有截图凑合看）

2.思路

本来设想有两种解决办法，一种是直接用UIScrollView，然后设置不裁剪超出边界的视图，通过配置适合大小的宽度，就可以实现。但是此方法配置frame比较别扭，配置数据、重用、无限循环方面也比较繁琐。
第二种就是这里使用的方法：

1.这里使用了UIColletionView作为容器，大小尺寸包含了现实中的图片，以及前后两张图片的部分露出。
2.每个cell的大小就是一张图片的大小
3.为了实现pagingEnable，就是翻页功能，又要刚好翻到下一张/上一张图片到中间，所以不能使用UICollectionView的paging，要在上面覆盖一层透明的UIScrollView，尺寸为一张图片的大小，使用此scrollView的手势交互和paging功能。

image.png

（假设上图中，蓝色为屏幕，绿色为图片cell）

3.代码

好像也没什么好说的，直接上代码

滚动视图view：
HVWBorderShownCardsView.h

#import <UIKit/UIKit.h>

@interface HVWBorderShownCardsView : UIView

@property(nonatomic, copy) NSArray *images;

@end

HVWBorderShownCardsView.m

#import "HVWBorderShownCardsView.h"
#import "HVWBorderShownCardCell.h"

NSString *const CellIdentifier = @"CellIdentifier";

CGFloat const HorizontalMargin = 15.0;
CGFloat const ItemMargin = 7.0;

@interface HVWBorderShownCardsView() <UICollectionViewDataSource, UICollectionViewDelegate>

@property(nonatomic, strong) UICollectionView *collectionView;
@property(nonatomic, strong) UIScrollView *panScrollView;

@property(nonatomic, assign, getter=isMultiplePages) BOOL multiplePage;
@property(nonatomic, strong) NSTimer *timer;

@end

@implementation HVWBorderShownCardsView

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

- (void)setupView {
    CGFloat collectionViewWidth = self.frame.size.width;
    CGFloat collectionViewHeight = self.frame.size.height;
    CGFloat itemWidth = collectionViewWidth - HorizontalMargin * 2;
    
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.itemSize = CGSizeMake(itemWidth, collectionViewHeight);
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    layout.minimumLineSpacing = ItemMargin;
    layout.sectionInset = UIEdgeInsetsMake(0, HorizontalMargin, 0, HorizontalMargin);
    
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, collectionViewWidth, collectionViewHeight) collectionViewLayout:layout];
    [self addSubview:collectionView];
    _collectionView = collectionView;
    collectionView.backgroundColor = [UIColor clearColor];
    collectionView.showsHorizontalScrollIndicator = NO;
    collectionView.alwaysBounceHorizontal = YES;
    collectionView.clipsToBounds = NO;
    
    collectionView.dataSource = self;
    collectionView.delegate = self;
    
    [collectionView registerClass:[HVWBorderShownCardCell class] forCellWithReuseIdentifier:CellIdentifier];
    
    CGFloat pageScrollWidth = itemWidth + ItemMargin;
    _panScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake((collectionView.frame.size.width - pageScrollWidth)/2, 0, pageScrollWidth, collectionViewHeight)];
    
    [self addSubview:_panScrollView];
    _panScrollView.hidden = YES;
    _panScrollView.showsHorizontalScrollIndicator = NO;
    _panScrollView.alwaysBounceHorizontal = YES;
    _panScrollView.pagingEnabled = YES;
    _panScrollView.delegate = self;
    
    [_collectionView addGestureRecognizer:_panScrollView.panGestureRecognizer];
    _collectionView.panGestureRecognizer.enabled = NO;
}

- (void)setImages:(NSArray *)images {
    _images = [images copy];
    [self updateView];
}

- (void)updateView {
    [_collectionView reloadData];
    [self addTimer];
}

- (void)addTimer {
    if (self.timer.isValid) {
        [self.timer invalidate];
    }
    
    self.timer = [NSTimer timerWithTimeInterval:2.0f target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)autoScroll {
    if (_images.count <= 1) {
        return;
    }
    
    // 滚到最后一页的时候，回到第一页
    if (_panScrollView.contentOffset.x >= _panScrollView.frame.size.width * (_images.count - 1)) {
        [_panScrollView setContentOffset:CGPointMake(0, 0) animated:YES];
    } else {
        [_panScrollView setContentOffset:CGPointMake(_panScrollView.contentOffset.x + _panScrollView.frame.size.width, 0) animated:YES];
    }
}


#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    _panScrollView.contentSize = CGSizeMake(_panScrollView.frame.size.width * _images.count, 0);
    return _images.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    HVWBorderShownCardCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
    
    if (indexPath.item < _images.count) {
        UIImage *image = _images[indexPath.item];
        cell.image = image;
    }
    
    return cell;
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView == _panScrollView) {
        _collectionView.contentOffset = _panScrollView.contentOffset;
    }
}

@end

HVWBorderShownCardCell.h

#import <UIKit/UIKit.h>

@interface HVWBorderShownCardCell : UICollectionViewCell

@property(nonatomic, strong) UIImage *image;

@end

HVWBorderShownCardCell.m

#import "HVWBorderShownCardCell.h"

@interface HVWBorderShownCardCell()

@property(nonatomic, strong) UIImageView *imageView;

@end

@implementation HVWBorderShownCardCell

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

- (void)setupView {
    _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
    _imageView.layer.cornerRadius = 4;
    _imageView.layer.masksToBounds = YES;
    [self addSubview:_imageView];
}

- (void)setImage:(UIImage *)image {
    _image = image;
    _imageView.image = image;
}


@end

调用：

    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    HVWBorderShownCardsView *view = [[HVWBorderShownCardsView alloc] initWithFrame:CGRectMake(0, 150, width, (640.0/1024.0)*width)];
    [self.view addSubview:view];
    
    view.images = @[[UIImage imageNamed:@"image1"], [UIImage imageNamed:@"image2"], [UIImage imageNamed:@"image3"], [UIImage imageNamed:@"image4"]];
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4赞 60
  • 为啥前半箱油比后半箱油更耐用？
    为什么大多数车主老感觉前半箱油比后半箱油耐用？你可能也有这样的疑惑，那究竟只是自己的错觉还是有别的原因呢？ 和心理...
    蔡健文阅读 287评论 0赞 1
  • 云居山游随手拍
    我们一行六人骑车爬过九曲十八弯，经风吹日晒终才抵达山门。 山路两旁树林阴翳，凉风习习。尽散烦闷燥热之气 一路上山，...
    方默默阅读 578评论 0赞 4