iOS SwipeView的使用

2016-12-20  本文已影响585人  点滴86

当要实现如下图样式需求时(中间显示完整,左边和右边显示部分)

SwipeView使用1.png
我们可以使用SwipeView来实现,传送门https://github.com/nicklockwood/SwipeView
首先将SwipeView.h/m文件拖入工程,创建SwipeView并设置样式以及数据源和代理
#pragma mark - getter and setter
- (SwipeView*)mySwipeView
{
    if (_mySwipeView == nil) {
        _mySwipeView = [[SwipeView alloc] initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, 220)];
        _mySwipeView.backgroundColor = [UIColor blackColor];
        // 设置数据源和代码
        _mySwipeView.dataSource = self;
        _mySwipeView.delegate = self;
        _mySwipeView.itemsPerPage = 1;
        _mySwipeView.pagingEnabled = YES;
        
        // 设置居中对齐样式
        _mySwipeView.alignment = SwipeViewAlignmentCenter;
        // 设置首尾循环
        _mySwipeView.wrapEnabled = YES;
        _mySwipeView.truncateFinalPage = YES;
    }
    
    return _mySwipeView;
}

- (NSMutableArray*)dataArray
{
    if (_dataArray == nil) {
        _dataArray = [[NSMutableArray alloc] init];
        
        DMModel *qrModel = [[DMModel alloc] init];
        qrModel.titleStr = @"💗💗小妖超超💗💗";
        qrModel.imageName = @"qrcode";
        qrModel.signStr = @"By 点滴86";
        [_dataArray addObject:qrModel];
        
        DMModel *xzqModel = [[DMModel alloc] init];
        xzqModel.titleStr = @"💗💗深深爱过你💗💗";
        xzqModel.imageName = @"xuezhiqian";
        xzqModel.signStr = @"By 薛之谦";
        [_dataArray addObject:xzqModel];
        
        DMModel *zlyModel = [[DMModel alloc] init];
        zlyModel.titleStr = @"💗💗终于等到你💗💗";
        zlyModel.imageName = @"zhangliangying";
        zlyModel.signStr = @"By 张靓颖";
        [_dataArray addObject:zlyModel];
    }
    
    return _dataArray;
}

数据源实现

#pragma mark - SwipeViewDataSource method
- (NSInteger)numberOfItemsInSwipeView:(SwipeView *)swipeView
{
    return self.dataArray.count;
}

- (UIView *)swipeView:(SwipeView *)swipeView viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view
{
    DMModel *tempModel = [self.dataArray objectAtIndex:index];
    if (view == nil) {
        DMSubView *dmSubView = [[DMSubView alloc] initWithFrame:CGRectMake(0, 0, ([UIScreen mainScreen].bounds.size.width - 2 * 15) / 5.0 * 3.0, self.mySwipeView.bounds.size.height)];
        [dmSubView setDataModel:tempModel];
        view = dmSubView;
    } else {
        DMSubView *dmSubView = (DMSubView *)view;
        [dmSubView setDataModel:tempModel];
    }
    
    return view;
}

代理实现item大小

#pragma mark - SwipeViewDelegate method
- (CGSize)swipeViewItemSize:(SwipeView *)swipeView
{
    return CGSizeMake(([UIScreen mainScreen].bounds.size.width - 2 * 15) / 5.0 * 3.0, self.mySwipeView.bounds.size.height);
}

加载swipeView视图

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"💗💗小妖超超💗💗";
    
    [self.view addSubview:self.mySwipeView];
}

效果如下

SwipeView使用2.png

添加指示控件并在代理回调中修改指示位置

- (UIPageControl*)currentPageControl
{
    if (_currentPageControl == nil) {
        _currentPageControl = [[UIPageControl alloc] init];
        _currentPageControl.frame = CGRectMake(20, 350, 100, 30);
        _currentPageControl.numberOfPages = self.dataArray.count;
        _currentPageControl.currentPageIndicatorTintColor = [UIColor redColor];
        _currentPageControl.pageIndicatorTintColor = [UIColor blackColor];
    }
    
    return _currentPageControl;
}

- (void)swipeViewCurrentItemIndexDidChange:(SwipeView *)swipeView
{
    self.currentPageControl.currentPage = self.mySwipeView.currentPage;
}

效果图如下

SwipeView使用3.png

添加定时器实现自动轮播

- (NSTimer *)myTimer
{
    if (_myTimer == nil) {
        _myTimer = [NSTimer scheduledTimerWithTimeInterval:self.timeInterval target:self selector:@selector(scrollToNextIndex) userInfo:nil repeats:YES];
    }
    return _myTimer;
}

#pragma mark - event response
- (void)scrollToNextIndex
{
    NSInteger nextIndex = self.mySwipeView.currentItemIndex;
    nextIndex = (nextIndex + 1) % (self.dataArray.count);
    [self.mySwipeView scrollToItemAtIndex:nextIndex duration:0.5];
}

#pragma mark - private method
- (void)startTimer
{
    [self stopTimer];
    [self.myTimer setFireDate:[NSDate dateWithTimeIntervalSinceNow:self.timeInterval]];
}

- (void)pauseTimer
{
    if (![self.myTimer isValid]) {
        return;
    }
    [self.myTimer setFireDate:[NSDate distantFuture]];
}

- (void)stopTimer
{
    if ([self.myTimer isValid]) {
        [self.myTimer invalidate];
        self.myTimer = nil;
    }
}

-(void)resumeTimer
{
    if (![self.myTimer isValid]) {
        return;
    }
    [self.myTimer setFireDate:[NSDate dateWithTimeIntervalSinceNow:self.timeInterval]];
}

#pragma mark - life cycle
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    
    if (_timeInterval > 0) {
        [self startTimer];
    }
}

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];
    
    [self stopTimer];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"💗💗小妖超超💗💗";
    
    [self.view addSubview:self.mySwipeView];
    
    [self.view addSubview:self.currentPageControl];
    self.currentPageControl.center = CGPointMake(self.view.center.x, self.currentPageControl.center.y);
    
    _timeInterval = 3;
    if (_timeInterval > 0) {
        [self startTimer];
    }
}

中间显示完整,左边和右边显示部分样式并添加指示器以及自动轮播就实现啦...

上一篇下一篇

猜你喜欢

热点阅读