iCarousel的简单介绍及应用

iOS开源类iCarousel介绍

iCarousel是一个类，它继承于UIView，用于简化实现各种类型的旋转木马(分页滚动视图)iPhone、iPad和Mac OS。iCarousel实现一些常见的影响如圆柱、平面式的旋转木马。经过 iCarousel类的封装，使iCarousel类的使用方式类似于UITableView的使用，每一个界面类似于一个单元格。 iCarousel内先创建一个可变字典，用于存储需要显示的单元格视图。创建一个父视图用于显示单元格视图，从字典中取出需要显示的单元格视图添加到创建父视图上，用于显示需要创建的单元格视图，在iCarousel类的内部对这些需要显示的单元格视图进行布局。

CarouselType，即Carousel类型

typedef NS_ENUM(NSUInteger, iCarouselType)
{
    iCarouselTypeLinear = 0,           //线性类型
    iCarouselTypeRotary,               //可旋转类型
    iCarouselTypeInvertedRotary,       //反向旋转类型
    iCarouselTypeCylinder,             //圆柱类型
    iCarouselTypeInvertedCylinder,     //反向圆柱类型
    iCarouselTypeWheel,                //车轮类型
    iCarouselTypeInvertedWheel,        //反向车轮类型
    iCarouselTypeCoverFlow,            //封面流类型
    iCarouselTypeCoverFlow2,           //封面流类型2
    iCarouselTypeTimeMachine,          //时光机类型
    iCarouselTypeInvertedTimeMachine,  //反向时光机类型
    iCarouselTypeCustom                //可自定义Carousel类型
};

1.iCarouselTypeLinear线性类型

iCarouselTypeLinear.gif

2.iCarouselTypeRotary可旋转类型
iCarouselTypeRotary.gif

3.iCarouselTypeInvertedRotary反向旋转类型
iCarouselTypeInvertedRotary.gif

4.iCarouselTypeCylinder圆柱类型
iCarouselTypeCylinder.gif

5.iCarouselTypeInvertedCylinder反向圆柱类型
iCarouselTypeInvertedCylinder.gif

6.iCarouselTypeWheel车轮类型
iCarouselTypeWheel.gif

7.iCarouselTypeInvertedWheel反向车轮类型
iCarouselTypeInvertedWheel.gif

8.iCarouselTypeCoverFlow封面流类型
iCarouselTypeCoverFlow.gif

9.iCarouselTypeCoverFlow2封面流类型2
iCarouselTypeCoverFlow2.gif

iCarouselTypeCoverFlow和 iCarouselTypeCoverFlow2样式的不同之处很细微，如果你轻弹carousel，他们基本上是一样的，但是如果你使用手指慢慢拖动carousel，不同点就会明显。iCarouselTypeCoverFlow2 是为了模拟尽可能接近标准的苹果封面流效果而设计的，并且可能在未来会为了这个目标而巧妙地变化。
10.iCarouselTypeTimeMachine时光机类型
iCarouselTypeTimeMachine.gif

11.iCarouselTypeInvertedTimeMachine反向时光机类型
iCarouselTypeInvertedTimeMachine.gif

12.iCarouselTypeCustom可自定义Carousel类型，type设置为iCarouselTypeCustom，在代理函数实现自定义动画

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
自定义动画.gif

常用属性介绍

@property (nonatomic, assign) iCarouselType type;

type是carousel展示样式，上面有介绍。

@property (nonatomic, assign) CGFloat scrollSpeed;

当用户用手指轻击carousel时，carousel的滚动速度，默认为1.0。

@property (nonatomic, assign, getter = isScrollEnabled) BOOL scrollEnabled;

能否滚动carousel，如果这个值被设为NO，carousel仍然可以以编程方式被滚动。

@property (nonatomic, assign, getter = isPagingEnabled) BOOL pagingEnabled;

整页平移是否开启，一般设置为YES。

@property (nonatomic, assign) BOOL bounces;

设置carousel在超出底部和返回时是否应该弹跳，或者是停止并挂掉。注意，在carousel样式设置为缠绕样式时或者carouselShouldWrap代理方法返回为yes时，这个属性不起作用。

@property (nonatomic, assign) CGFloat scrollOffset;

这是以itemWidth的整数倍来计算的carousel当前的滚动偏移量，这个值，被截取为最接近的整数，是currentItemIndex值。当carousel运动中，你可以使用这个值定位其他屏幕的元素。这个值也可以被编程方式设置如果你想滚动carousel到一个特定的偏移。如果你想禁用内置手势处理并提供自己的实现时，这个可能有用。

