keighl / ktcenterflowlayout Goto Github PK
View Code? Open in Web Editor NEWAligns collection view cells to the center of the screen.
License: MIT License
Aligns collection view cells to the center of the screen.
License: MIT License
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]];
to
NSMutableArray *superAttributes = [NSMutableArray arrayWithArray:[super layoutAttributesForElementsInRect:rect].copy];
Fixed the issue.
Hope that helps.
thanks for your contributation
i want use KTCenterFlowLayout in IGListKit.
but now,it will lead to a crash.
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 UICollectionViewFlowLayout
on 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?
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?
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?
It is not an issue. I am using KTCenterFlowLayout for my Project. Can you please Update this for Multiple Alignment (Left,Center,RIght). That will be helpful for many cases.
Currently this layout does not center items vertically if scrollDirection is set to vertical
It is centring cells horizontally, but not vertically.
Hi @keighl
Why the version of KTCenterFlowLayout still is 0.0.2 in cocoapods?
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?
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.
Hello, thanks for the layout, it's really cool.
I found a issue which similar to "iPhone 6Plus weird overlap".
#4
I added my screen shot in this issue as well. You make take it for reference.
Thanks again.
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.
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
}
}
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).
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,
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.