美文网首页
iOS SwipeView的使用

iOS SwipeView的使用

作者: 点滴86 | 来源:发表于2016-12-20 14:39 被阅读585次

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

    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];
        }
    }
    

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

    相关文章

      网友评论

          本文标题:iOS SwipeView的使用

          本文链接:https://www.haomeiwen.com/subject/hevxvttx.html