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

Related tags

Tag TagCellLayout
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
Simple and highly customizable iOS tag list view, in Swift.

TagListView Simple and highly customizable iOS tag list view, in Swift. Supports Storyboard, Auto Layout, and @IBDesignable. Usage The most convenient

Ela Workshop 2.5k Dec 31, 2022
Highly customizable iOS tags view [input, edit, dynamic, tag, token, field, NSTokenField]

RKTagsView Highly customizable iOS tags view (like NSTokenField). Supports horizontal and vertical direction, editing, multiple selection, Auto Layout

Roman Kulesha 450 Oct 2, 2022
Swift plugin which allow add mask to input field

AKMaskField AKMaskField is UITextField subclass which allows enter data in the fixed quantity and in the certain format (credit cards, telephone numbe

Artem Krachulov 347 Jul 19, 2022
🔍 Awesome fully customize search view like Pinterest written in Swift 5.0 + Realm support!

YNSearch + Realm Support Updates See CHANGELOG for details Intoduction ?? Awesome search view, written in Swift 5.0, appears search view like Pinteres

Kyle Yi 1.2k Dec 17, 2022
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
Protocol-oriented UICollectionView management, powered by generics and associated types.

DTCollectionViewManager Features Powerful mapping system between data models and cells, headers and footers Automatic datasource and interface synchro

Denys Telezhkin 308 Jan 6, 2023
Auto Layout made easy with the Custom Layout.

Auto Layout made easy with the Custom Layout. Getting started CocoaPods CocoaPods is a dependency manager for Cocoa projects. You can install it with

Malith Nadeeshan 1 Jan 16, 2022
his is my second app, made right after the I am Rich app

I-am-Poop ?? Hello everyone! This is my second app, made right after the I am Rich app, to better fixate the concepts I learned during this lesson, wh

Victor Colen 1 Oct 11, 2021
SwiftySideMenu is a lightweight and easy to use side menu controller to add left menu and center view controllers with scale animation based on Pop framework.

SwiftySideMenu SwiftySideMenu is a lightweight, fully customizable, and easy to use controller to add left menu and center view controllers with scale

Hossam Ghareeb 84 Feb 4, 2022
TomatoVerticalMenuMania lets you create a vertical, scrollable menu to the left of the screen.

TomatoVerticalMenuMania Framework Development and compatibility Development platform: iOS Language: Swift Compatibility: iOS 13 or greater Description

Tomato Software 0 Jan 11, 2022
Left Side Menu \ Side Bar with modern interface for iOS

SideMenu A customizable, interactive, auto expanding and collapsing side menu fo

Mohammed Albahal 0 Dec 18, 2021
UITextField with underline and left image

TJTextField UITextField with underline and left image Version: 1.0 Features Add image in UITextField Left text pedding Underline whole UITextField Sho

Tejas Ardeshna 44 May 16, 2022
CalendarApp Swift - Made a calendar app in swift, completely from scratch using UIStackView and UICollectionView

CalendarApp_Swift Made a calendar app in swift, completely from scratch using UI

Arnav Chhokra 1 Feb 4, 2022
Pull-to-refresh animation in UICollectionView with a sticky header flow layout, written in Swift :large_orange_diamond:

ReplaceAnimation Implementation of Zee Young's Dribbble animation (https://dribbble.com/shots/2067564-Replace) Info I really liked Zee Young's animati

Alex Türk 957 Sep 13, 2022