类似AppStore详情页

Archive for the ‘hitTest’ tag

实现带预览和分页的图片浏览功能, 类似AppStore详情页

leave a comment

转载自looyao's blog
本文链接地址:
实现带预览和分页的图片浏览功能, 类似AppStore详情页

标题可能有点让人看不懂, 的确, 我实在很难抽象出一个好的标题, 下面我来详细描述下场景.
当我们打开AppStore, 点击进入详细应用页面时, 可以看到App的截图, 左边和右边分别可以看到相邻图片的一部分, 看似实现起来比较简单, 使用UIScrollView就可以了, 但是如果设置了UIScrollView的pagingEnabled, 就需要多考虑下了.

1. 首先要考虑UIScrollView的width值是多少.

当UIScrollView的pagingEnabled为YES时, 每次自动滚动UIScrollView本身的宽度(我们要实现的是横向滚动), 我们需要让每次滚动结束之后一个图片在中间的位置. 看下边我标记过的截图(其实我是个海贼控, 嗯.).


UIScrollView的width值应该为z, 一次分页滚动后可以剩余x个像素宽度可见. 假设我们要显示的图片宽度为224, 每个图片间隔为20, 则
x + y = 224
z = x + y + 20= 244, z就是UIScrollView的宽度.

把UIScrollView居中放置, 通过设置clipsToBounds让超出UIScrollView的部分显示出来.

1
_scrollView.clipsToBounds = NO;

这样基本效果就出来了, 但是有一个问题, 超出UIScrollView的部分虽然可见了, 但是不可以通过这部分滑动UIScrollView.

2. 解决超出UIScrollView部分不触发滑动的问题.

解决这个的办法是利用UIView的 – hitTest:withEvent: 方法. 首先重写一个类继承自UIView, 滚动图片的UIScrollView放在这个自定义的view上, 重写UIView的 – hitTest:withEvent:

1
2
3
4
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{    
    return _scrollView; //把所有事件都交给UIScrollView来处理, 这样超出UIScrollView的部分也可以触发滑动了.
}

这样所有的功能就都实现了, 代码我已经提交到了github.com, 需要完整代码的点击这里.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值