最近在做項目發現很多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

一個簡單的效果就可以了!