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

前言

App中最常用 轮播图, 关于它的实现有很多方法 如 :** Anination, UIScrollView, UICollectionView .** 动画是另一种思路, UICollectionView 继承于 UIScrollView. 作者今天就用 UIScrollView 讲一下 , 分页效果下 滑动宽度小于屏幕宽度 露出上下页内容, 或 滑动视图之间 间隙问题 . 如图 :

一 思路整理

有些文章写过 实现方法, 是把 pagingEnabled 设为NO, 自己写出 分页效果. 这么写也可以. 作者更喜欢使用 系统的方法. 实现该效果, 有以下核心代码 :

1. pagingEnabled 设为YES, 用系统方法实现.
2. clipsToBounds 设为NO, 为了显现上下页内容
3. 分页滑动宽度 系统默认为 UIScrollView 的 width.
4. 算法公式 : **(2 * i+ 1) *b + i * a ** => 说明 : b : 图片间距一半, a : 图片宽

二 封装控件 RollView .h

#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

三 封装控件 RollView .m

#import "RollView.h"

@interface RollView ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;

@property (nonatomic, strong) NSArray *rollDataArr;   // 图片数据

@property (nonatomic, assign) float halfGap;   // 图片间距的一半

@end

@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 ->  1 * halfGap ;
         *  1 ->  3 * halfGap + a ;
         *  2 ->  5 * halfGap + 2 * a ;
              .
              .
         *  i   -> (2 * i +1) *  halfGap + i *(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];
    }
    
}

四 调用

#import "ViewController.h"
#import "RollView.h"

@interface ViewController ()<RollViewDelegate>

@property (nonatomic, strong) RollView *rollView;

@end

-(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);
    }
    
}

五 效果

以 上 !