iCarousel的简单介绍及应用

作者: 踏歌寻方 | 来源:发表于2017-06-12 16:31 被阅读614次

    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是一个非常实用的第三方类,值得去更深入的学习它的用法!学习使人进步,既然选择了编程,就要坚持,爬着也要走下去。

    相关文章

      网友评论

        本文标题:iCarousel的简单介绍及应用

        本文链接:https://www.haomeiwen.com/subject/ekplqxtx.html