CollectionView按钮联动

CollectioView滚动到指定section的方法
CollectionView按钮联动

实现1：点击按钮，CollectionView滚动到指定位置
实现2：滑动CollectionView，根据屏幕中心判断某按钮高亮

这里贴下最近刚写的需求代码，希望能帮到有需要的人，欢迎留言

IMG_0381.PNG

按钮九宫格代码创建

    CGFloat sudokuViewY = self.topCateGoryCollectionView.mj_y + self.topCateGoryCollectionView.mj_h+10;
    CGFloat sudokuViewW = YPWidthOfScreen-20;
    UIView *sudokuView = [[UIView alloc]initWithFrame:CGRectMake(10, sudokuViewY, sudokuViewW, 100)];
    sudokuView.backgroundColor = [UIColor blueColor];
    [self.topView addSubview:sudokuView];
    
    self.btnArray = [NSMutableArray array];
    for (int i=0; i<self.listTitleArray.count; i++) {
        CGFloat btnMargin = 5;
        CGFloat btnW = (sudokuViewW - btnMargin*2) / 3;
        CGFloat btnH = 30;
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.tag = BtnTag+i;
        [button.titleLabel setFont:[UIFont boldSystemFontOfSize:12]];
        HeadTagModel *model = self.listTitleArray[i];
        [button setTitle:model.Name forState:UIControlStateNormal];
        [button setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];
        [button setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
        [button setBackgroundImage:[UIImage WY_imageWithColor:[UIColor whiteColor]] forState:UIControlStateNormal];
        [button setBackgroundImage:[UIImage WY_imageWithColor:[UIColor orangeColor]] forState:UIControlStateSelected];
        [button setBackgroundImage:[UIImage WY_imageWithColor:[UIColor orangeColor]] forState:UIControlStateHighlighted];
        button.layer.cornerRadius = btnH*0.5;
        button.layer.masksToBounds = YES;
        [button.layer setBorderColor:[UIColor orangeColor].CGColor];
        [button.layer setBorderWidth:1.0];
        [button addTarget:self action:@selector(clickSudokuViewBtn:) forControlEvents:UIControlEventTouchUpInside];
        if (i >= 0 && i < 3) {
            [button setFrame:CGRectMake(0+i*btnMargin+i*btnW, 0, btnW, btnH)];
        }else if(i >= 3 && i < 6){
            NSInteger num = i-3;
            [button setFrame:CGRectMake(0+num*btnMargin+num*btnW, btnH+btnMargin, btnW, btnH)];
        }else{
            NSInteger num = i-6;
            [button setFrame:CGRectMake(0+num*btnMargin+num*btnW, 2*btnH+btnMargin*2, btnW, btnH)];
        }
        if (i == 0) {
            self.selectedBtn = button;
            [self clickSudokuViewBtn:button];
        }
        [sudokuView addSubview:button];
        [self.btnArray addObject:button];
    }

按钮点击事件

-(void)clickSudokuViewBtn:(UIButton *)btn{
    //点击滚动到指定位置
//保证collectionView全部加载完毕，我这里通过一个bool的标志位来标示
    if (self.Is_ListLoad) {
        NSInteger index = btn.tag - BtnTag;
        [self.listCollectionView layoutIfNeeded ];
        NSIndexPath* cellIndexPath = [NSIndexPath indexPathForItem:0 inSection:index];
        UICollectionViewLayoutAttributes* attr = [self.listCollectionView.collectionViewLayout layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeader atIndexPath:cellIndexPath];
        UIEdgeInsets insets = self.listCollectionView.scrollIndicatorInsets;
        CGRect rect = attr.frame;
        rect.size = self.listCollectionView.frame.size;
        rect.size.height -= insets.top + insets.bottom;
        CGFloat offset = (rect.origin.y + rect.size.height) - self.listCollectionView.contentSize.height;
        if ( offset > 0.0 ) rect = CGRectOffset(rect, 0, -offset);
        [self.listCollectionView scrollRectToVisible:rect animated:YES];
    }
    //按钮颜色
    if (btn!= self.selectedBtn) {
        self.selectedBtn.selected = NO;
        btn.selected = YES;
        self.selectedBtn = btn;
    }else{
        self.selectedBtn.selected = YES;
    }
}

//加载完毕
-(void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (collectionView == self.listCollectionView) {
        if([indexPath row] == ((NSIndexPath*)[[self.listCollectionView indexPathsForVisibleItems] lastObject]).row){
            self.Is_ListLoad = YES;
        }
    }
}

滚动CollectionView，按钮高亮，用2个停止监听代理，容错高

#pragma mark - scrollView 停止滚动监测
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
// 停止类型1
    if (scrollView == self.listCollectionView) {
        BOOL scrollToScrollStop = !scrollView.tracking && !scrollView.dragging && !scrollView.decelerating;
        if (scrollToScrollStop) {
            [self scrollViewDidEndScroll];
        }
    }
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (scrollView == self.listCollectionView) {
        if (!decelerate) {
            // 停止类型2
            BOOL dragToDragStop = scrollView.tracking && !scrollView.dragging && !scrollView.decelerating;
            if (dragToDragStop) {
                [self scrollViewDidEndScroll];
            }
        }
    }
}

- (void)scrollViewDidEndScroll {
    UICollectionViewLayoutAttributes *attribute = [self.listCollectionView.collectionViewLayout layoutAttributesForElementsInRect:(CGRect){.origin = self.listCollectionView.contentOffset, .size = self.listCollectionView.bounds.size}][0];
    UIEdgeInsets insets = self.listCollectionView.scrollIndicatorInsets;
    CGRect rect = attribute.frame;
    rect.size = self.listCollectionView.frame.size;
    rect.size.height -= insets.top + insets.bottom;
    CGFloat offset = (rect.origin.y + rect.size.height) - self.listCollectionView.contentSize.height;
    if ( offset > 0.0 ) rect = CGRectOffset(rect, 0, -offset);
    attribute.frame = rect;
    CGPoint visiblePoint = CGPointMake(CGRectGetMidX(attribute.frame), CGRectGetMidY(attribute.frame));
    NSIndexPath *indexPath = [self.listCollectionView indexPathForItemAtPoint:visiblePoint];
    UIButton *button = self.btnArray[indexPath.section];
    [self testBtn:button];
}