Made in Swift - Tag layout for UICollectionView supporting 3 types of alignments - Left || Centre || Right

Overview

TagCellLayout

Build Status Badge w/ Version Badge w/ Platform License MIT

About

Its an ui-collection-view LAYOUT class that takes care of all the logic behind making tags like layout using UICollectionView. It also allows you to adjust the alignment of your layout i.e Left || Centre || Right. Now you just have to take care of your tag view and nothing else. Aaaand it also supports multi-line tags πŸš€

Screenshots

Center Alignment Left Alignment Right Alignment

Usage

  • Init Method:
import TagCellLayout

let tagCellLayout = TagCellLayout(alignment: .center, delegate: self)
collectionView.collectionViewLayout = tagCellLayout
  • Tag Alignment:

alignment can be Left or Center or Right. If its nil then by default Left alignment will be applied.

Delegate Methods

  • Protocol to conform - TagCellLayoutDelegate

  • Methods

- 	func tagCellLayoutTagSize(layout: TagCellLayout, atIndex index:Int) -> CGSize

Architecture

  • func tagCellLayoutTagSize(layout: TagCellLayout, atIndex index:Int) -> CGSize

is called for every tag where you will calculate their size and pass it on to TagCellLayout class for further calculations.

  • collectionView.numberOfItemsInSection(0)

internally the number of tags is calculated by the above method.

Installation

To integrate TagCellLayout into your Xcode project using CocoaPods, specify it in your Podfile:

Swift-4.0

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'TagCellLayout', :git => 'https://github.com/riteshhgupta/TagCellLayout.git'

Swift-3.2

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'TagCellLayout', :git => 'https://github.com/riteshhgupta/TagCellLayout.git', :branch => 'swift3.2'

Swift-3.0

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'TagCellLayout', :git => 'https://github.com/riteshhgupta/TagCellLayout.git', :branch => 'swift3.0'

Swift-2.3

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'TagCellLayout', :git => 'https://github.com/riteshhgupta/TagCellLayout.git', :branch => 'swift2.3'

Swift-2.2

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'TagCellLayout', '~> 0.3'

Contributing

Open an issue or send pull request here.

Licence

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

Comments
  • Question: Programmatically Set Section Inset?

    Question: Programmatically Set Section Inset?

    πŸ‘‹ Ritesh -

    I'm having trouble setting the insets for my CollectionView programmatically (I'm not using a story board). Right now it's taking up the entire view, but I need it to appear below some text and above a button at the bottom of the view.

    For a typical UICollectionView I've used sectionInset to set it in the proper position:

    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 178, left: 10, bottom: 40, right: 10)
    collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    

    This doesn't seem to work for tagCellLayout. Any ideas?

    Thanks for the help 😊

    opened by tylerswartz 2
  • Wrong line number for wide cells

    Wrong line number for wide cells

    I've noticed that when there are wide cells (max possible width) there's a bug with calculating lineNumber.

    Let's say my collectionView has 320 px width and I try to put 320 px cell (tag). Problem persists because you call createLayoutAttributes which moves currentTagPosition to (320.0, 0.0) and then call configureWhiteSpace which checks if we should move tag to next row. This method takes currentTagPosition which is 320 px already and adds current tag width again (which is also 320 px).

    My suggestion is to create layout attributes for all tags first and then configure white space checking next tag instead of current tag. I've tested it for left alignment and it worked fine.

    opened by michal-czw 2
  • pod install issue

    pod install issue

    When i install this wonderful tools with cocoapods, there is an exception saying "TagCellLayout (~> 0.2)required byPodfile". But if i try to use 0.1 version, it could not find the 0.1 branch. "Remote branch 0.1.0 not found in upstream origin" thank you!

    opened by Cao-Yu 2
  • Tag view height is incorrect

    Tag view height is incorrect

    Hi, I am trying to fetch the size of collection view height from the override method collectionViewContentSize in TagCellLayout, which is total height of tag cells in the collection view, that might be incorrect in the case of multiple cells in a row. Currently I am using the latest version 1.0.

    Prior to the latest version, I was using 0.3, in which the collectionViewContentSize is calculated from the number of lines property and that was returning correct value. Does anyone get similar kind of issue.

    opened by sreelash 1
  • Hi

    Hi

    Hey @riteshhgupta I just want to make TagCellLayout horizontally and want to reduce vertically space between two items. Please let me know the correct way.

    Thanks in advance.

    opened by cvindhani 1
  • Update TagCellLayout.swift

    Update TagCellLayout.swift

    Add a variable called "lineNumber" to record how many lines of tags view. So that users can calculate the contentSize of UICollectionView dynamically and change the constraints of UICollectionView. (In the case of this UICollectionView is embeded in other views or animationing)

    opened by Cao-Yu 1
  • Question : What about 0.2.0 version ?

    Question : What about 0.2.0 version ?

    Hi @riteshhgupta ,

    Related to your last commit , you've updated the ReadMe according to a new 0.2.0 version of TagCellLayout.

    When it will be released and available on Cocoapods ?

    Thanks

    opened by bill350 1
  • Make properties as IBInspectible

    Make properties as IBInspectible

    It would be nice to have properties like delegate and tagAlignmentType as IBInspectible. It will be helpful in setting these values by storyboard without having to write a single line of code for initialization.

    opened by hsusmita 1
  • Updated example and added spacings

    Updated example and added spacings

    Pull request contains:

    1. Update an example project:
    • I made a small correct of example cell so there is no white rectangle out of shape
    • I enabled a selection in example as the purpose of tags is to be able to select them
    1. I added 2 methods to delegate:

    func tagCellLayoutInteritemHorizontalSpacing(layout: TagCellLayout) -> CGFloat func tagCellLayoutInteritemVerticalSpacing(layout: TagCellLayout) -> CGFloat

    I'm not sure that values these methods provide are used in correct places of layout calculating but it seems to work.

    opened by ChristRm 0
  • When to Apply Styling like corner radius to cell's container View

    When to Apply Styling like corner radius to cell's container View

    As using this we set Cell's width through its delegate method.but the cell configuration like corner radius and shadow are done on cell's initialization so how to update UI on getting new sizes from delegate.

    opened by mohitTechelogy 0
  • Distance Between Cells

    Distance Between Cells

    Implement a function like from UICollectionViewFlowLayoutDelegate

    - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionView *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section  
      {
        return 10; // This is the minimum inter item spacing, can be more
      }
    
    opened by basilmariano 0
  • Multiline not working

    Multiline not working

    Hello,

    I have a problem with your class TagCelLayout, in iPhone 5S, the multiline not working. capture d ecran 2018-07-20 a 12 04 00

    I see that the collection view width is not representative to the reality with iPhone 5s in the function shouldMoveTagToNextRow. It work perfectly on iPhone 6s.

    If you need more informations, please contact me :)

    opened by jofvr 2
