前言
App中最常用 轮播图, 关于它的实现有很多方法 如 :Anination, UIScrollView, UICollectionView 动画是另一种思路, UICollectionView 继承于 UIScrollView. 作者今天就用 UIScrollView 讲一下 , 分页效果下 滑动宽度小于屏幕宽度 露出上下页内容, 或 滑动视图之间 间隙问题 . 如图 :
分页效果下 滑动宽度小于屏幕宽度 露出上下页内容
滑动视图之间 间隙
一 思路整理
有些文章写过 实现方法, 是把 pagingEnabled 设为NO, 自己写出 分页效果. 这么写也可以. 作者更喜欢使用 系统的方法. 实现该效果, 有以下核心代码 :
- pagingEnabled 设为YES, 用系统方法实现.
- clipsToBounds 设为NO, 为了显现上下页内容
- 分页滑动宽度 系统默认为 UIScrollView 的 width.
- 算法公式 : **(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);
}
}
五 效果
分页效果下 滑动宽度小于屏幕宽度 露出上下页内容
**滑动视图之间有间隙**
以 上 !
