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

Overview

CI Status Version License Platform

FMMosaicLayout is a mosiac collection view layout. There are a great number of media-based iOS applications that use UICollectionViewFlowLayout without any modifications. This lends itself to boring presentation, and unengaging interaction. FMMosaicLayout is a step in the right direction. Simply add this pod to your project, set your preferences and it will layout out your collection view cells in pretty mosaics. The algorithm behind this got its inspiration from this blog post.

Portrait Screenshot

Usage

FMMosaicLayout is very easy to use. Below is all you need to get going.

- (void)viewDidLoad {
    ...

    FMMosaicLayout *mosaicLayout = [[FMMosaicLayout alloc] init];
    self.collectionView.collectionViewLayout = mosaicLayout;

    ...
}

#pragma mark <FMMosaicLayoutDelegate>

- (NSInteger)collectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout
    numberOfColumnsInSection:(NSInteger)section {

    return 2; // Or any number of your choosing.
}

It's also possible to set the layout via Interface Builder. To see a complete example implementation. Clone the repo, and run pod install from the Example directory. Then open up Example/FMMosaicLayout.xcworkspace.

Customization

In addition to the required protocol method collectionView:layout:numberOfColumnsInSection:, there are several optional methods you can implement from FMMosaicLayoutDelegate. You can see them in action in the example project.

Mosaic Cell Size
- (FMMosaicCellSize)collectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout
        mosaicCellSizeForItemAtIndexPath:(NSIndexPath *)indexPath;

This allows you to specify when you want to place a large or small mosaic cell.

Section Insets
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout
        insetForSectionAtIndex:(NSInteger)section;

Here you can specify a custom UIEdgeInsets for each section.

Interitem Spacing
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout
        interitemSpacingForSectionAtIndex:(NSInteger)section;

Here you can specify the spacing between cells.

Header and Footer Support

Below are the optional methods you can make use of to customize your headers and footers. The first methods are to set the height of your header/footers.

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout
 heightForHeaderInSection:(NSInteger)section;

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout
 heightForFooterInSection:(NSInteger)section;

If you want your header and/or to overlay your mosaic cells implement the following methods below in your delegate and have them return YES. The default is NO.

- (BOOL)headerShouldOverlayContentInCollectionView:(UICollectionView *)collectionView
                                            layout:(FMMosaicLayout *)collectionViewLayout;

- (BOOL)footerShouldOverlayContentInCollectionView:(UICollectionView *)collectionView
                                            layout:(FMMosaicLayout *)collectionViewLayout;

Installation

FMMosaicLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "FMMosaicLayout"

License

FMMosaicLayout is available under the MIT license. See the LICENSE file for more info.