@property (nonatomic, readonly) CGFloat offsetMultiplier;

这是当用户用手指拖动carousel时偏移量的乘数。它并不影响编程的滚动和减速的速度。对大多数carousel样式这个默认值是1.0，但是对CoverFlow-style样式的carousels默认值是2.0，来弥补他们的items在空间上更紧凑，所以必须拖拽更远来移动相同的距离的事实。你不能直接设置这个值，但是可以通过实现carouselOffsetMultiplier:代理方法来重写默认值。

@property (nonatomic, readonly) NSInteger numberOfItems;

carousel中 items的数量（只读），要设置他的话，实现 numberOfItemsInCarousel:这个数据源方法。

@property (nonatomic, readonly) NSInteger numberOfPlaceholders;

在carousel中展示的占位视图的数量（只读）。要设置他，实现一下numberOfPlaceholdersInCarousel:这个数据源方法。

@property (nonatomic, readonly) CGFloat itemWidth;

carousel中展示的items的宽度（只读）。这是自动从使用carousel:viewForItemAtIndex:reusingView:数据源方法第一个传到carousel中的视图中继承来的。你也可以使用carouselItemWidth:代理方法重写这个值，这个方法会改变分配给carousel items的空间（但是不会对这些item views重写设置大小或规模）。

@property (nonatomic, assign) BOOL centerItemWhenSelected;

当设置为YES时，点击任何在carousel 中的item而不是那个匹配currentItemIndex 的视图，将会使平滑动画移动到居中位置。点击当前被选中的item将没有效果。默认值是YES。

@property (nonatomic, assign) BOOL scrollToItemBoundary;

默认情况下，不管carousel何时停止移动，他会自动滚动到最近的item 边界。如果你设置这个属性为NO，carousel停止后将不会滚动且不管在哪儿他都会停下来，即使他不是正好对准当前的索引。有一个特例，如果打包效果被禁止且bounces被设置为YES，然后，不管这个设置是什么，carousel会自动滚回第一个或者最后一个索引，如果它停下来时超出了carousel的底部。

iCarousel方法介绍

- (void)scrollToItemAtIndex:(NSInteger)indexanimated:(BOOL)animated;

顾名思义，这个方法是使carousel滚动到一个特定的item。

- (void)scrollToItemAtIndex:(NSInteger)index duration:(NSTimeInterval)duration;

这个方法允许你来控制carousel使用 多长时间来滚动到特定的索引。

- (void)scrollToOffset:(CGFloat)offsetduration:(NSTimeInterval)duration;

这个方法工作起来和 scrollToItemAtIndex:方法一样，但是允许你移动到一个微小的偏移。如果你想达到一个非常准确的动画效果时这个可能有用。注意，如果scrollToItemBoundary属性被设置为YES，当你调用这个方法之后carousel会自动滚动到最近的item索引。

- (void)scrollByNumberOfItems:(NSInteger)itemCount duration:(NSTimeInterval)duration;

这个方法允许你使用一个固定的距离滚动carousel，以carousel的item宽度来衡量。整数或负数可能由itemCount来具体确定，取决于你希望滚动的方向。iCarousel很好的处理了边界问题，所以如果你指定了一个大于carousel中items数量的值，滚动或者在到达carousel底部时被夹紧（如果打包被禁止），或者无停顿地包裹。

- (UIView *)itemViewAtIndex:(NSInteger)index;

返回指定索引的item视图。

- (NSInteger)indexOfItemView:(UIView *)view;

返回carousel视图的索引。

- (void)removeItemAtIndex:(NSInteger)index animated:(BOOL)animated;//移除视图
- (void)insertItemAtIndex:(NSInteger)index animated:(BOOL)animated;//插入视图
- (void)reloadItemAtIndex:(NSInteger)index animated:(BOOL)animated;//刷新视图

iCarouselDataSource

