Skip to content

An extandable mosaic UICollectionViewLayout with a focus on extremely flexible customizations 🔶

License

Notifications You must be signed in to change notification settings

iwheelbuy/SquareMosaicLayout

Repository files navigation

SquareMosaicLayout

Version License Platform

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
image1 image2 image3 image4
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
    }
}

About

An extandable mosaic UICollectionViewLayout with a focus on extremely flexible customizations 🔶

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages