keighl / ktcenterflowlayout Goto Github PK

Aligns collection view cells to the center of the screen.

License: MIT License

Objective-C 97.52% Ruby 2.48%

nscollectionview ios layout

ktcenterflowlayout's Introduction

KTCenterFlowLayout

KTCenterFlowLayout is a subclass of UICollectionViewFlowLayout which Aligns cells to the center of a collection view. It effectively enforces the minimumInteritemSpacing.

Usage

# In your Podfile

pod 'KTCenterFlowLayout'

Objective-C:

KTCenterFlowLayout *layout = [KTCenterFlowLayout new];
layout.minimumInteritemSpacing = 10.f;
layout.minimumLineSpacing = 10.f;

[[UICollectionViewController alloc] initWithCollectionViewLayout:layout];

Swift:

let layout = KTCenterFlowLayout()
layout.minimumInteritemSpacing = 10.0
layout.minimumLineSpacing = 10.0

UICollectionViewController(collectionViewLayout: layout)

Example

See the layout in use in the ./Example app:

Horizontal Scrolling

This layout doesn't work with UICollectionViewScrollDirection.horizontal.

Self-sizing cells

This layout doesn't work with self-sizing collection view cells (estimatedItemSize). Of course, neither does the vanilla UICollectionViewFlowLayout. Pull requests appreciated from anybody interested in solving self-sizing layouts!

ktcenterflowlayout's People

Contributors

Stargazers

Watchers

Forkers

jrg-developer v-deriglazov sumitmundra tiger8888 argon pixio sayami143 tappytaps mlloyd sandyway alegege rakutou perlmunger happy-5 yonaskolb pinkeerach 646b yangguangyu wenhaowang openstack-mobile anish-kumar-dev shahdhiren lemonruss jeddgobleaol lifely keath90 lxg1582 sunbohong skylib lorienman observadorpt syshen j-rojas romyilano doddasrinivasan wjtime cainoeraabele pcardoso josefdolezal midapp mohsinalimat sumitjain7 tiwari1amrit ahmerbaig02 jianhong7 simayang01 eduardbosch rafaelleao aozhimin rimonhanna asuhasoft dogewowzie winterwd cmrnrbs swf675139060 omgitsu

ktcenterflowlayout's Issues

Does not work properly with auto layout cell sizing

When I set a estimatedItemSize on the collection view layout and use auto-layout to define the size of my cells (hence, not implementing - (CGSize)collectionView:layout:sizeForItemAtIndexPath:), KTCenterFlowLayout does not work anymore.

Since iOS 8, it's very usual to use auto-layout for UICollectionViewCell automatic sizing (as well as UITableViewCell automatic height).

self-sizing cells in 1.2

I was successfully using -[UICollectionViewFlowLayout estimatedItemSize] with 1.1.1, but in 1.2 I'm getting the following crash:

