iOS UIScrollView嵌套二

有些朋友给我发邮件让我写个demo，这给我继续写博客很大的动力。非常感谢。
这次采用不同的实现方案，但在原理上都是一样的，可以查看上一篇文章。

1. ScrollView嵌套滚动

用scrollView作为主框架视图，并使用了第三方框架TYPagerController实现左右滚动视图节省开发时间。具体实现可以参考源码。在此基础上，加了一个轮播图背景图片渐变的效果，这次主要来说说，渐变效果的实现。

ScrollView嵌套滚动.gif

2. 轮播图背景渐变

原理: 背景利用两个imageView，分别是currentImgView和nextImgView，同一个位置重叠。根据banner滚动的rate来动态的调整currentImgView的alpha，从而实现两张图片交替显示的效果。

self.currentImgView.alpha = 1-scrollRate;

2.1 计算banner滚动的rate

这里在SDCycleScrollView的基础上做了一个私有库，有需要的话可以pod引入。私有库地址: https://gitee.com/5g/MRPrivatePod 可以在podfile中添加。

source 'https://github.com/CocoaPods/Specs.git'
source 'https://gitee.com/5g/MRPrivatePod.git'

platform :ios, '10.0'
inhibit_all_warnings!

target 'projectName' do
  use_modular_headers!
  
  # Pods for projectName
  pod 'MRCycleScrollView'
end

2.2 显示图片原理

这个方法是在轮播图didScroll方法中的回调

- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollRate:(CGFloat)scrollRate currentIndex:(NSInteger)currentIndex
{
    if(self.bannerBgImgArray && currentIndex < self.bannerBgImgArray.count) {
        if(self.bannerBgImgArray.count == 1) {
            [self.currentImgView sd_setImageWithURL:[NSURL URLWithString:[self.bannerBgImgArray firstObject]]];
            self.nextImgView.image = nil;
            return;
        }
        
        NSURL *currentImgUrl = [NSURL URLWithString:[self.bannerBgImgArray objectAtIndex:currentIndex]];
        if(currentIndex == self.bannerBgImgArray.count - 1) {
            _lastImgUrl = [self.bannerBgImgArray objectAtIndex:0];
        }
        else {
            _lastImgUrl = [self.bannerBgImgArray objectAtIndex:currentIndex+1];
        }
        
        [self.currentImgView sd_setImageWithURL:currentImgUrl];
        [self.nextImgView sd_setImageWithURL:[NSURL URLWithString:_lastImgUrl]];
        
        self.currentImgView.alpha = 1-scrollRate;
    }
}

3. 关于创建私有Pod库

这里可以查看我的另外一篇文章👉 创建私有pod库

4. 总结

最近在对项目做swift的重构，包括一些组件化的开发。之后我会在这个demo的基础上用swift做一些尝试。另外Flutter和一些跨平台的开发，我个人也是很感兴趣。如果你觉得还不错的话，请关注我，大家一起学习进步。

👉 ScrollView嵌套滚动DEMO

最后编辑于：2020.09.04 14:15:28