Owner
Ritesh Gupta
Mobile Engineering Manager (iOS)
Ritesh Gupta
Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller.

A smooth, flowing, customizable decision for a UICollectionView Swift Controller We specialize in the designing and coding of custo

Ramotion 1.5k Dec 19, 2022
↕️ VegaScroll is a lightweight animation flowlayout for UICollectionView completely written in Swift 4, compatible with iOS 11 and Xcode 9.

Made by Applikey Solutions Find this project on Dribbble Also check another flowlayout for UICollectionView: https://github.com/ApplikeySolutions/Grav

Applikey Solutions 2.8k Jan 1, 2023
A UICollectionViewLayout subclass displays its items as rows of items similar to the App Store Feature tab without a nested UITableView/UICollectionView hack.

CollectionViewShelfLayout A UICollectionViewLayout subclass displays its items as rows of items similar to the App Store Feature tab without a nested

Pitiphong Phongpattranont 374 Oct 22, 2022
UICollectionView and UIStackView Homework

UICollectionView and UIStackView Homework Use one outer StackView containing one CollectionView on top and a horizontal StackView at the bottom with t

null 0 Nov 11, 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 5, 2023
CardsLayout is a lightweight Collection Layout.

CardsLayout is a lightweight Collection Layout. Installation CocoaPods

Filipp Fediakov 798 Dec 28, 2022
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
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
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 lightweight UICollectionViewLayout that 'pages' and centers its cells 🎑 written in Swift

CenteredCollectionView CenteredCollectionView is a lightweight drop in place UICollectionViewFlowLayout that pages and keeps its cells centered, resul

Ben Emdon 1.2k Jan 6, 2023
Easy and type-safe iOS table and collection views in Swift.

Quick Start TL;DR? SimpleSource is a library that lets you populate and update table views and collection views with ease. It gives you fully typed cl

Squarespace 96 Dec 26, 2022
Spreadsheet CollectionViewLayout in Swift. Fully customizable. πŸ”Ά

SwiftSpreadsheet Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Swift 5.0 Inst

Wojtek Kordylewski 637 Dec 30, 2022
Adding ruby style each iterator to Cocoa/Cocoa touch Swift Array and Range classes, And Int.times{} to Int class

Collection-Each Adding ruby style each iterator to Cocoa/Cocoa touch Swift Array, Dictionary and Range classes, and Int.times ###Why? Array/Dictionary

Omar Abdelhafith 65 Jun 9, 2018
Made in Swift - Tag layout for UICollectionView supporting 3 types of alignments - Left || Centre || Right

TagCellLayout About Its an ui-collection-view LAYOUT class that takes care of all the logic behind making tags like layout using UICollectionView. It

Ritesh Gupta 346 Jan 1, 2023
UILabel with image placed from left or right

SMIconLabel UILabel with possibility to place small icon on the left or on the right side. Take a look at preview image or build sample app to see how

Anatoliy Voropay 94 Apr 27, 2022
A PageView Swiping to the left will go to previous page and swiping to the right will go to next page

PageView This package creates a PageView. Swiping to the left will go to previous page and swiping to the right will go to next page. You can find how

null 0 Oct 20, 2021
Alignment Control is a component to align top, middle, bottom, left, center, right.

AlignmentControl is a component for alignment Direction AlignmentDirection Horizontal Vertical Mode AlignmentMode Left Center Right Top Middle Bottom

Beslan Tularov 38 Mar 16, 2022
A lightweight extension to Swift's CollectionDifference, supporting moves in addition to removals and insertions, critical when updating interfaces and managing reference types.

DifferenceTracker is a lightweight extension to Swift's CollectionDifference. It defines moves in addition to removals and insertions, critical when updating interfaces and managing reference types.

Giles Hammond 2 Nov 25, 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
Very simple swipe-to-dismiss, supporting Auto Layout and dynamic heights

PanelPresenter Add swipe-dismiss logic to your view controller, supporting Auto Layout and dynamic heights. Installation Add this package to your proj

Pim 3 Aug 23, 2022