-[_UIFlowLayoutSection frameForItemAtIndexPath:] + 548, queue = 'com.apple.main-thread', stop reason = EXC_ARITHMETIC (code=EXC_I386_DIV, subcode=0x0)
    frame #0: 0x000000010da10fb3 UIKit`-[_UIFlowLayoutSection frameForItemAtIndexPath:] + 548
    frame #1: 0x000000010d9bfd31 UIKit`-[UICollectionViewFlowLayout _frameForItem:inSection:usingData:] + 159
    frame #2: 0x000000010d9ba53d UIKit`-[UICollectionViewFlowLayout layoutAttributesForItemAtIndexPath:usingData:] + 568
    frame #3: 0x000000010d9ba802 UIKit`-[UICollectionViewFlowLayout layoutAttributesForItemAtIndexPath:] + 409
  * frame #4: 0x000000010c1889ee iCanCope-cal`-[KTCenterFlowLayout layoutAttributesForItemAtIndexPath:](self=0x00007f9ac343b7b0, _cmd=<unavailable>, indexPath=<unavailable>) + 694 at KTCenterFlowLayout.m:68 [opt]
    frame #5: 0x000000010c188655 iCanCope-cal`-[KTCenterFlowLayout layoutAttributesForElementsInRect:](self=0x00007f9ac343b7b0, _cmd=<unavailable>, rect=(origin = (x = -568, y = -568), size = (width = 868, height = 1136))) + 245 at KTCenterFlowLayout.m:34 [opt]
    frame #6: 0x000000010d9db58a UIKit`__45-[UICollectionViewData validateLayoutInRect:]_block_invoke + 144
    frame #7: 0x000000010d9dafd7 UIKit`-[UICollectionViewData validateLayoutInRect:] + 3067
    frame #8: 0x000000010d98753a UIKit`-[UICollectionView layoutSubviews] + 199
    frame #9: 0x000000010d1c2980 UIKit`-[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 703
    frame #10: 0x0000000110843c00 QuartzCore`-[CALayer layoutSublayers] + 146
    frame #11: 0x000000011083808e QuartzCore`CA::Layer::layout_if_needed(CA::Transaction*) + 366
    frame #12: 0x0000000110837f0c QuartzCore`CA::Layer::layout_and_display_if_needed(CA::Transaction*) + 24
    frame #13: 0x000000011082c3c9 QuartzCore`CA::Context::commit_transaction(CA::Transaction*) + 277
    frame #14: 0x000000011085a086 QuartzCore`CA::Transaction::commit() + 486
    frame #15: 0x000000011085a7f8 QuartzCore`CA::Transaction::observer_callback(__CFRunLoopObserver*, unsigned long, void*) + 92
    frame #16: 0x000000010f62ec37 CoreFoundation`__CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 23
    frame #17: 0x000000010f62eba7 CoreFoundation`__CFRunLoopDoObservers + 391
    frame #18: 0x000000010f6247fb CoreFoundation`__CFRunLoopRun + 1147
    frame #19: 0x000000010f6240f8 CoreFoundation`CFRunLoopRunSpecific + 488
    frame #20: 0x0000000111f20ad2 GraphicsServices`GSEventRunModal + 161
    frame #21: 0x000000010d107f09 UIKit`UIApplicationMain + 171
    frame #22: 0x000000010c13903f iCanCope-cal`main(argc=3, argv=0x00007fff53cb5608) + 111 at main.m:14
    frame #23: 0x0000000110ac392d libdyld.dylib`start + 1
    frame #24: 0x0000000110ac392d libdyld.dylib`start + 1

I did notice that a section has been added to the readme stating that self-sizing collection view cells (estimatedItemSize) are not supported. But, the screenshot in the readme of the US states, clearly shows cells that have different widths. Is that example screenshot no longer possible in 1.2 and above?

Support for negative minimumLineSpacing

The standard UICollectionViewFlowLayout supports the use of negative minimumLineSpacing to allow overlapping rows.

KTCenterFlowLayout uses some internal rectangle intersection logic that prevents detection of overlapping rows and considers all items to be on in the same row during its layout calculation, resulting in an incorrect layout.

I'm going to attempt a fix and will submit a PR.

Help to use left align

issue with UICollectionElementKindSectionHeader

hello there,
at the first time i use KTCenterFlowLayout, it works fine, really good job. But since (I dont remember when, but i thougt it was since i update xcode, currently im on xcode 7.3.1), my collectionview cannot call - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath, so the header or footer will not gonna shown.
Everything goes as fine when i using UICollectionViewFlowLayout.
i tried to use UICollectionViewFlowLayouton viewdidload adn then use KTCenterFlowLayout on viewdidappear. what happen is the header/footer shown for a blink, before back to no header.

did I miss something here?

Help in using this with swift!!

let layout = KTCenterFlowLayout()
layout.minimumInteritemSpacing = 10.0
layout.minimumLineSpacing = 10.0
UICollectionViewController(collectionViewLayout: layout)

I added ^ in view did load where my collection view data is set, but nothing is changing, can you tell me what I am missing?

