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

2016-07-28 本文已影响4763人 iOS_凯

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

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

猜你喜欢

热点阅读