EEStackLayout
  • December 12, 2024

A vertical stackview which takes subviews with different widths and adds them to it’s rows with paddings, spacings etc.

Installation


Cocoapods

pod ‘EEStackLayout’, ‘~> 0.1’
pod install

Swift Package Manager

.package(url: “https://github.com/efekanegeli/EEStackLayout.git”, from: “0.1.11”)

Manual

1. Download .zip file
2. Just drag and drop EEStackLayout.swift to your project

Example Usage

// Subviews that will be added to stack layout
var viewArray = [UIView]()

// Choose the orientation of EEStackLayout -> vertical / horizontal [Just for demo purposes, change it if you want to see how horizontal EEStackLayout works]
let targetOrientationOfStackLayout = NSLayoutConstraint.Axis.vertical

let stackLayout: EEStackLayout

if targetOrientationOfStackLayout == .vertical {
// Vertical EEStackLayout

// Views with same height for the vertical layout
for _ in 1…25 {
let view1 = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 42))
view1.backgroundColor = .green
let view2 = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 42))
view2.backgroundColor = .blue
let view3 = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 42))
view3.backgroundColor = .yellow
let view4 = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 42))
view4.backgroundColor = .black
viewArray.append(view1)
viewArray.append(view2)
viewArray.append(view3)
viewArray.append(view4)
}

// Vertical EEStackLayout setup
stackLayout = EEStackLayout(frame: CGRect(x: 0, y: 50, width: 300, height: 0),
rowHeight: 20,
minimumInteritemSpacing: 15,
minimumItemSpacing: 10,
insets: UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15),
subviews: viewArray)

} else {
// Horizontal EEStackLayout

// Views with same width for the horizontal layout
for _ in 1…25 {
let view1 = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 15))
view1.backgroundColor = .green
let view2 = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 25))
view2.backgroundColor = .blue
let view3 = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 35))
view3.backgroundColor = .yellow
let view4 = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 45))
view4.backgroundColor = .black
viewArray.append(view1)
viewArray.append(view2)
viewArray.append(view3)
viewArray.append(view4)
}

// Horizontal EEStackLayout setup
stackLayout = EEStackLayout(frame: CGRect(x: 0, y: 50, width: 0, height: 400),
columnWidth: 20,
minimumInteritemSpacing: 15,
minimumItemSpacing: 10,
insets: UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15),
subviews: viewArray)
}

self.view.addSubview(stackLayout)

Init Properties

minimumItemSpacing -> Spacing between rows(vertical layout) or colums(horizontal layout)
rowHeight -> Row height of the main vertical stack view
maximumRowCount -> Maximum row count of the vertical stack view, ignores the rest of the subviews if the actual row count exceeds the limit
columnWidth -> Column width of the main horizontal stack view
maximumColumnCount -> Maximum column count of the horizontal stack view, ignores the rest of the subviews if the actual column count exceeds the limit
minimumInteritemSpacing -> Spacing between items in a row/column
insets -> Layout margins of main vertical stack view
subviews -> View array of elements to be added to the main stack view

GitHub


View Github

#cocoapod #ios #StackView #swift #uistackview
YOU MIGHT ALSO LIKE...
ConfettiView

A SwiftUI View that emits confetti with user-defined shapes, images, and text.

SwiftUI Colour Wheel

A colour wheel made all in SwiftUI. There are 2 different colour wheels to choose from. The first main one ...

ColorPickerRing

A color picker implementation with color wheel appearance written in plain SwiftUI. It is compatible with UIColor and NSColor.

ASCollectionView

This repository is no longer maintained. Here's why: with the release of iOS 16 SwiftUI now enables most of the ...