An extandable mosaic UICollectionViewLayout with a focus on extremely flexible customizations :large_orange_diamond:

Mikhail Vasilev

Last update: Dec 6, 2022

Related tags

Collection View Layout swift ios uitableview uicollectionview uikit uicollectionviewlayout uicollectionviewflowlayout

Overview

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
    }
}

Comments

set shadow for section
Hi, I set shadow for section but doesn't effect on section `func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { switch kind { case SquareMosaicLayoutSectionBacker: let view: UICollectionReusableView = collectionView.dequeueSupplementary(kind, indexPath: indexPath, kind: kind) view.layer.backgroundColor = UIColor.white.cgColor view.layer.roundedAllCorner(width: 5, height: 5) view.layer.borderColor = UIColor.clear.cgColor view.layer.shadowColor = UIColor.lightGray.cgColor view.layer.shadowOffset = CGSize(width: 13, height: 13) view.layer.shadowOpacity = 15 view.layer.shadowRadius = 12 view.layer.masksToBounds = false view.masksToBounds = false return view case SquareMosaicLayoutSectionHeader: let view: UICollectionReusableView = collectionView.dequeueSupplementary(kind, indexPath: indexPath, kind: kind) view.layer.backgroundColor = UIColor.clear.cgColor

let label = UILabel() label.text = "header" label.font = UIFont.systemFont(ofSize: 20) label.textAlignment = .center label.frame = view.bounds view.addSubview(label) return view default: fatalError() } }`
opened by MuhammadEhsanMirzaei 6
iOS 8 Support

Hi, I'm wondering why the deploy target is iOS 9.0. I tried the demo app on iOS 8.1 and it works quite normal.

Is there any other issue I didn't notice?
enhancement

opened by ShivaHuang 4
Lazy computation for layout attributes

When collection view has thousands of items then method prepare() works slow that causes some lags/freezes, especially it is noticeable on device orientation change. Thanks.

opened by mikehouse 1
Objective C Usage?

Is this compatible with objective c? I am able to import it by using the following code, but cannot initialize it.

#import "SquareMosaicLayout-Swift.h"
help wanted

opened by willsmillie 1
Carthage support
Hi, For iOS projets it's will be great to make your component Carthage compatible

Take a look at these articles:

Ruthlessly Simple Dependency Management with Carthage

Carthage Tutorial: Getting Started

Making Carthage-compatible Frameworks with Swift

Swift Cross Platform Framework (section Configure targets for Carthage) 👍

On your README.md add on top and add section for the installation with Carthage.
help wanted
opened by TofPlay 1

An extandable mosaic UICollectionViewLayout with a focus on extremely flexible customizations :large_orange_diamond:

Related tags

Overview

SquareMosaicLayout

Note

Visual

Installation

Capabilities

Author

License

Example - copying TRMosaicLayout

Example - copying FMMosaicLayout

Comments

set shadow for section

iOS 8 Support

Lazy computation for layout attributes

Objective C Usage?

Carthage support

Owner

Mikhail Vasilev

A mosaic collection view layout inspired by Lightbox's Algorithm, written in Swift 🔶

A lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift

A drop-in mosaic collection view layout with a focus on simple customizations.

Pull-to-refresh animation in UICollectionView with a sticky header flow layout, written in Swift :large_orange_diamond:

A mosaic collection view layout inspired by Lightbox's Algorithm, written in Swift 🔶

An interactive line chart written in SwiftUI with many customizations.

🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

A lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift

A UICollectionViewLayout subclass displays its items as rows of items similar to the App Store Feature tab without a nested UITableView/UICollectionView hack.

A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

sample project for `UICollectionViewLayout` implementation

A lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift

UICollectionViewLayout with focused content

MisterFusion is Swift DSL for AutoLayout. It is the extremely clear, but concise syntax, in addition, can be used in both Swift and Objective-C. Support Safe Area and Size Class.

FSPagerView is an elegant Screen Slide Library. It is extremely helpful for making Banner View、Product Show、Welcome/Guide Pages、Screen/ViewController Sliders.

An extremely high-performance, lightweight, and energy-efficient pure Swift async web image loader with memory and disk caching for iOS and  Watch.

Marshroute is an iOS Library for making your Routers simple but extremely powerful

iOS / Objective C: an extremely simple UIAlertView alternative

It is a highly configurable iOS library which allows easy styling with built in styles as well as extra header and footer views so that you can make extremely unique alerts and action sheets.