Centre UICollectionView Cells Horizontally

I am new into iOS app development. I had to do this for a project recently so thought I would share.

Introduction to Collection View Overview:

UICollectionView generalizes the familiar patterns of UITableView to make any layout possible. It manages a collection of ordered items on the screen using layouts. The patterns for providing data to a UICollectionView to create items and interact with those items, follow the same delegation and data source patterns commonly used in iOS.

However, Collection View works with a layout subsystem that is independent of the UICollectionView itself. Therefore, simply providing a different layout can easily change the presentation of a Collection View.

iOS provides a layout class called UICollectionViewFlowLayout that allows line-based layouts such as a grid to be created with no additional work. Also, custom layouts can also be created that allow any presentation you can imagine.

Cells

Cells are objects that represent a single item in the data set that is being presented by the collection view. Each cell is an instance of the UICollectionViewCell class, which is composed of three different views, as shown in the figure below:

The UICollectionViewCell class has the following properties for each of these views:

• ContentView – This view contains the content that the cell presents. It is rendered in the topmost z-order on the screen.
• SelectedBackgroundView – Cells have built in support for selection. This view is used to visually denote that a cell is selected. It is rendered just below the ContentView when a cell is selected.
• BackgroundView – Cells can also display a background, which is presented by the BackgroundView . This view is rendered beneath the SelectedBackgroundView .

By setting the ContentView such that it is smaller than the BackgroundView and SelectedBackgroundView, the BackgroundView can be used to visually frame the content, while the SelectedBackgroundView will be displayed when a cell is selected, as shown below:

Procedure:

CollectionView Cells Horizontally Center Alignment Position

step 1: set the collection view Scroll Direction : Horizontal

step 2: set the Constraint to collection view.

– height fixed.

– vertically centre

– set (zero) leading space and trailing space to source view.

step 3: Before Using the below code know about the following terms.

– frame width

– collectionView Cell width

– collectionView insets(left)

 var insets = self.collectionView.contentInset
frameWidth = self.view.frame.size.width
       collectionViewWidth = (self.collectionView1.collectionViewLayout as! UICollectionViewFlowLayout).itemSize.width
        leftInsets = (frameWidth! – (collectionViewWidth! * CGFloat(strImages.count))) * 0.5 – (CGFloat(strImages.count-1) * 5)
        if leftInsets <= 0 {
           leftInsets = 0
        }
        insets.left = leftInsets!
        self.collectionView1.contentInset =  insets

sample output (one image):

sample output (two images):

sample output (four images):

sample output (Three images in Portrait):

This blog is useful to know about CollectionViewCell Position. Please make use of it.

Gowthaman,
iOS Developer,
Mallow Technologies.