zoukankan      html  css  js  c++  java
  • UIScrollView的无限左滑轮播一点也不难

    UIScrollView的轮播在如今的app中用得十分广泛,最初实现的时候方式比较拙劣,滚动到最后一个视图时再返回到第一个看起来非常的不连贯。

    今天查询UIScrollView轮播资料,总结两种比较喜欢也易于理解的方法:

    1、UIScrollView显示的子视图左右各放一个多出来的子视图,如本来有A/B/C三张图片,在A前面放一个ImageView显示C,在C后天放一个ImageView显示A,即C/A/B/C/A。

    初始化ScrollView的时候,contentoffset 从A开始,然后 setContentOffset:offSetanimated:YES 依次轮播,当播放到C之后,跳转到A后,在

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView 中替换其contentoffset为第一个A的contentoffset。

    代码如下:

    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 0, 300, 300)];
        _scrollView.frame = CGRectMake(10, 0, 300, 300);
        _scrollView.contentSize = CGSizeMake(300*5, 300);
        _scrollView.contentOffset = CGPointMake(300, 0);
        _scrollView.delegate = self;
        
        [self.view addSubview:_scrollView];
        
        UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
        imageView1.image = [UIImage imageNamed:@"3.jpg"];
        [_scrollView addSubview:imageView1];
        
        UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(300, 0, 300, 300)];
        imageView2.image = [UIImage imageNamed:@"1.jpg"];
        [_scrollView addSubview:imageView2];
        
        UIImageView *imageView3 = [[UIImageView alloc] initWithFrame:CGRectMake(300*2, 0, 300, 300)];
        imageView3.image = [UIImage imageNamed:@"2.jpg"];
        [_scrollView addSubview:imageView3];
     
        UIImageView *imageView4 = [[UIImageView alloc] initWithFrame:CGRectMake(300*3, 0, 300, 300)];
        imageView4.image = [UIImage imageNamed:@"3.jpg"];
        [_scrollView addSubview:imageView4];
        
        UIImageView *imageView5 = [[UIImageView alloc] initWithFrame:CGRectMake(300*4, 0, 300, 300)];
        imageView5.image = [UIImage imageNamed:@"1.jpg"];
        [_scrollView addSubview:imageView5];
        
        //  设置时钟动画 定时器
        NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(update:) userInfo:nil repeats:YES];
        //  将定时器添加到主线程
        [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
    }
    

    - (void)update:(NSTimer *)timer{
        CGPoint offSet = self.scrollView.contentOffset;
        offSet.x += 300;
        [self.scrollView setContentOffset:offSet animated:YES];
    }
    
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        CGFloat X = self.scrollView.contentOffset.x;
        if (X == 0) {
            self.scrollView.contentOffset = CGPointMake(300*3, 0);
        }
        if (X == 300*4) {
             self.scrollView.contentOffset = CGPointMake(300, 0);
        }
    }
    这是方法1。里面的图片是随意在网上找的。

    2、方法二是用固定的三个UIImageView控件,然后替换其图片来实现。

    具体思路:先初始化三个图片控件,然后第一个控件放最后一张图,第二个图片放第一张图,第三个控件放第2张图。如轮播A/B/三个图片时,显示顺序是C/A/B。

    后面的思路与上面类似,只不过要进行image替换。直接上代码:

    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        UIScrollView *scrollView =[[UIScrollView alloc] init];
        scrollView.frame = CGRectMake(0, 0, width, height);
        [self.view addSubview:scrollView];
        self.scrollView = scrollView;
        [self.scrollView setContentSize:CGSizeMake(width * 3, height)];
        //  设置隐藏横向条
        self.scrollView.showsHorizontalScrollIndicator = NO;
        //  设置自动分页
        self.scrollView.pagingEnabled = YES;
        //  设置代理
        self.scrollView.delegate = self;
        //  设置当前点
        self.scrollView.contentOffset = CGPointMake(width, 0);
        //  设置是否有边界
        self.scrollView.bounces = NO;
        
        
        //  初始化当前视图
        UIImageView *currentImageView =[[UIImageView alloc] init];
        currentImageView.image = [UIImage imageNamed:@"1.jpg"];
        [self.scrollView addSubview:currentImageView];
        self.currentImageView = currentImageView;
        self.currentImageView.frame = CGRectMake(width, 0, width, height);
        self.currentImageView.contentMode = UIViewContentModeScaleAspectFill;
        //  初始化下一个视图
        UIImageView *nextImageView = [[UIImageView alloc] init];
        nextImageView.image = [UIImage imageNamed:@"2.jpg"];
        [self.scrollView addSubview:nextImageView];
        self.nextImageView = nextImageView;
        self.nextImageView.frame = CGRectMake(width * 2, 0, width, height);
        self.nextImageView.contentMode = UIViewContentModeScaleAspectFill;
        //  初始化上一个视图
        UIImageView *preImageView =[[UIImageView alloc] init];
        preImageView.image = [UIImage imageNamed:@"3.jpg"];
        preImageView.frame = CGRectMake(0, 0, width, height);
        [self.scrollView addSubview:preImageView];
        self.preImageView = preImageView;
        self.preImageView.contentMode =UIViewContentModeScaleAspectFill;
        
        //  设置时钟动画 定时器
        self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(update:) userInfo:nil repeats:YES];
        //  将定时器添加到主线程
        [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
        
    }
    - (void)update:(NSTimer *)timer{
        //定时移动
        if (_isDragging == YES) {
            return ;
        }
        CGPoint offSet = self.scrollView.contentOffset;
        offSet.x +=offSet.x;
        [self.scrollView setContentOffset:offSet animated:YES];
         
    }
    // 开始拖动
    - (void) scrollViewDidScroll:(UIScrollView *)scrollView{
        static int i =1; //   当前展示的是第几张图片
        float offset = self.scrollView.contentOffset.x;
        if (self.nextImageView.image == nil || self.preImageView.image == nil) {
            //  加载下一个视图
            NSString *imageName1 = [NSString stringWithFormat:@"%d.jpg",i == KOUNT ? 1:i +1];
            _nextImageView.image = [UIImage imageNamed:imageName1];
            // 加载上一个视图
            NSString *imageName2 = [NSString stringWithFormat:@"%d.jpg",i==1 ? KOUNT :i-1];
            _preImageView.image = [UIImage imageNamed:imageName2];
        }
        if(offset ==0){
            _currentImageView.image = _preImageView.image;
            scrollView.contentOffset = CGPointMake(width, 0);
            _preImageView.image = nil;
            if (i == 1) {
                i =KOUNT;
            } else{
                i-=1;
            }
        }
        if (offset == width * 2) {
            _currentImageView.image = _nextImageView.image;
            scrollView.contentOffset = CGPointMake(width, 0);
            _nextImageView.image = nil;
            if (i == KOUNT) {
                i  =1 ;
            }else{
                i +=1 ;
            }
        }
        
    }
    主要思路都是在滑动的动画执行完毕后,在用非动画方法移动的相同区域。

  • 相关阅读:
    第三周作业
    第二周作业
    第一次作业(2)
    第一次作业
    百度翻译新API C#版在 winform,Asp.Net的小程序
    ajax 里的数据请求
    结合css与javascript来实现手机移动端的屏幕滑动效果
    js公农历互转(1900~2100年)
    webpack命令
    vscode快速输出console.log
  • 原文地址:https://www.cnblogs.com/wanghang/p/6298876.html
Copyright © 2011-2022 走看看