Tag Archives: Grid Layout

Building App of the Day card in 50 lines of Swift using GridLayout

In this tutorial I’m going to explain how to build an App of the Day card in Swift using GridLayout.
GridLayout is a Swift library for displaying UI elements in a grid like structure. GridLayout is available on GitHub.

To install GridLayout add the following to your Podfile:

pod 'GridLayout'

Here is the final layout that was build in this tutorial:

https://newtechcode.files.wordpress.com/2018/05/appoftheday.png?w=960)

Watch the tutorial on Youtube

Watch tutorial on YouTube

Try out the sample on GitHub

The entire sample code can be found on GitHub.

Summary of the solution

The solution uses the following UI elements:

        let mainImageView: UIImageView
        let logoImageView: UIImageView
        let header: UILabel
        let title: UILabel
        let subtitle: UILabel
        let getButton: UIButton
        let purchaseDisclaimer: UILabel
        let overlay: UIVisualEffectView

and builds the following approach to build the desired layout:

let titleContainer =  UIView.gridLayoutView(items: [GridItem(title,
                                                                     horizontalAlignment: .left),
                                                            GridItem(subtitle,
                                                                     row: 1,
                                                                     horizontalAlignment: .left)],
                                                    rowDefinitions: [RowDefinition(),
                                                                     RowDefinition(isAuto: true)],
                                                    columnDefinitions:[ColumnDefinition()])

        let buttonContainer =  UIView.gridLayoutView(items: [GridItem(getButton,
                                                                      row: 1),
                                                            GridItem(purchaseDisclaimer,
                                                                     row: 2,
                                                                     verticalAlignment: .top)],
                                                    rowDefinitions: [RowDefinition(),
                                                                     RowDefinition(isAuto: true),
                                                                     RowDefinition(),],
                                                    columnDefinitions:[ColumnDefinition()])

        let container = UIView.gridLayoutView(items: [GridItem(mainImageView,
                                                               position: .init(rowSpan: 2, columnSpan: 3)),
                                                      GridItem(overlay,
                                                               position: .init(row: 1, columnSpan: 3),
                                                               horizontalAlignment: .stretch,
                                                               verticalAlignment: .stretch),
                                                      GridItem(header,
                                                               position: .init(columnSpan: 3),
                                                               horizontalAlignment: .left,
                                                               verticalAlignment: .bottom,
                                                               margin: .init(top: 0, left: 12, bottom: 12, right: 0)),
                                                      GridItem(logoImageView,
                                                               row: 1,
                                                               horizontalAlignment: .left,
                                                               margin: .init(top: 8, left: 8, bottom: 8, right: 8)),
                                                      GridItem(titleContainer,
                                                               row: 1,
                                                               column: 1),
                                                      GridItem(buttonContainer,
                                                               row: 1,
                                                               column: 2)],
                                              rowDefinitions: [RowDefinition(),
                                                               RowDefinition(isAuto: true)],
                                              columnDefinitions: [ColumnDefinition(isAuto: true),
                                                                  ColumnDefinition(),
                                                                  ColumnDefinition(isAuto: true)])

        logoImageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        logoImageView.widthAnchor.constraint(equalToConstant: 100).isActive = true

        buttonContainer.widthAnchor.constraint(equalToConstant: 120).isActive = true

If you find this tutorial useful, try out GridLayout and let me know what you think.