轮播组件

AUBannerView 为图片轮播组件。

效果图

接口说明

typedef NS_ENUM(NSUInteger, AUBannerStyle) {
    AUBannerStyleDeepColor, // 深色样式
    AUBannerStyleLightColor // 浅色样式
};

@interface AUBannerViewConfig : NSObject

@property (nonatomic, assign) AUBannerStyle                  style;                       // 默认的样式
@property (nonatomic, strong) UIColor                       *pageControlNormalColor;      // 默认色
@property (nonatomic, strong) UIColor                       *pageControlSelectedColor;    // 选中色
@property (nonatomic, assign) CGFloat                        pageControlMarginBottom;     // 分页标识距离底部的margin
@property (nonatomic, assign) BOOL                           pageControlDotTapEnabled;    // 分页标识圆点是否支持点击(默认为NO)
@property (nonatomic, assign) UIEdgeInsets                   contentViewMargin;           // 内容区边距
@property (nonatomic, assign) UIEdgeInsets                   contentViewPadding;          // 内容空白区,滚动时会经过该区域
@property (nonatomic, assign) BOOL                           autoTurn;                    // 自动轮播(默认为 YES)
@property (nonatomic, assign) BOOL                           autoStartTurn;               // 自动开始轮播
@property (nonatomic, assign) CGFloat                        duration;                    // 自动轮播间隔

@end


@class AUBannerView;
@protocol AUBannerViewDelegate <NSObject>

@required
- (NSInteger)numberOfItemsInBannerView:(AUBannerView *)bannerView;
- (UIView *)bannerView:(AUBannerView *)bannerView itemViewAtPos:(NSInteger)pos;

@optional
- (void)bannerView:(AUBannerView *)bannerView didTapedItemAtPos:(NSInteger)pos;
- (CGFloat)bannerView:(AUBannerView *)bannerView durationOfItemAtPos:(NSInteger)pos;

@end



@interface AUBannerView : UIView

AU_UNAVAILABLE_INIT

@property (nonatomic, readonly) UIView                  *contentView;   // 内容区视图
@property (nonatomic, readonly) AUPageControl           *pageControl;   // 分页标识视图

@property (nonatomic, copy)     NSString                *bizType;       // 业务标识
@property (nonatomic, assign)   NSInteger                currentPage;   // 当前页码(从 0 开始)
@property (nonatomic, weak)     id<AUBannerViewDelegate> delegate;      // 数据源和事件代理


/**
 创建banner视图

 @param frame frame
 @param bizType 业务标识(不能为空)
 @param configOperation 配置 block
 @return banner 视图
 */
- (instancetype)initWithFrame:(CGRect)frame
                      bizType:(NSString *)bizType
                   makeConfig:(void(^)(AUBannerViewConfig *config))configOperation;


/**
 开始自动轮播(如果 autoStartTurn 设置为 NO,才需要调用这个方法)
 */
- (void)startTurning;


/**
 重新加载 banner(数据源变更,需调用此方法重新加载数据)
 */
- (void)reloadData;

@end





//################################
//####### UIImage ################
//################################

@interface AUBannerView (Image)

/**
 创建图片的banner视图
 注意:需要保持 imageURLs 和 actionURLs 相等,否则创建失败

 @param frame frame
 @param bizType 业务标识(不能为空)
 @param images 图片集合(可为图片链接字符串,或者 image 对象)
 @param placeholder 图片占位图(UIImage 对象)
 @param actionURLs 图片点击后的跳转链接(字符串,如果某张图不支持跳转,请设置 [NSNull null])
 @param configOperation banner 视图的配置参数
 @return 轮播图片的 banner 视图
 */
+ (instancetype)bannerViewWithFrame:(CGRect)frame
                            bizType:(NSString *)bizType
                             images:(NSArray *)images
                        placeholder:(UIImage *)placeholder
                         actionURLs:(NSArray *)actionURLs
                         makeConfig:(void(^)(AUBannerViewConfig *config))configOperation;

@end