Still 0.0.2 in cocoapods

Hi @keighl
Why the version of KTCenterFlowLayout still is 0.0.2 in cocoapods?

iOS9 - UICollectionViewFlowLayout has cached frame mismatch for index path

Hi,

After a recent upgrade to iOS9, I started seeing this warning on the console:

UICollectionViewFlowLayout has cached frame mismatch for index path <NSIndexPath: 0xc000000000000016> {length = 2, path = 0 - 0} - cached value: {{9.75, 0}, {55, 65}}; expected value: {{0, 0}, {55, 65}}
This is likely occurring because the flow layout subclass KTCenterFlowLayout is modifying attributes returned by UICollectionViewFlowLayout without copying them

Changing :
NSMutableArray *superAttributes = [NSMutableArray arrayWithArray:[super layoutAttributesForElementsInRect:rect]];

NSMutableArray *superAttributes = [NSMutableArray arrayWithArray:[super layoutAttributesForElementsInRect:rect].copy];

Fixed the issue.

Hope that helps.

iPhone 6Plus weird overlap

Hello there,

First of all, thanks a lot for this layout, it really works well on my iPhone 6 device and it is really great to manage the horizontal alignment like that.

However, I'm contacting you today because while using the exact same code on the iPhone 6 Plus simulator, I've got a weird bug where cells overlap. I checked the code of course but can't seem to find what's causing that for this specific device, since it's working great on others. Maybe you had the same issue once and you can help me?

Here's some screenshot of the bug: http://cl.kowaio.me/image/2w1M1b3X3C13

About the code I call, I'm doing it in swift but like I told before, it's working great on other devices. Here's the code:

override func viewDidLoad() {
    super.viewDidLoad()

    // Update Collection View Flow Layout
    let layout = KTCenterFlowLayout()
    layout.minimumInteritemSpacing = 20.0
    layout.minimumLineSpacing = 10.0

    collectionView.collectionViewLayout = layout

}

and

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 10.0, left: 20.0, bottom: 10.0, right: 20.0)
}

Thanks a lot!

My best,

Support for vertical scroll direction

Currently this layout does not center items vertically if scrollDirection is set to vertical

Autolayout constraints being ignored?

For some reason, when I use this framework, once I go to the tab that has the collection view, it loads already scrolled down to what appears to be close to the centre point of the collection view scrollable area. If i just use the default Flow layout, it loads at the top of the scrollable area as expected. I believe this is due to this customized layout ignoring the constraints i've already applied. Is this the case?

Class should override `layoutAttributesForItemAtIndexPath:`

Example doesn't work

Should account for collection view content insets.

Horizontal scrolling

Hi,

Thanks for sharing this component! I've been using it for vertical scrolling without issues, but how about supporting horizontal scrolling? Would that be something you'd be interested in?

use of unresolved identifier

Hey, i wanted to try the library using cocapods, but xcode couldn't recognize the class somehow. Attached the screenshot for reference

My XCode Version 8.1 (8B62)
The project's code is in swift 3.0

You can add swift version of this beautiful Layout.

class CenterFlowLayout: UICollectionViewFlowLayout {

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
        var superAttributes =  super.layoutAttributesForElementsInRect(rect)

        var rowCollections: [CGFloat: [UICollectionViewLayoutAttributes]] = [:]

         // Collect attributes by their midY coordinate.. i.e. rows!
        if let attributes = superAttributes as? [UICollectionViewLayoutAttributes] {

            for itemAttributes in attributes {
                var yCenter = CGRectGetMidY(itemAttributes.frame)

                if rowCollections[yCenter] == nil {
                    rowCollections[yCenter] = []
                }

                rowCollections[yCenter]?.append(itemAttributes)

            }

        }

        // Adjust the items in each row
        for (key, value) in rowCollections {


            var itemsInRow = value.count

            // x-x-x-x ... sum up the interim space
            var aggregateInteritemSpacing = self.minimumInteritemSpacing * CGFloat(itemsInRow - 1)

            // Sum the width of all elements in the row
            var aggregateItemWidths: CGFloat = 0.0

            for itemAttributes in value {
                aggregateItemWidths +=  CGRectGetWidth(itemAttributes.frame)
            }

            // Build an alignment rect
            // |==|--------|==|
            var alignmentWidth =  aggregateItemWidths + aggregateInteritemSpacing
            var alignmentXOffset = (CGRectGetWidth(self.collectionView!.bounds) - alignmentWidth) / 2.0

            // Adjust each item's position to be centered
            var previousFrame = CGRectZero
            for itemAttributes in value {
                var itemFrame = itemAttributes.frame

                if CGRectEqualToRect(previousFrame, CGRectZero) {
                    itemFrame.origin.x = alignmentXOffset;
                } else {
                     itemFrame.origin.x = CGRectGetMaxX(previousFrame) + self.minimumInteritemSpacing
                }

                itemAttributes.frame = itemFrame
                previousFrame = itemFrame
            }



        }


        return superAttributes
    }


}

Fabric crashlytics `layoutAttributesForElementsInRect` crash

Reporting a crash following KTCenterFlowLayout update from 1.1.1 to 1.3 on one of my apps.

When looking at the layoutAttributesForElementsInRect in code, the first if in the row loop, doesn't check attrs existence like it doesn't for the other two following if conditions.

The crash come from this first condition when an empty nil attributes is inserted into an array:

Fatal Exception: NSInvalidArgumentException
*** -[__NSArrayM insertObject:atIndex:]: object cannot be nil

Fatal Exception: NSInvalidArgumentException
0  CoreFoundation                 0x18a74c1c0 __exceptionPreprocess
1  libobjc.A.dylib                0x18918455c objc_exception_throw
2  CoreFoundation                 0x18a62bad4 CFStringConvertNSStringEncodingToEncoding
3  Mcdonalds                      0x100324c44 -[KTCenterFlowLayout layoutAttributesForElementsInRect:] (KTCenterFlowLayout.m:40)
4  UIKit                          0x1905f25d4 (Missing)
5  UIKit                          0x1905f1ef4 (Missing)
6  UIKit                          0x190e9087c (Missing)
7  UIKit                          0x190e8dc2c (Missing)
8  Mcdonalds                      0x1001c5730 -[__ setInteractiveStep:] (__.m:81)
9  Mcdonalds                      0x1001c715c __84-[__ observeValueForKeyPath:ofObject:change:context:]_block_invoke (__.m:231)
10 libdispatch.dylib              0x1895d5200 _dispatch_call_block_and_release
11 libdispatch.dylib              0x1895d51c0 _dispatch_client_callout
12 libdispatch.dylib              0x1895d9d6c _dispatch_main_queue_callback_4CF
13 CoreFoundation                 0x18a6f9f2c __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
14 CoreFoundation                 0x18a6f7b18 __CFRunLoopRun
15 CoreFoundation                 0x18a626048 CFRunLoopRunSpecific
16 GraphicsServices               0x18c0a9198 GSEventRunModals
17 UIKit                          0x190600628 (Missing)
18 UIKit                          0x1905fb360 (Missing)
19 Mcdonalds                      0x1000a8134 main (main.m:14)
20 libdispatch.dylib              0x1896085b8 (Missing)

I'll fix this issue on a personal fork and send a pull request. might test this with my own fork on production before it's accepted here.

Align items to left if content size exceeds bounds

Is there any way to align items to the left side if using .scrollDirection = UICollectionViewScrollDirectionHorizontal when they don't fit into the collection view? Right now they centered regardless of that.

I've tried the following:

collectionView.contentOffset = CGPointZero;

But it obviously didn't work.

Also, it seems that there is an issue with horizontal scrolling: if you scroll all the way to the left it scrolls back by itself to the center, but if you do the same for the right side the scroll position sticks.

P.S. Thanks for the great library! It would take me ages to understand how to implement such a custom layout.