手写代码给ScrollView添加约束（Masonry）

最新推荐文章于 2023-10-19 17:20:20 发布

原创最新推荐文章于 2023-10-19 17:20:20 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

iOS适配专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在UICollectionView的头部视图中实现轮播图功能，通过手写代码并利用Masonry库来添加约束，确保ScrollView正确滚动和布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：给collectionView的头视图添加轮播图

子类化一个view，里面处理Scrollview的轮播机制。

- (instancetype)init
{
    self = [super init];
    if (self) {
        UIScrollView *scrollView = UIScrollView.new;
        self.bannerScrollView = scrollView;
        [self addSubview:scrollView];
        //1、给scrollView加约束
        [self.bannerScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self);
        }];
        //根据需求设置scrollView的属性
        self.bannerScrollView.pagingEnabled = YES;//分页
        self.bannerScrollView.showsHorizontalScrollIndicator = NO;//隐藏水平滚动条
        self.bannerScrollView.delegate = self;
        self.bannerScrollView.bounces = NO;
        
        //创建pageControl
        self.bannerPageControl = UIPageControl.new;
        self.bannerPageControl.currentPage = 0;
        [self addSubview:self.bannerPageControl];
        [self.bannerPageControl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(self.mas_centerX);
            make.height.equalTo(@10);
            make.bottom.equalTo(self.mas_bottom).offset(-10);
            make.width.equalTo(@40);
        }];
        
        _currentPage = 0;
    }
    return self;
}
//传入几张图片就展示几张图片，灵活控制
- (void)setBannerImageArray:(NSArray *)bannerImageArray
{
    if (_bannerImageArray != bannerImageArray) {
        _bannerImageArray = bannerImageArray;
        [self generateContent];
        self.bannerPageControl.numberOfPages = _bannerImageArray.count;
    }
    [self addTimer];
}
- (void)generateContent {
    //2、给scrollview添加一个参照的contentView，约束都参照着contentview添加
    UIView* contentView = UIView.new;
    [self.bannerScrollView addSubview:contentView];
    
    [contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.bannerScrollView);
        //下面要用到contentView的height的时候，约束里要先明确的把height表示出来
        make.height.equalTo(self.bannerScrollView);
    }];
    
    //3、循环添加图片
    UIImageView *lastImageView;
    for (int i = 0; i < _bannerImageArray.count; i++) {
        UIImageView *imageView = UIImageView.new;
        imageView.image = [UIImage imageNamed:_bannerImageArray[i]];
        [contentView addSubview:imageView];
        
        [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(@0);
            make.leading.equalTo(lastImageView ? lastImageView.mas_trailing : @0);//如果有上一张图片，当前图片的左边连接上一张的右边
            make.width.equalTo(@(SCREEN_WIDTH));
            make.height.equalTo(contentView.mas_height);
        }];
        lastImageView = imageView;
    }
    
    //4、因为添加多张图片，需要更新contentView的约束，不更新contentView只能显示一张图片
    [contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(lastImageView.mas_right);
    }];
    [self addTimer];
}

//添加定时器
- (void)addTimer
{
    if (!_timer) {
        _timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(scrollToNextPage) userInfo:nil repeats:YES];
    }
}
- (void)scrollToNextPage
{
    _currentPage ++;
    if (_currentPage == _bannerImageArray.count) {
        [self.bannerScrollView setContentOffset:CGPointMake(0, 0) animated:NO];
        _currentPage = 0;
    }else{
        [self.bannerScrollView setContentOffset:CGPointMake(_currentPage * SCREEN_WIDTH, 0) animated:YES];
    }
    self.bannerPageControl.currentPage = _currentPage;
    GLog(@"滚动呢啊啊啊啊啊 ");
}
#pragma mark - UIScrollViewDelegate
//停止滑动图片(scrollView)时调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    _currentPage = floor((scrollView.contentOffset.x-SCREEN_WIDTH/2)/SCREEN_WIDTH)+1;
    self.bannerPageControl.currentPage = _currentPage;
    GLog(@"当前处于第%ld页",_currentPage);
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [_timer invalidate];
    _timer = nil;
}