iOS UIScrollView分页滑动宽度自定义实现

   <h2>前言</h2>    <p>App中最常用 <strong>轮播图</strong> , 关于它的实现有很多方法 如 : <strong>Anination, UIScrollView, UICollectionView .</strong> 动画是另一种思路, UICollectionView 继承于 UIScrollView. 作者今天就用 UIScrollView 讲一下 , 分页效果下 滑动宽度小于屏幕宽度 露出上下页内容, 或 滑动视图之间 间隙问题 . 如图 :</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f3ce57ef9f3d626568c5c156d4310585.png"></p>    <p>分页效果下 滑动宽度小于屏幕宽度 露出上下页内容</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b2b0aca2a8a77a319f633afacce4f3f8.png"></p>    <p>滑动视图之间 间隙</p>    <h2>一 思路整理</h2>    <p>有些文章写过 实现方法, 是把 <strong>pagingEnabled</strong> 设为 <strong>NO</strong> , 自己写出 分页效果. 这么写也可以. 作者更喜欢使用 系统的方法. 实现该效果, 有以下核心代码 :</p>    <p>1) <strong>pagingEnabled</strong> 设为 <strong>YES</strong> , 用系统方法实现.</p>    <p>2) <strong>clipsToBounds</strong> 设为 <strong>NO</strong> , 为了显现上下页内容</p>    <p>3) 分页滑动宽度 系统默认为 <strong>UIScrollView</strong> 的 <strong>width</strong> .</p>    <p>4) 算法公式 : <strong> (2 <em>i+ 1)</em> b + i * a </strong> => 说明 : b : 图片间距一半, a : 图片宽</p>    <h2>二 封装控件 RollView .h</h2>    <pre>  <code class="language-objectivec">#import <UIKit/UIKit.h>    /** 设置代理 */  @protocol RollViewDelegate <NSObject>    -(void)didSelectPicWithIndexPath:(NSInteger)index;  @end      @interface RollView : UIView    @property (nonatomic, assign) id<RollViewDelegate> delegate;    /**   初始化     @param frame 设置View大小   @param distance 设置Scroll距离View两侧距离   @param gap 设置Scroll内部 图片间距   @return 初始化返回值   */  - (instancetype)initWithFrame:(CGRect)frame withDistanceForScroll:(float)distance withGap:(float)gap;    /** 滚动视图数据 */  -(void)rollView:(NSArray *)dataArr;    @end</code></pre>    <h2>三 封装控件 RollView .m</h2>    <pre>  <code class="language-objectivec">#import "RollView.h"    @interface RollView ()<UIScrollViewDelegate>    @property (nonatomic, strong) UIScrollView *scrollView;    @property (nonatomic, strong) NSArray *rollDataArr;   // 图片数据    @property (nonatomic, assign) float halfGap;   // 图片间距的一半    @end</code></pre>    <pre>  <code class="language-objectivec">@implementation RollView    - (instancetype)initWithFrame:(CGRect)frame withDistanceForScroll:(float)distance withGap:(float)gap  {        self = [super initWithFrame:frame];      if (self) {            self.halfGap = gap / 2;            /** 设置 UIScrollView */          self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(distance, 0, self.frame.size.width - 2 * distance, self.frame.size.height)];          [self addSubview:self.scrollView];          self.scrollView.pagingEnabled = YES;          self.scrollView.delegate = self;            self.scrollView.clipsToBounds = NO;            /** 添加手势 */          UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];          tap.numberOfTapsRequired = 1;          tap.numberOfTouchesRequired = 1;          [self.scrollView addGestureRecognizer:tap];          self.scrollView.showsHorizontalScrollIndicator = NO;            /** 数据初始化 */          self.rollDataArr = [NSArray array];        }          return self;  }    #pragma mark - 视图数据  -(void)rollView:(NSArray *)dataArr{        self.rollDataArr = dataArr;          //循环创建添加轮播图片, 前后各添加一张      for (int i = 0; i < self.rollDataArr.count + 2; i++) {            for (UIView *underView in self.scrollView.subviews) {                if (underView.tag == 400 + i) {                  [underView removeFromSuperview];              }          }            UIImageView *picImageView = [[UIImageView alloc] init];          picImageView.userInteractionEnabled = YES;          picImageView.tag = 400 + i ;            /**  说明           *   1. 设置完 ScrollView的width, 那么分页的宽也为 width.           *   2. 图片宽为a 间距为 gap, 那么 图片应该在ScrollView上居中, 距离ScrollView左右间距为halfGap.           *   与 ScrollView的width关系为 width = halfGap + a + halfGap.           *   3. distance : Scroll距离 底层视图View两侧距离.             *   假设 要露出上下页内容大小为 m ,   distance = m + halfGap           *           *  图片位置对应关系 :           *  0 ->  2 * halfGap ;           *  1 ->  3 * halfGap + a ;           *  2 ->  5 * halfGap + 2 * a ;                .                .           *  i   -> (2 * i +1) *  halfGap + 2 *(width - 2 * halfGap )           */              picImageView.frame = CGRectMake((2 * i + 1) * self.halfGap + i * (self.scrollView.frame.size.width - 2 * self.halfGap), 0, (self.scrollView.frame.size.width - 2 * self.halfGap), self.frame.size.height);            //设置图片          if (i == 0) {                picImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", self.rollDataArr[self.rollDataArr.count - 1]]];            }else if (i == self.rollDataArr.count+1) {                picImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", self.rollDataArr[0]]];          }else {                picImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", self.rollDataArr[i - 1]]];          }            [self.scrollView addSubview:picImageView];      }      //设置轮播图当前的显示区域      self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);      self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * (self.rollDataArr.count + 2), 0);    }    #pragma mark - UIScrollViewDelegate 方法  -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {        NSInteger curIndex = scrollView.contentOffset.x  / self.scrollView.frame.size.width;        if (curIndex == self.rollDataArr.count + 1) {            scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);      }else if (curIndex == 0){            scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width * self.rollDataArr.count, 0);      }    }    #pragma mark - 轻拍手势的方法  -(void)tapAction:(UITapGestureRecognizer *)tap{        if ([self.rollDataArr isKindOfClass:[NSArray class]] && (self.rollDataArr.count > 0)) {            [_delegate didSelectPicWithIndexPath:(self.scrollView.contentOffset.x / self.scrollView.frame.size.width)];      }else{            [_delegate didSelectPicWithIndexPath:-1];      }    }</code></pre>    <h2>四 调用</h2>    <pre>  <code class="language-objectivec">#import "ViewController.h"  #import "RollView.h"    @interface ViewController ()<RollViewDelegate>    @property (nonatomic, strong) RollView *rollView;    @end</code></pre>    <pre>  <code class="language-objectivec">-(void)creatPicRollView{            self.rollView = [[RollView alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 150) withDistanceForScroll:12.0f withGap:8.0f];        /**全屏宽滑动 视图之间间隙,  将 Distance 设置为 -12.0f*/     // self.rollView = [[RollView alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 150) withDistanceForScroll: -12.0f withGap:8.0f];     // self.rollView.backgroundColor = [UIColor blackColor];        self.rollView.delegate = self;        [self.view addSubview:self.rollView];          NSArray *arr = @[@"1.jpg",                       @"2.jpg",                       @"3.jpg"];        [self.rollView rollView:arr];  }    #pragma mark - 滚动视图协议  -(void)didSelectPicWithIndexPath:(NSInteger)index{        if (index != -1) {            NSLog(@"%ld", (long)index);      }    }</code></pre>    <h2>五 效果</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1481630fc3583e81bbb02f8ffd207b43.gif"></p>    <p>分页效果下 滑动宽度小于屏幕宽度 露出上下页内容</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0612db9b53d9bf2326344f0811bee44e.gif"></p>    <p>滑动视图之间有间隙</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/9c1be359fd1b</p>    <p> </p>