美文网首页
iOS UIScrollView嵌套二

iOS UIScrollView嵌套二

作者: 米拉_Recorder | 来源:发表于2020-09-04 14:12 被阅读0次

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

    1. ScrollView嵌套滚动

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

    ScrollView嵌套滚动.gif

    2. 轮播图背景渐变

    原理: 背景利用两个imageView,分别是currentImgViewnextImgView,同一个位置重叠。根据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

    相关文章

      网友评论

          本文标题:iOS UIScrollView嵌套二

          本文链接:https://www.haomeiwen.com/subject/farnsktx.html