前段时间，有个朋友让我帮忙做一个图片在UIScrollView滑动翻页的效果，只不过图片宽度只有屏幕的一半，屏幕左边展示上一张图片右半部分，屏幕中间展示当前图片全部，屏幕右边展示下一张图片的左半部分，而且每次滑动半个屏幕，将下一个图片移动屏幕中央，要实现的效果图如下。
要实现的效果图
-
方法误区
本来我以为很简单的事情，只要将pagingEnabled设置为NO，然后在代理方法中，算出滑动的距离，滑动结束后改变scrollView的contentOffset就行啦，结果出乎意料，将pagingEnabled设置为NO后，每次滑动效果跟我预期的不太一样，所以只能寻找其他办法。（当然也有可能是笔者技术不够，试了好几个代理方法都没有实现半页滑动，有兴趣的朋友可以在研究研究这种办法）。 -
最终实现
网上查询了很多帖子，看到了别人一个特别巧妙的办法，特此分享给大家。方法如下： -
创建一个继承于UIView的类HalfPageRoundScrollView，并添加scrollView和imageView
-(instancetype)initWithFrame:(CGRect)frame
{
self=[super initWithFrame:frame];
if (self) {
//添加ScrollView
[self addScrollView];
//添加图片控件
[self addImageView];
}
return self;
}
- 将scrollView的clipsToBounds设置为NO，宽度设置为屏幕的一半（就是自定义的翻页宽度）pagingEnabled设为YES
#pragma mark---添加ScrollView
-(void)addScrollView
{
_myScrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(WIDTH/4, 0, WIDTH/2, self.bounds.size.height)];
_myScrollView.pagingEnabled=YES;
_myScrollView.clipsToBounds=NO;
_myScrollView.bounces=NO;
_myScrollView.showsHorizontalScrollIndicator=NO;
_myScrollView.contentSize=CGSizeMake(WIDTH/2*self.dataArr.count, self.bounds.size.height);
[self addSubview:_myScrollView];
}
- 在scrollView上添加imageView控件。
#pragma mark---添加图片控件
-(void)addImageView
{
for (NSInteger i=0; i<self.dataArr.count; i++) {
_myImageView=[[UIImageView alloc]initWithFrame:CGRectMake(WIDTH/2*i, 0, WIDTH/2, self.bounds.size.height)];
_myImageView.image=[UIImage imageNamed:self.dataArr[i]];
[_myScrollView addSubview:_myImageView];
}
}
- 修改HalfPageRoundScrollView中的hitTest方法，目的是为了确保用户滑动scrollview以外的空间时也可以触发scrollview滑动。（因为scrollView的宽度只有屏幕的一半，修改这个方法后，滑动屏幕的左右边缘也可以保证中间的scrollview滑动）
#pragma mark---修改hitTest方法
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
UIView *view = [super hitTest:point withEvent:event];
if ([view isEqual:self]){
for (UIView *subview in _myScrollView.subviews){
CGPoint offset = CGPointMake(point.x - _myScrollView.frame.origin.x + _myScrollView.contentOffset.x - subview.frame.origin.x, point.y - _myScrollView.frame.origin.y + _myScrollView.contentOffset.y - subview.frame.origin.y);
if ((view = [subview hitTest:offset withEvent:event])){
return view;
}
}
return _myScrollView;
}
return view;
}
- 在ViewController.m导入HalfPageRoundScrollView.h文件，然后创建出来就可以啦
- (void)viewDidLoad {
[super viewDidLoad];
HalfPageRoundScrollView *halfPage=[[HalfPageRoundScrollView alloc]initWithFrame:CGRectMake(0, 100, WIDTH, 200)];
[self.view addSubview:halfPage];
}
基本上就完成啦，最后来个效果动图（图片不太清晰，就是每次滑动移动半个屏幕）：
半页滑动.gif
笔者的其他文章：
iOS开发-两句代码快速实现无限轮播图（基于ScrollView封装）
http://www.jianshu.com/p/d240bd977689
iOS开发-一句代码调用自动消失的简易弹框（UIAlertView+NSTimer封装）
http://www.jianshu.com/p/f9b06fe27584
iOS开发-一句代码调用实现网络的监测功能（基于AFNetworkReachabilityManager的封装）
http://www.jianshu.com/p/b901ad0c1d81
如果有不足或者错误的地方还望各位读者批评指正，可以评论留言，笔者收到后第一时间回复。
QQ/微信：790057066 。
简书号：iOS_凯：http://www.jianshu.com/users/86b0ddc92021/latest_articles
GitHub个人主页（欢迎star）：https://github.com/18811314750
感谢各位观众老爷的阅读，如果觉得笔者写的还凑合，可以关注或收藏一下，不定期分享一些好玩的实用的demo给大家。
网友评论