如何使用UICollectionView制作这种视图？

Question

I need help. How can I design this kind of view

I'm using UICollectionView for this but all cell comes in a sequence ie 4 cell in each row. This Data is coming from json . So that array size is not fixed. Please help me how can I do this. Thanks in advance...

Answer 1

You can create like this by using the custom collection view something like same as reference link in comment .

for handling the this design-

create a grid by using two diminutional arrey and calculate the row odd and even and create like same view.

Answer 2

After trying a couple of hours, here is my own logic to make this kind of view which is small and easy to understand. Hope this will solve your problem and let me know if you have any confusion.

Try this-

Take two global NSMutableArray and an int variable ie

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

here is the main logic in 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;
}

the main logic behind this is to split array into subarray and make different section as number of subarrays and add all subarrays into one mutableArray . Than work with this mainArray.

Here is the output: