iOS开发-实现UIScrollView自定义翻页宽度(每次滑动半页)

前段时间,有个朋友让我帮忙做一个图片在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给大家。

推荐阅读更多精彩内容