Horizontal UICollectionView Single Line Layout

Question

I am trying to customize what should be a simple horizontal layout using a UICollectionView , moving in a circle without achieving the desired result, so any pointer or examples would be UICollectionView appreciated.

There is probably little point in inserting the code as often as often without success.

The image shows two lines: the first is one element, the correct size and center alignment. The second line has 3 elements, the first should be the same size as the element above, while the next edge of the element will only be visible, indicating another element. When an object scrolls to the left, there should be 3 visible objects; the main element is fully visible in the center, and elements 1 and 3 are visible only on the left and right edges.

I tried insetForSectionAtIndex up the paging by changing insetForSectionAtIndex , minimumLineSpacingForSectionAtIndex , minimumInteritemSpacingForSectionAtIndex .

---

Edit - December 16th

I didn’t explain this very well and did not illustrate it, so it’s better to illustrate it below. I know how to create the collection view, set the item size etc but can not get the desired layout .

This is a horizontal row with a horizontal row UICollectionView with one element always in full view, and its neighboring elements in a partial view indicate to the user more positions left or right, depending on the scroll position and the number of elements.

• when element 1 is in sight, element 2 is in partial view
• when element 2 is visible, elements 1 and 3 are in a partial image (left and right).
• when element 3 is visible, position 2 is in partial view (left).

Answer 1

Ok, I did it as follows:

with element size 288x180 for my case

1/. Set item size

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return CGSizeMake(288, 180); } 

2 /. Install insetForSectionAtIndex

 - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { //top, left, bottom, right return UIEdgeInsetsMake(0, 16, 0, 16); } 

3 /. Set minimumInteritemSpacingForSectionAtIndex to provide distance

 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { return 5; } 

4/. When creating the cell identifier, the following was performed:

 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell* cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath]; if (!cell) { cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath]; cell.contentView.width = 288; cell.contentView.backgroundColor = [UIColor whiteColor]; } return cell; } 

5/. For the paging effect to work correctly, make sure that collectionView.paging = NO and the UICollectionViewFlowLayout subclass use targetContentOffsetForProposedContentOffset to set the scrollview offset correctly

Not sure if this is the best way, but it gave me the desired result.

Answer 2

Create a collection view and set the height according to the height of the elements in YOUR SECOND LINE, and then set the scroll direction to Horizontal. Also

Here is the image attached, check the collection view settings accordingly.

The following method will set the cell width according to your second line. The first cell will be displayed on 3/4 of the screen, and the second cell on 1/4 of the screen.

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{ return CGSizeMake( (self.view.frame.size.width / 4) * 3, "YOUR SECOND ROW ITEM HEIGHT"); 

}

I did this for 5 cells on the screen. Attaching the code below.

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{ return CGSizeMake( self.view.frame.size.width / 5, 70); } -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { if(indexPath.row > pos) { if (indexPath.row - pos == 2) { pos = pos + 1; } [self changeDate]; } else if (indexPath.row == pos) { NSLog(@"Do Nothing"); } else { if (indexPath.row + 2 == pos) { pos = pos - 1; } [self changeDate1]; } //NSLog(@"%@",[arrDate objectAtIndex:indexPath.row]); } -(void)changeDate { if (pos<(arrDate.count - 2)) { pos=pos+1; [self.tpCollectionView selectItemAtIndexPath:[NSIndexPath indexPathForRow:pos inSection:0] animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally]; NSLog(@"%@",[arrDate objectAtIndex:pos]); self.lblMovieName.text =[arrDate objectAtIndex:pos]; } } -(void)changeDate1 { if(pos>2) { pos=pos-1; [self.tpCollectionView selectItemAtIndexPath:[NSIndexPath indexPathForRow:pos inSection:0] animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally]; NSLog(@"%@",[arrDate objectAtIndex:pos]); self.lblMovieName.text =[arrDate objectAtIndex:pos]; } else{ } }