SquareMosaicLayout
An extandable mosaic UICollectionViewLayout with a focus on extremely flexible customizations.
Note
This layout is not of waterfall type. It was designed for layouts where we can predict the size of rectangular box which contains the number of full cells. Check out how to copy TRMosaicLayout or FMMosaicLayout using SquareMosaicLayout
Visual
| Example | Layout | Pattern | Blocks |
|---|---|---|---|
 |
 |
 |
 |
| Build and run an example project to see how it really works | Let's imagine that we want a UICollectionView with some mosaic layout that looks like this | The red part of frames repeats while scrolling. So we should do only the red pattern and then repeat it | The pattern is split it into smaller blocks that can be reused for some other layout or pattern |
Installation
SquareMosaicLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'SquareMosaicLayout', '4.1.2'Capabilities
- Layout can be vertical or horizontal.
- Each section can have its own pattern of frames.
- Each section can have its own header frame (optional).
- Each section can have its own footer frame (optional).
- Each section can have its own background (optional).
- Space between sections can be changed (optional).
- Space between, before and after blocks in pattern can be changed (optional).
- Each section can have one repeated block.
Author
iwheelbuy, [email protected]
License
SquareMosaicLayout is available under the MIT license. See the LICENSE file for more info.
Example - copying TRMosaicLayout
final class TRMosaicLayoutCopy: SquareMosaicLayout, SquareMosaicDataSource {
convenience init() {
self.init(direction: SquareMosaicDirection.vertical)
self.dataSource = self
}
func layoutPattern(for section: Int) -> SquareMosaicPattern {
return TRMosaicLayoutCopyPattern()
}
}
class TRMosaicLayoutCopyPattern: SquareMosaicPattern {
func patternBlocks() -> [SquareMosaicBlock] {
return [
TRMosaicLayoutCopyBlock1(),
TRMosaicLayoutCopyBlock2()
]
}
}
public class TRMosaicLayoutCopyBlock1: SquareMosaicBlock {
public func blockFrames() -> Int {
return 3
}
public func blockFrames(origin: CGFloat, side: CGFloat) -> [CGRect] {
let minWidth = side / 3.0
let maxWidth = side - minWidth
let minHeight = minWidth * 1.5
let maxHeight = minHeight + minHeight
var frames = [CGRect]()
frames.append(CGRect(x: 0, y: origin, width: maxWidth, height: maxHeight))
frames.append(CGRect(x: maxWidth, y: origin, width: minWidth, height: minHeight))
frames.append(CGRect(x: maxWidth, y: origin + minHeight, width: minWidth, height: minHeight))
return frames
}
}
public class TRMosaicLayoutCopyBlock2: SquareMosaicBlock {
public func blockFrames() -> Int {
return 3
}
public func blockFrames(origin: CGFloat, side: CGFloat) -> [CGRect] {
let minWidth = side / 3.0
let maxWidth = side - minWidth
let minHeight = minWidth * 1.5
let maxHeight = minHeight + minHeight
var frames = [CGRect]()
frames.append(CGRect(x: 0, y: origin, width: minWidth, height: minHeight))
frames.append(CGRect(x: 0, y: origin + minHeight, width: minWidth, height: minHeight))
frames.append(CGRect(x: minWidth, y: origin, width: maxWidth, height: maxHeight))
return frames
}
}Example - copying FMMosaicLayout
final class FMMosaicLayoutCopy: SquareMosaicLayout, SquareMosaicDataSource {
convenience init() {
self.init(direction: SquareMosaicDirection.vertical)
self.dataSource = self
}
func layoutPattern(for section: Int) -> SquareMosaicPattern {
return FMMosaicLayoutCopyPattern()
}
}
class FMMosaicLayoutCopyPattern: SquareMosaicPattern {
func patternBlocks() -> [SquareMosaicBlock] {
return [
FMMosaicLayoutCopyBlock1(),
FMMosaicLayoutCopyBlock2(),
FMMosaicLayoutCopyBlock3(),
FMMosaicLayoutCopyBlock2(),
FMMosaicLayoutCopyBlock2()
]
}
}
public class FMMosaicLayoutCopyBlock1: SquareMosaicBlock {
public func blockFrames() -> Int {
return 5
}
public func blockFrames(origin: CGFloat, side: CGFloat) -> [CGRect] {
let min = side / 4.0
let max = side - min - min
var frames = [CGRect]()
frames.append(CGRect(x: 0, y: origin, width: max, height: max))
frames.append(CGRect(x: max, y: origin, width: min, height: min))
frames.append(CGRect(x: max, y: origin + min, width: min, height: min))
frames.append(CGRect(x: max + min, y: origin, width: min, height: min))
frames.append(CGRect(x: max + min, y: origin + min, width: min, height: min))
return frames
}
}
public class FMMosaicLayoutCopyBlock2: SquareMosaicBlock {
public func blockFrames() -> Int {
return 4
}
public func blockFrames(origin: CGFloat, side: CGFloat) -> [CGRect] {
let min = side / 4.0
var frames = [CGRect]()
frames.append(CGRect(x: 0, y: origin, width: min, height: min))
frames.append(CGRect(x: min, y: origin, width: min, height: min))
frames.append(CGRect(x: min * 2, y: origin, width: min, height: min))
frames.append(CGRect(x: min * 3, y: origin, width: min, height: min))
return frames
}
}
public class FMMosaicLayoutCopyBlock3: SquareMosaicBlock {
public func blockFrames() -> Int {
return 5
}
public func blockFrames(origin: CGFloat, side: CGFloat) -> [CGRect] {
let min = side / 4.0
let max = side - min - min
var frames = [CGRect]()
frames.append(CGRect(x: 0, y: origin, width: min, height: min))
frames.append(CGRect(x: 0, y: origin + min, width: min, height: min))
frames.append(CGRect(x: min, y: origin, width: min, height: min))
frames.append(CGRect(x: min, y: origin + min, width: min, height: min))
frames.append(CGRect(x: max, y: origin, width: max, height: max))
return frames
}
}