All Products
Search
Document Center

Mobile Platform as a Service:Carousel component

Last Updated:Jul 19, 2023

AUBannerView is a carousel component.

Sample image

image.png

API description

typedef NS_ENUM(NSUInteger, AUBannerStyle) {
    AUBannerStyleDeepColor, // The deep color style.
    AUBannerStyleLightColor // The light color style.
};

@interface AUBannerViewConfig : NSObject

@property (nonatomic, assign) AUBannerStyle                  style;                       // The default style.
@property (nonatomic, strong) UIColor                       *pageControlNormalColor;      // The default color.
@property (nonatomic, strong) UIColor                       *pageControlSelectedColor;    // The selected color.
@property (nonatomic, assign) CGFloat                        pageControlMarginBottom;     // The margin between the pagination identifier and bottom.
@property (nonatomic, assign) BOOL                           pageControlDotTapEnabled;    // Specify whether the pagination identifier (dot) is clickable. The default value is NO.
@property (nonatomic, assign) UIEdgeInsets                   contentViewMargin;           // The margin of the content area.
@property (nonatomic, assign) UIEdgeInsets                   contentViewPadding;          // The padding of the content area. An image will pass the padding when it scrolls.
@property (nonatomic, assign) BOOL                           autoTurn;                    // Whether to enable automatic carousel. Default value: YES.
@property (nonatomic, assign) BOOL                           autoStartTurn;               // Whether to automatically start carousel.
@property (nonatomic, assign) CGFloat                        duration;                    // The automatic carousel interval.

@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;   // The content area view.
@property (nonatomic, readonly) AUPageControl           *pageControl;   // The pagination identifier view.

@property (nonatomic, copy)     NSString                *bizType;       // The business type.
@property (nonatomic, assign)   NSInteger                currentPage;   // The current page, which starts from page 0.
@property (nonatomic, weak)     id<AUBannerViewDelegate> delegate;      // The data source and event delegate.


/**
 Create a banner view.

 @param frame frame
 @param bizType         The business type, which cannot be left empty.
 @param configOperation The configuration block.
 @return                The banner view.
 */
- (instancetype)initWithFrame:(CGRect)frame
                      bizType:(NSString *)bizType
                   makeConfig:(void(^)(AUBannerViewConfig *config))configOperation;


/**
 Start automatic carousel. (Call this method only when autoStartTurn is set to NO.)
 */
- (void)startTurning;


/**
 Reload the banner. (Call this method to reload data when the data source changes.)
 */
- (void)reloadData;

@end





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

@interface AUBannerView (Image)

/**
 Create a banner view for images.
 Note: Ensure that the value of images is the same as that of actionURLs, or the banner view will fail to be created.

 @param frame           The frame.
 @param bizType         The business type, which cannot be left empty.
 @param images          The image set, which can be an array of image link strings or image objects.
 @param placeholder     The image placeholder, or the UIImage object.
 @param actionURLs      The link to which a user is redirected after the user taps the corresponding image. The link is a string. If an image does not support redirection, set this parameter to [NSNull null].
 @param configOperation The banner view configuration parameter.
 @return                The banner view of image carousel.
 */
+ (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)

/**
 Update the banner view configuration.
 A reloading event will be automatically triggered.

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

@end

Code sample

// The common deep color 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];
    }

    // The common light color 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];
    }

    // The banner with images only.
    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;
    // The deep color.
    if (bannerView.tag == 1) {
        array = @[RGB(0x108EE9), RGB_A(0x108EE9, 0.5), [UIColor blueColor], [UIColor yellowColor]];
    }
    // The light color.
    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;
//}