Question

我需要帮助。我该如何设计这种视图

我正在使用UICollectionView，但所有单元格都按顺序排列，即每行4个单元格。此数据来自json。因此数组大小不固定。请帮帮我怎样才能做到这一点。提前谢谢......

Answer 1

您可以使用自定义集合视图创建这样的内容，就像注释中的引用链接一样。

用于处理此设计 -

使用两个缩小的arrey创建一个网格并计算该行奇数和偶数，并创建相同的视图。

Answer 2

经过几个小时的尝试，这是我自己的逻辑，使这种视图小而易懂。希望这能解决您的问题，如果您有任何困惑，请告诉我。

试试这个 -

取两个global NSMutableArray和一个int变量，即

NSMutableArray *jsonArray; // holds sequence of value i.e. 1,2,3.....,23
NSMutableArray *sectorArray; // holds sector array
int numOfSection; // holds numberOfSections

这是viewDidLoad() -

中的主要逻辑

- (void)viewDidLoad {

    [super viewDidLoad];

    sectorArray=[[NSMutableArray alloc]init];

    jsonArray=[[NSMutableArray alloc]initWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20",@"21",@"22",@"23", nil];

    numOfSection= (int)ceilf(jsonArray.count/4.0); //devide jsonArray into section by deviding minimum cell in a row i.e. 4 for ex. 23/4 =5.75 and after ceilf() it is 6.

    int rangeVar=0; // check range for splitting jsonArray into sector.

    for (int i=0; i<numOfSection; i++) { // for loop will run 6 times i.e. 0-5

        if (rangeVar<jsonArray.count) { // check range must be less then jsonArray.count otherwise it crash the app

            if (i%2==0) { //for even/odd secionArray

                if (jsonArray.count>rangeVar+4) { // check jsonArroy count is gretter than rangeVar+4 otherwise add remaining values. Below i have evaluated jsonArray how this work.

                    [sectorArray addObject:[jsonArray subarrayWithRange:NSMakeRange(rangeVar, 4)]];//j=0-- 1234 j=2-- 10111213 j=4 19202122

                }else{

                    [sectorArray addObject:[jsonArray subarrayWithRange:NSMakeRange(rangeVar, jsonArray.count-rangeVar)]];

                }

                rangeVar+=4; // for next time range start from 4

            }else{

                if (jsonArray.count>rangeVar+5) {

                    [sectorArray addObject:[jsonArray subarrayWithRange:NSMakeRange(rangeVar, 5)]];// j=1-- 56789 j=3 1415161718 j=5 23

                }else{

                    [sectorArray addObject:[jsonArray subarrayWithRange:NSMakeRange(rangeVar, jsonArray.count-rangeVar)]];

                }

                rangeVar+=5;
            }

        }else{

            numOfSection-=1; // if you have 27 items than numOfSection is 7 but item 6 section are enough to hold all items.
        }

    }

    [self.collectionView reloadData];

}

//collectionView dataSource/Delegate methods

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    UILabel *lblNumber=[[UILabel alloc]initWithFrame:cell.contentView.frame];
    lblNumber.layer.cornerRadius=lblNumber.frame.size.height/2;
    lblNumber.layer.borderWidth=2.0;
    lblNumber.layer.borderColor=[UIColor grayColor].CGColor;
    lblNumber.layer.masksToBounds=YES;
    lblNumber.text=[NSString stringWithFormat:@"%@",[[sectorArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row]];
    lblNumber.textAlignment=NSTextAlignmentCenter;
    [cell.contentView addSubview:lblNumber];

    return cell;
}

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

    return numOfSection;
}


-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return [[sectorArray objectAtIndex:section] count];
}

// horizontally center align all cells

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    NSInteger cellCount = [collectionView.dataSource collectionView:collectionView numberOfItemsInSection:section];
    if( cellCount >0 )
    {
        CGFloat cellWidth = ((UICollectionViewFlowLayout*)collectionViewLayout).itemSize.width+((UICollectionViewFlowLayout*)collectionViewLayout).minimumInteritemSpacing;
        CGFloat totalCellWidth = cellWidth*cellCount;
        CGFloat contentWidth = collectionView.frame.size.width-collectionView.contentInset.left-collectionView.contentInset.right;
        if( totalCellWidth<contentWidth )
        {
            CGFloat padding = (contentWidth - totalCellWidth) / 2.0;
            return UIEdgeInsetsMake(10, padding, 0, padding);
        }
    }
    return UIEdgeInsetsZero;
}

这背后的主要逻辑是将数组拆分为子数组，并将section作为subarrays的数量，并将所有subarrays添加到一个mutableArray中。而不是使用这个mainArray。

这是输出：

如何使用UICollectionView创建这种视图？

2 个答案: