最近在做项目发现很多APP界面的头部/中部/底部都有轮播图的广告,其实就是自定义View展示在UITableView的cell上,因此,就封装了一个效果,废话不多说,直接上代码

关于界面轮播图的封装

• 自定义一个UIView,将所有的业务逻辑都封装在这个类中,外界使用时,只要传入要展示的图片就可以实现轮播效果

#import <UIKit/UIKit.h>

@interface XBScrollView : UIView
// 所有的图片
@property (nonatomic ,strong) NSArray *images;
/**当前页的颜色 */
@property (nonatomic ,strong) UIColor *currentColor;
/**其他页颜色 */
@property (nonatomic ,strong) UIColor *otherColor;
// 提供类方法创建ScrollView
+ (instancetype)scrollView;

#import "XBScrollView.h"

@interface XBScrollView ()< UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (nonatomic ,strong) NSTimer *timer;
@end
@implementation XBScrollView

+ (instancetype)scrollView
{
    return [[[NSBundle mainBundle]loadNibNamed:@"XBScrollView" owner:nil options:nil] lastObject];
}
// 初始化自控件
#pragma mark - 初始化子控件
- (void)awakeFromNib
{
    [super awakeFromNib];
    //设置分页
    self.scrollView.pagingEnabled = YES;
    self.scrollView.delegate = self;
    // 隐藏滚动条
    self.scrollView.showsVerticalScrollIndicator = NO;
    self.scrollView.showsHorizontalScrollIndicator = NO;
    // 单页时隐藏页码
    self.pageControl.hidesForSinglePage = YES;

    [self startTimer];
}

- (void)setImages:(NSArray *)images
{
    _images = images;
    //移除之前的imageView
    //让subviews数组中的所有对象都执行removeFromSuperview方法
   // [self.scrollView.subviews respondsToSelector:@selector(removeFromSuperview)];
    [self.scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

    // 获取所有的图片
    for (int i = 0; i <self.images.count; i++) {
        UIImageView *imageV = [[UIImageView alloc]init];
        imageV.image = [UIImage imageNamed:self.images[i]];
        [self.scrollView addSubview:imageV];
    }
    //设置总页数
    self.pageControl.numberOfPages = images.count;

}
// 布局子控件
- (void)layoutSubviews
{
    [super layoutSubviews];
    // 设置scrollView的尺寸
    CGFloat scrollW = self.frame.size.width;
    CGFloat scrollH = self.frame.size.height;

    //设置scrollView的frame
    self.scrollView.frame = self.bounds;
    //设置pageControl的frame
    CGFloat pageW = 100;
    CGFloat pageH = 20;
    CGFloat pageX = scrollW - pageW;
    CGFloat pageY = scrollH - pageH;
    self.pageControl.frame = CGRectMake(pageX, pageY, pageW, pageH);
    // 设置contentSize
    self.scrollView.contentSize = CGSizeMake(self.images.count * scrollW, 0);
    //设置图片的frame
    for (int i = 0; i <self.scrollView.subviews.count; i++) {
        UITableView *imageV = self.scrollView.subviews[i];
        imageV.frame = CGRectMake(i * scrollW, 0, scrollW, scrollH);
    }

}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //计算页码
    int page =  (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
    //设置页码
    self.pageControl.currentPage = page;
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self stopTimer];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
}
#pragma mark - 定时器
// 开启定时器
- (void)startTimer
{
    //创建定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    // 将定时器加到主运行循环
    [[NSRunLoop mainRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)nextPage
{
    // 跳转到下一页
    NSInteger nextPage = self.pageControl.currentPage + 1;
    if (nextPage == self.pageControl.numberOfPages) {
        nextPage = 0;
    }
    // 实现动画效果
    [self.scrollView setContentOffset:CGPointMake(nextPage * self.scrollView.frame.size.width, 0) animated:YES];
}
//停止定时器
- (void)stopTimer
{
    [self.timer invalidate];
}

#pragma mark - 设置颜色
- (void)setCurrentColor:(UIColor *)currentColor
{
    _currentColor = currentColor;
    self.pageControl.currentPageIndicatorTintColor = currentColor;
}

- (void)setOtherColor:(UIColor *)otherColor
{
    _otherColor = otherColor;
    self.pageControl.pageIndicatorTintColor = otherColor;
}
@end

效果图:

轮播图.gif

在控制器中只需要写这几行代码:

#import "ViewController.h"
#import "XBScrollView.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    XBScrollView *scrollView = [XBScrollView scrollView];
    scrollView.frame = CGRectMake(20, 200, 330, 200);
    scrollView.images = @[@"img_01",@"img_02",@"img_03",@"img_04",@"img_05"];
    scrollView.images = @[@"004",@"header1",@"header2",@"header3",@"header4"];

    scrollView.currentColor = [UIColor orangeColor];
    scrollView.otherColor = [UIColor purpleColor];
    [self.view addSubview:scrollView];
}



@end

一个简单的效果就可以了!