- (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel;

返回carousel中界面的数量。

- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view;

返回一个在carousel中要在指定索引处显示的视图，可以是UIImageView等，也可以自定义UIView。

- (NSUInteger)numberOfPlaceholdersInCarousel:(iCarousel *)carousel

返回在carousel中展示的占位视图数量。占位视图用来当carousel中界面太少而不能填满carousel的宽度，并且你希望在空白的地方显示一些东西时使用。它们随着carousel移动并且像其他carousel界面一样运行，但是它们不占numberOfItems数量，且不能被设置为当前选中的界面。

- (UIView *)carousel:(iCarousel *)carousel placeholderViewAtIndex:(NSUInteger)index reusingView:(UIView *)view;

返回在carousel中展示的占位视图。

iCarouselDelegate

//carousel将开始滚动动画
- (void)carouselWillBeginScrollingAnimation:(iCarousel *)carousel;
//carousel结束滚动动画
- (void)carouselDidEndScrollingAnimation:(iCarousel *)carousel;
//carousel滚动
- (void)carouselDidScroll:(iCarousel *)carousel;
//carousel变化
- (void)carouselCurrentItemIndexDidChange:(iCarousel *)carousel;
//开始拖动carousel
- (void)carouselWillBeginDragging:(iCarousel *)carousel;
//停止拖动carousel
- (void)carouselDidEndDragging:(iCarousel *)carousel willDecelerate:(BOOL)decelerate;
//carousel开始减速
- (void)carouselWillBeginDecelerating:(iCarousel *)carousel;
//carousel完成减速
- (void)carouselDidEndDecelerating:(iCarousel *)carousel;

//将要点击carousel视图触发该方法
- (BOOL)carousel:(iCarousel *)carousel shouldSelectItemAtIndex:(NSInteger)index;
//点击carousel视图触发该方法，类似于tableView:didSelectRowAtIndexPath:方法
- (void)carousel:(iCarousel *)carousel didSelectItemAtIndex:(NSInteger)index;

- (CGFloat)carouselItemWidth:(iCarousel *)carousel;
//自定义carousel动画
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform;
- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value;

iCarousel的自定义动画实现

创建iCarousel类的对象

- (iCarousel *)myCarousel {
    CGFloat height = kScreen_Width - 2*PAGE_OFFSET;
    if (!_myCarousel) {
        _myCarousel = [[iCarousel alloc] initWithFrame:CGRectMake(0, 100, kScreen_Width, height)];
        _myCarousel.dataSource = self;
        _myCarousel.delegate = self;
        _myCarousel.bounces = NO;
        _myCarousel.pagingEnabled = YES;
        _myCarousel.type = iCarouselTypeCustom;
    }
    return _myCarousel;
}

数据源

- (NSMutableArray *)dataSource {
    if (!_dataSource) {
        _dataSource = [[NSMutableArray alloc] init];
        [_dataSource addObject:[NSString stringWithFormat:@"style_%@.jpg",@"1"]];
        [_dataSource addObject:[NSString stringWithFormat:@"style_%@.jpg",@"2"]];
        [_dataSource addObject:[NSString stringWithFormat:@"style_%@.jpg",@"3"]];
        [_dataSource addObject:[NSString stringWithFormat:@"style_%@.jpg",@"4"]];
        [_dataSource addObject:[NSString stringWithFormat:@"style_%@.jpg",@"5"]];
        [_dataSource addObject:[NSString stringWithFormat:@"style_%@.jpg",@"6"]];
        [_dataSource addObject:[NSString stringWithFormat:@"style_%@.jpg",@"7"]];
        [_dataSource addObject:[NSString stringWithFormat:@"style_%@.jpg",@"8"]];
    }
    return _dataSource;
}

实现代理函数

#pragma mark - iCarouselDataSource

- (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel {
    return self.dataSource.count;
}

- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view {
    if (view == nil) {
        CGFloat viewWidth = kScreen_Width - 2*PAGE_OFFSET;
        view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, viewWidth, viewWidth)];
    }
    ((UIImageView *)view).image = [UIImage imageNamed:[self.dataSource objectAtIndex:index]];
    
    return view;
}

#pragma mark - iCarouselDelegate

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform {
    
    static CGFloat max_sacle = 1.0f;
    static CGFloat min_scale = 0.6f;
    if (offset <= 1 && offset >= -1) {
        float tempScale = offset < 0 ? 1+offset : 1-offset;
        float slope = (max_sacle - min_scale) / 1;
        
        CGFloat scale = min_scale + slope*tempScale;
        transform = CATransform3DScale(transform, scale, scale, 1);
    }else{
        transform = CATransform3DScale(transform, min_scale, min_scale, 1);
    }
    
    return CATransform3DTranslate(transform, offset * self.myCarousel.itemWidth * 1.4, 0.0, 0.0);
}

- (void)carousel:(iCarousel *)carousel didSelectItemAtIndex:(NSInteger)index {
    [self showHudTipStr:[NSString stringWithFormat:@"点击了第%ld张图片",(long)index]];
}

总结

iCarousel是一个非常实用的第三方类，值得去更深入的学习它的用法！学习使人进步，既然选择了编程，就要坚持，爬着也要走下去。

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

推荐阅读更多精彩内容