Comments
  • Change Cell Size ( or number of items in one column)

    Change Cell Size ( or number of items in one column)

    Hello, thank's this really simple and great Library and I need to know how can I change the cells size and use my costum size. Also I've noticed that the number of cells in rows is always multiplier of 2 (2 cells, 4 cells, 8 cells ... in a row) and the big cell size is 2 cells for width and height. So it will be more nicer if you allows user to define the number of cell in row and the big cell size (for example 3cell for height and 4 for width). Also I'm ready to contribute in this project

    opened by chlebta 7
  • More options for cell size?

    More options for cell size?

    Hi there,

    I was looking into this library, and one thing I saw is that it currently only seems to support two cell sizes.

    Is there any chance this can be changed to allow the app to specify the size of a cell in number of columns and rows? That would make the system much more flexible and customizable.

    Kind regards,

    pieter

    opened by pieterclaerhout 3
  • Can't get the Example Project to work

    Can't get the Example Project to work

    Using XCode 6.3.1, Cocoapods is 0.37.2

    I opened the "Example" project in XCode and hit the run button and it gives these errors:

    diff: /../Podfile.lock: No such file or directory
    diff: /Manifest.lock: No such file or directory
    error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.
    

    I tried going to the directory to install the files from pod. I tried pod install and this is what I got:

    [!] Unable to satisfy the following requirements:
    
    - `FMMosaicLayout (from `../`)` required by `Podfile`
    - `FMMosaicLayout (from `../`)` required by `Podfile`
    - `FMMosaicLayout (= 0.1.1)` required by `Podfile.lock`
    

    I downloaded it through ZIP and did not change any of the files.

    opened by WilliamHua 3
  • SWIFT.

    SWIFT.

    Not an issue really but if you could issue this (see what i did there?) in swift, you would unlock the nth universe. Really. Like, seriously. All that aside, its a great control!

    invalid wontfix 
    opened by Mwiti 3
  • setting numberOfColumnsInSection to odd number

    setting numberOfColumnsInSection to odd number

    Currently when we set the numberOfColumnsInSection the result view will have double the amount of columns we requested.

    E.g. we set the value to 2 then there is 4 columns in the collectionview.

    Due to this, we can't add odd number columns (e.g. 3,5,7 etc.)

    Could you please address this issue.

    opened by mayooresan 2
  • How to Add Header and Footer View?

    How to Add Header and Footer View?

    Please show me how to add header and footer view in to your collection layout? I try but cannot by this:

    • (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;
    opened by ToanNguyens 2
  • Get rid of delegate in favor of self.collectionView.delegate

    Get rid of delegate in favor of self.collectionView.delegate

    I guess this is how flow layout works, it picks up delegate from collection view. This would make setup easier and would not require any additional code in viewDidLoad.

    opened by pronebird 2
  • ability to change number of image in one row

    ability to change number of image in one row

    can you plz add the abilty to change the number of image in one row, perexample i notice that always the number 1 row in contain 5 image, no mare what can you plz make the row more flexbile,

    opened by syrakozz 2
  • Add support for FMMosaicCellSizeTall and FMMosaicCellSizeWide.

    Add support for FMMosaicCellSizeTall and FMMosaicCellSizeWide.

    Requesting two new sizes FMMosaicCellSizeTall and FMMosaicCellSizeWide.

    The way I am imagining it is that FMMosaicCellSizeTall would be the height of two FMMosaicCellSizeSmall (and the width of one) and Wide would be the width of two (and the height of one).

    opened by WilliamHua 2
  • Calculate mosaic cell size placement to always end flush

    Calculate mosaic cell size placement to always end flush

    Depending on how the mosaic cells are arranged, they don't always end flush with the bottom of the collection view. One way to solve this is with a better calculation of when to render a big or small-sized cell. Provide a mechanism to simply this for the end user.

    opened by JVillella 0
Owner
Fluid Media Inc.
Fluid Media Inc.
A mosaic collection view layout inspired by Lightbox's Algorithm, written in Swift 🔶

TRMosaicLayout A mosaic collection view layout inspired by Lightbox's Algorithm. This is a swift implementation/extension of @fmitech's FMMosaicLayout

Vincent Le 252 Nov 23, 2022
BouncyLayout is a collection view layout that makes your cells bounce.

BouncyLayout is a collection view layout that makes your cells bounce. Features Pure Swift 5. Works with every UICollectionView. Horizontal and vertic

Robert-Hein Hooijmans 4.2k Jan 3, 2023
Blueprints - A framework that is meant to make your life easier when working with collection view flow layouts.

Description Blueprints is a collection of flow layouts that is meant to make your life easier when working with collection view flow layouts. It comes

Christoffer Winterkvist 982 Dec 7, 2022
UICollectionViewSplitLayout makes collection view more responsive.

UICollectionViewSplitLayout makes collection view more responsive. What's this? UICollectionViewSplitLayout is a subclass of UICollectionViewLayout. I

Yahoo! JAPAN 239 Dec 6, 2022
A bunch of layouts providing light and seamless experiences in your Collection View

Swinflate Description Swinflate aims to encorporate a set of collection view layouts which provide a better and even more fluid experience in collecti

Vlad Iacob 224 Dec 19, 2022
The waterfall (i.e., Pinterest-like) layout for UICollectionView.

CHTCollectionViewWaterfallLayout CHTCollectionViewWaterfallLayout is a subclass of UICollectionViewLayout, and it trys to imitate UICollectionViewFlow

Nelson 4.4k Dec 24, 2022
A CollectionView Layout displaying a slanted cells

CollectionViewSlantedLayout is a subclass of the UICollectionViewLayout allowing the display of slanted cells in a UICollectionView. Features Pure Swi

Yassir Barchi 2.2k Dec 27, 2022
AZSafariCollectionViewLayout is replica of safari browser history page layout. very easy to use, IBInspectable are given for easy integration

AZSafariCollectionViewLayout Features iOS Safari history view layout IBDesignAble for properties Few minutes integration Installation CocoaPods CocoaP

Afroz Zaheer 211 Dec 6, 2022
An extandable mosaic UICollectionViewLayout with a focus on extremely flexible customizations :large_orange_diamond:

SquareMosaicLayout An extandable mosaic UICollectionViewLayout with a focus on extremely flexible customizations. Note This layout is not of waterfall

Mikhail Vasilev 254 Dec 6, 2022
A mosaic collection view layout inspired by Lightbox's Algorithm, written in Swift 🔶

TRMosaicLayout A mosaic collection view layout inspired by Lightbox's Algorithm. This is a swift implementation/extension of @fmitech's FMMosaicLayout

Vincent Le 252 Nov 23, 2022
An interactive line chart written in SwiftUI with many customizations.

LineChartView LineChartView is a Swift Package written in SwiftUI to add a line chart to your app. It has many available customizations and is interac

Jonathan Gander 59 Dec 10, 2022
Modern-collection-view - Modern collection view for swift

Modern collection view Sample application demonstrating the use of collection vi

Nitanta Adhikari 1 Jan 24, 2022
Drop in GIF Collection View. Uses Tenor as default GIFs provider.

Drop in GIF Collection View. Uses Tenor as default GIFs provider. This will allow you to easily integrate GIF image search into your app or you can use this as a GIF keyboard for your messaging needs.

null 5 May 7, 2022
BouncyLayout is a collection view layout that makes your cells bounce.

BouncyLayout is a collection view layout that makes your cells bounce. Features Pure Swift 5. Works with every UICollectionView. Horizontal and vertic

Robert-Hein Hooijmans 4.2k Jan 5, 2023
An easy-to-use Collection View Layout for card-like animation.

CarLensCollectionViewLayout An easy-to-use Collection View Layout for card-like animation ?? CarLensCollectionViewLayout was created out of the implem

Netguru 530 Dec 16, 2022
Flow layout / tag cloud / collection view in SwiftUI.

SwiftUIFlowLayout A Flow Layout is a container that orders its views sequentially, breaking into a new "line" according to the available width of the

Gordan Glavaš 115 Dec 28, 2022
Declaretive UICollectionViewCompositionalLayout interface to implement complex collection view layout.

CompositionalLayoutViewController Example To run the example project, clone the repo, and run pod install from the Example directory first. Requiremen

ONEinc 19 Dec 2, 2022
A Code challenge I solved leveraging a lot on Composite collection view layout written in swift

AsthmApp Mobile app designed as a support aid for people with Asthma Accounts Google and Firebase [email protected] dICerytiMPSI Facebook asthmp.ap

null 0 Dec 13, 2021
A Code challenge I solved leveraging a lot on Composite collection view layout...written in swift

Space44 Code Challenge Space44 Code Challenge iOS application for Space 44 hiring process, it leverages on Image download and composite collection vie

null 0 Dec 16, 2021
BouncyLayout is a collection view layout that makes your cells bounce.

BouncyLayout is a collection view layout that makes your cells bounce. Features Pure Swift 5. Works with every UICollectionView. Horizontal and vertic

Robert-Hein Hooijmans 4.2k Jan 3, 2023