美文网首页iOS实践汽车公司可能用到的知识点iOS常用
iOS ~ UICollectionView 横向分页滑动,ce

iOS ~ UICollectionView 横向分页滑动,ce

作者: 阳光下的叶子呵 | 来源:发表于2021-10-26 18:06 被阅读0次

    cell 排序

    横向滑动的时候,竖着排列。
    竖向滑动的时候,横着排列

    Object-C:
    1、横向分页滚动的UICollectionView,cell左右排版的简单实现
    2、横向分页滚动的UICollectionView,cell左右排版
    3、关于UICollectionView横向分页滚动,cell左右排版功能的实现

    swift:
    iOS UICollectionView 横向分页布局

    笨办法 swift:思路更简单 UICollectionView 横屏分页,cell 左右排列 ios

    小圆点:控件 UIPageControl
    下面这种需求应该是会经常遇到的:

    需求:固定高度一个区域,里面左右分页显示很多个图标,在每一页中的图标先从左往右排,排满后再从上往下排。这一页排满后排下一页。
    图中这样的:上面cell的顺序我已经标出来了。

    image

    像这样的需求,第一反应是用UICollectionView来写,用UICollectionViewFlowLayout,然后设置为横向的。但是,采用这种方式来写,出来的效果就会是这样的:

    image

    那么还可以怎么实现?可以用大的cell包5个小图标在里面。这样实现按说没问题,但是如果单个图标这里复杂一点,就需要调很久了,而且如果要根据屏幕尺寸来定每行显示的图标个数也很麻烦。

    子类化 UICollectionViewFlowLayout

    1、KHomeNewRecommendFunctionFlowLayout.h

    @interface KHomeNewRecommendFunctionFlowLayout : UICollectionViewFlowLayout
    
    // 一行中 cell的个数
    @property (nonatomic) NSUInteger itemCountPerRow;
    // 一页显示多少行
    @property (nonatomic) NSUInteger rowCount;
    
    @end
    

    2、KHomeNewRecommendFunctionFlowLayout.m

    #import "KHomeNewRecommendFunctionFlowLayout.h"
    
    @interface KHomeNewRecommendFunctionFlowLayout ()
    
    @property (strong, nonatomic) NSMutableArray *allAttributes;
    
    @end
    
    @implementation KHomeNewRecommendFunctionFlowLayout
    
    /**
        这里只简单的实现只支持1个section,而且section的items个数必须是 itemCountPerRow * rowCount 的整数倍。这里需要在UICollectionView的代理里面做好数组越界检查,防止数组越界造成崩溃。
     */
    
    
    - (void)prepareLayout {
        [super prepareLayout];
        
        self.allAttributes = [NSMutableArray arrayWithCapacity:0];
        // iCount section==0 的cell个数
        NSInteger iCount = [self.collectionView numberOfItemsInSection:0];
        for (NSInteger i = 0; i < iCount; i++) {
            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
            UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
            [self.allAttributes addObject:attributes];
        }
    }
    
    - (CGSize)collectionViewContentSize {
        return [super collectionViewContentSize];
    }
    
    - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
        NSUInteger item = indexPath.item; // 第几个item
        NSUInteger x; // 该item的 x坐标
        NSUInteger y; // 该item的 y坐标
        
        [self targetPositionWithItem:item resultX:&x resultY:&y];
        
        NSUInteger item2 = [self originItemAtX:x y:y];
        
        NSIndexPath *newIndexPath = [NSIndexPath indexPathForItem:item2 inSection:indexPath.section];
        UICollectionViewLayoutAttributes *newAttributes = [super layoutAttributesForItemAtIndexPath:newIndexPath];
        newAttributes.indexPath = indexPath;
        return newAttributes;
        
    }
    
    - (NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
        
        NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
        
        NSMutableArray *tmps = [NSMutableArray arrayWithCapacity:0];
        
        for (UICollectionViewLayoutAttributes *bute1 in attributes) {
            for (UICollectionViewLayoutAttributes *bute2 in self.allAttributes) {
                if (bute1.indexPath.item == bute2.indexPath.item) {
                    [tmps addObject:bute2];
                    break;
                }
            }
        }
        
        return tmps;
    }
    
    // 根据 item 计算目标item的位置 // (第几个item)
    // x 横向偏移  y 竖向偏移
    - (void)targetPositionWithItem:(NSUInteger)item
                           resultX:(NSUInteger *)x
                           resultY:(NSUInteger *)y {
        
        NSUInteger page = item/(self.itemCountPerRow * self.rowCount); // 第几页(左右翻页): 每行的cell个数 * 几行
        
        NSUInteger itemX = item % self.itemCountPerRow + page * self.itemCountPerRow; //
        NSUInteger itemY = item / self.itemCountPerRow - page * self.rowCount; //
         
        if (x != NULL) {
            *x = itemX;
        }
        if (y != NULL) {
            *y = itemY;
        }
    }
    
    // 根据偏移量计算item的origin
    - (NSUInteger)originItemAtX:(NSUInteger)x
                              y:(NSUInteger)y {
        NSUInteger item = x * self.rowCount + y;
        return item;
    }
    
    
    @end
    

    3、实现:在数组没有的可以添加几个空白的cell数据

    self.arySort = [NSMutableArray arrayWithObjects:
        @{@"name" : @"学习", @"icon" : @"KHome_学习", @"tagIcon":@"KHome_学习图标", @"num":@"1"},
        @{@"name" : @"考试", @"icon" : @"KHome_考试", @"tagIcon":@"KHome_考试图标", @"num":@"2"},
        
    
                        @{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"14"},
                        @{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"15"},
                        @{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"16"},
                        @{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"17"},
                        @{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"18"},
                        @{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"19"},
                        nil];
        KHomeNewRecommendFunctionFlowLayout *layout = [[KHomeNewRecommendFunctionFlowLayout alloc] init];
        layout.itemCountPerRow = 5; // 每行几个item
        layout.rowCount = 2; // 一页显示几行
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        layout.sectionFootersPinToVisibleBounds = NO;
        layout.sectionHeadersPinToVisibleBounds = NO;
        
        UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
        collectionView.backgroundColor = [UIColor whiteColor];
        collectionView.delegate = self;
        collectionView.dataSource = self;
        collectionView.showsHorizontalScrollIndicator = NO;
        collectionView.pagingEnabled = YES;
        [self.contentView addSubview:collectionView];
        [collectionView makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(self.mas_top);
            make.left.mas_equalTo(self.mas_left).offset([UIScreen mainScreen].bounds.size.width/375*12.5);
            make.right.mas_equalTo(self.mas_right).offset(-[UIScreen mainScreen].bounds.size.width/375*12.5);
            make.bottom.mas_equalTo(self.mas_bottom);
        }];
        self.collectionView = collectionView;
        [self.collectionView registerClass:[KHomeNewRecommendFunctionCollectionCell class] forCellWithReuseIdentifier:NSStringFromClass([KHomeNewRecommendFunctionCollectionCell class])];
        
        //设置的边界 12.5*2 + 10*2 + 20*4 + 50*5 = 375
    

    需要注意的

    我这个简单的实现只支持1个section,而且section的items个数必须是 itemCountPerRow * rowCount 的整数倍。这里需要在UICollectionView的代理里面做好数组越界检查,防止数组越界造成崩溃。
    完整的实现以后再说吧,现在这样已经满足需求了。

    相关文章

      网友评论

        本文标题:iOS ~ UICollectionView 横向分页滑动,ce

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