QQ20170823-171633.gif
产品前几天提了一个需求，模仿淘宝商品详情的部分效果。
往上拉动的时候图片有一点下移的，并不是完全随着向上移动。头部的导航随着滑动改变透明度。点击商品按钮回到初始状态，点击详情按钮跳到详情部分。
商品图片显示我用的SDCycleScrollView。但是有些功能需要自己添加，所以我自己新建个继承了SDCycleScrollView类。右下角的图片页码，和下拉的时候图片会放大。
我整个页面使用xib布局的，所以要改变状态就只能把需要变化的约束连线出来就可以了。
使用KVO监听scrollview的偏移量来改变状态。
[self.scrollContentView addObserver:self forKeyPath:@"contentOffset"
options:NSKeyValueObservingOptionOld|NSKeyValueObservingOptionNew
context:nil];
视图消失的时候一定要记得释放
[self.scrollContentView removeObserver:self
forKeyPath:@"contentOffset"];
监听，改变需要的状态
#pragma mark - KVO
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
if ([object isEqual:self.scrollContentView] && [keyPath isEqualToString:@"contentOffset"]) {
[self refreshNavigationBar];
}
}
主要就是这些计算需要根据你的实际需求来，其他的没什么要注意的！
#pragma mark NavigationBar
- (void)refreshNavigationBar {
CGPoint offset = self.scrollContentView.contentOffset;
NSLog(@"%@",NSStringFromCGPoint(offset));
CGFloat offsetY = offset.y;
if (offset.y < 0) {
//下拉放大图片
self.imgIconTop.constant = offsetY; //图片顶部的约束
self.imgIconHeight.constant = -offsetY+UIScreenWidth;//图片高
self.imgIconWidth.constant = -offsetY+UIScreenWidth;//图片宽
[self.scrollContentView layoutIfNeeded]; //跟新约束
[self.cycleView scrollToItemAtIndex:self.currentIndex]; //修改图片位置使其在屏幕中间
} else {
//通过offset.y与 图片高度 减去自定义头部高度再减去图片下标的偏移量 比例来决定透明度
CGFloat alpha = MIN(1, fabs(offsetY/(AlphaOffSet - offsetY)));
self.customNavView.alpha = alpha;
//偏移量超过一定程度就不用改变 否则影响整体滑动，如果不存在商品详情也停止滑动
if (offsetY <= DetailOffSet - self.detailOffsetY && _webView.hidden == NO) {
self.imgIconBottom.constant = -offsetY;//图片的底部约束，
self.cycleView.pageNumberLabelOffset = offsetY;//右下角页面的位置更新
}
//更新下划线的位置
if (offsetY >= DetailOffSet - self.detailOffsetY) {
[self.customNavView selectDetailButton];
} else {
[self.customNavView selectGoodsButton];
}
}
}
demo https://github.com/TheCodeor/GoodsDetailDemo
这些东西开始一听好像很麻烦，但是想明白代理了也没啥！有问题了可以在评论里问！