//################################
//####### Extension ##############
//################################


@interface AUBannerView (Extension)

/**
 更新 bannerview 配置
 会自动触发 reload 事件

 @param update update 的 block
 */
- (void)updateConfigOperation:(void(^)(AUBannerViewConfig *config))update;

@end

代码示例

// 普通 banner(深色)
    for (NSInteger i = 0; i < 1; i ++) {
        CGRect rect = CGRectMake(10, 10 + (height + spaceY) * i, self.view.width - 20, height);
        AUBannerView *bannerView = [[AUBannerView alloc] initWithFrame:rect
                                                               bizType:@"demo"
                                                            makeConfig:^(AUBannerViewConfig *config)
                                    {
                                        config.duration = 1.5;
//                                        config.contentViewMargin = UIEdgeInsetsMake(5, 5, 10, 5);
//                                        config.contentViewPadding = UIEdgeInsetsMake(0, 50, 0, 50);
                                        config.style = AUBannerStyleDeepColor;
                                        config.autoTurn = YES;
                                        config.autoStartTurn = YES;
                                    }];

        bannerView.delegate = self;
        bannerView.tag = 1;
        bannerView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.1];
        [self.view addSubview:bannerView];
    }

    // 普通 banner(浅色)
    for (NSInteger i = 1; i < 2; i ++) {
        CGRect rect = CGRectMake(10, 10 + (height + spaceY) * i, self.view.width - 20, height);
        AUBannerView *bannerView = [[AUBannerView alloc] initWithFrame:rect
                                                               bizType:@"demo"
                                                            makeConfig:^(AUBannerViewConfig *config)
                                    {
                                        config.duration = 1.5;
                                        config.style = AUBannerStyleLightColor;
                                        config.autoTurn = NO;
                                        config.pageControlDotTapEnabled = YES;
                                    }];

        bannerView.delegate = self;
        bannerView.tag = 2;
        bannerView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.1];
        [self.view addSubview:bannerView];
    }

    // 纯图片banner
    for (NSInteger i = 2; i < 3; i ++) {
        CGRect rect = CGRectMake(10, 10 + (height + spaceY) * i, self.view.width - 20, height);
        NSMutableArray *images = [NSMutableArray array];
        for (NSInteger j = 0; j < 5; j ++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%@.jpg", @(j + 1)]];
            [images addObject:image];
        }
        AUBannerView *bannerView = [AUBannerView bannerViewWithFrame:rect
                                                             bizType:@"demo"
                                                              images:images
                                                         placeholder:nil
                                                          actionURLs:nil
                                                          makeConfig:NULL];
        bannerView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.1];
        [self.view addSubview:bannerView];
    }
#pragma mark - AUBannerViewDelegate

- (NSInteger)numberOfItemsInBannerView:(AUBannerView *)bannerView
{
    return bannerView.tag == 1 ? 2 : 4;
}

- (UIView *)bannerView:(AUBannerView *)bannerView itemViewAtPos:(NSInteger)pos
{
    NSArray *array = nil;
    // 深色
    if (bannerView.tag == 1) {
        array = @[RGB(0x108EE9), RGB_A(0x108EE9, 0.5), [UIColor blueColor], [UIColor yellowColor]];
    }
    // 浅色
    else {
        array = @[RGB(0xfFFFFF),RGB_A(0xeFFFFF, 0.7),RGB(0xcFFFFF),RGB_A(0xeFFFFF, 0.5),RGB_A(0xeFFFFF, 0.9)];
    }

    UIView *view = [[UIView alloc] init];
    view.backgroundColor = array[pos];
    return view;
}


- (void)bannerView:(AUBannerView *)bannerView didTapedItemAtPos:(NSInteger)pos
{
    NSLog(@"didTapedItemAtPos %@", @(pos));
}

//- (CGFloat)bannerView:(AUBannerView *)bannerView durationOfItemAtPos:(NSInteger)pos
//{
//    return 1;
//}
阿里云首页 移动开发平台 mPaaS 相关技术圈