UICollectionView remove whitespace/header iOS11 - ios

I have a UICollection view which looks like this (see two purple and blue borders):
On iOS 10 there is no header/whitespace, but on iOS11 there is. I've tried everything mentioned here: How can I enable/disable section headers in UICollectionView programmatically?
And my code currently looks like this:
- (void) viewDidLoad
{
[super viewDidLoad];
autocompleteLayout = [[SQLProAutocompleteFlowLayout alloc] init];
autocompleteLayout.headerReferenceSize = CGSizeZero;
autocompleteCollectionView = [[UICollectionView alloc] initWithFrame: CGRectZero
collectionViewLayout: autocompleteLayout];
autocompleteCollectionView.insetsLayoutMarginsFromSafeArea = NO;
[self.view addSubview: autocompleteCollectionView];
// removed layout code (leftAnchor, rightAnchor, topAnchor, bottomAnchor).
autocompleteCollectionView.delegate = self;
autocompleteCollectionView.dataSource = self;
// Removed nib register code
self.view.layer.borderColor = [UIColor redColor].CGColor;
self.view.layer.borderWidth = 1;
autocompleteCollectionView.layer.borderColor = [UIColor blueColor].CGColor;
autocompleteCollectionView.layer.borderWidth = 2;
}
- (CGSize) collectionView: (UICollectionView *) collectionView
layout: (UICollectionViewLayout *) collectionViewLayout
referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeZero;
}
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
referenceSizeForFooterInSection:(NSInteger)section
{
return CGSizeZero;
}
And my FlowLayout looks like this:
- (void) setupLayout
{
self.minimumInteritemSpacing = 0;
self.minimumLineSpacing = 0;
self.scrollDirection = UICollectionViewScrollDirectionVertical;
} // End of setupLayout
- (void) prepareLayout
{
[super setItemSize: [self itemSize]];
[super setSectionInset: [self sectionInset]];
self.minimumLineSpacing = 0;
[super prepareLayout];
} // End of prepareLayout
- (CGFloat) itemWidth
{
return self.collectionView.frame.size.width;
}
- (CGSize) itemSize
{
CGSize result = CGSizeMake(self.collectionView.frame.size.width,
rowHeight);
return result;
}
- (void) setItemSize:(CGSize)itemSize
{
self.itemSize = CGSizeMake(self.collectionView.frame.size.width,
rowHeight);
}
- (CGPoint) targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset
{
return CGPointZero;
}
I have also verified that the UICollectionView's contentInset is zero'd out.
What am I missing? Why does my UICollectionView still have whitespace?

In iOS 11, there have been some changes to UIScrollView.
Try setting the contentInsetAdjustmentBehavior property
collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

Try this:
self.automaticallyAdjustsScrollViewInsets = false
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 0;
}
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(-25,0,0,0); // top, left, bottom, right
}

Related

CollectionViewItem aren't allocated correctly on iPhoneX screen

My iOS application has not yet support iPhoneX layout.
That is my application doesn't have Launch Screen for iPhoneX (1124x2436, 2436x1124).
Thus on iPhoneX, UI my application is shown on 735x1334 area. It's OK.
Now I added UICollectionView on the top of my view.
I assigned the size of CollectionViewItem so that the CollectionView has 6 items horizontally.
On iPhone8(iOS11.2) the CollectionViewItems were allocated as I intended.
But on iPhoneX(iOS11.2) the CollectionView has 2 rows and first row is blank, so it's even scrollable.
I'd appreciate it if you would tell me the way to layout my collectionview as I intended.
My code is like below,
View Controller.m
- (void)loadView
{
self.view = [[FirstView alloc] init];
}
FirstView.m
- (id)init
{
self = [super init];
if (self) {
self.backgroundColor = UIColor.whiteColor;
[self initGridView];
}
return self;
}
- (void)initGridView
{
_gridView = [[GridView alloc] init];
[self addSubview:_gridView];
}
- (void)layoutSubviews
{
[super layoutSubviews];
[self layoutGridView];
}
- (void)layoutGridView
{
CGSize parentSize = _gridView.superview.frame.size;
_gridView.frame = CGRectMake(0, 0, parentSize.width, 48);
}
GridView.m
- (id)init
{
self = [super initWithFrame:CGRectZero collectionViewLayout:[[UICollectionViewFlowLayout alloc] init]];
if (self) {
self.delegate = self;
self.dataSource = self;
[self registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];
self.backgroundColor = UIColor.grayColor;
}
return self;
}
#pragma mark -
#pragma mark UICollectionViewDataSource
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
NSString *cellName = NSStringFromClass([UICollectionViewCell class]);
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellName forIndexPath:indexPath];
if (indexPath.row % 2 == 0) {
cell.contentView.backgroundColor = UIColor.blueColor;
}
else {
cell.contentView.backgroundColor = UIColor.orangeColor;
}
return cell;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 6;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize selfSize = self.frame.size;
CGFloat width = selfSize.width / 6;
return CGSizeMake(width, 48);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
I've resolved the issue by adding the following line in my init() method of GridView.m file.
if #available(iOS 11.0, *) {
self.collectionView.contentInsetAdjustmentBehavior = .never
} else {
// Fallback on earlier versions
}
Thank you.

The offset of grid view(UICollectionView) shift gradually with paging scroll

I'm creating Grid View with UICollectionView and want to scroll it by paging.
Now I have a problem. The offset of grid gradually shift by paging scroll.
I want to fit the left top of next page cell to that of screen.
My code is like below,
ViewController.m
- (void)loadView
{
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
self.view = [[GridView alloc] initWithLayout:layout];
}
- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationController.navigationBarHidden = YES;
}
- (BOOL)prefersStatusBarHidden
{
return YES;
}
GridView.m
#define GRID_SPACE (20)
- (id)initWithLayout:(UICollectionViewFlowLayout *)layout
{
self = [super initWithFrame:CGRectZero collectionViewLayout:layout];
if (self) {
self.pagingEnabled = YES;
self.backgroundColor = UIColor.redColor;
self.delegate = self;
self.dataSource = self;
[self registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];
}
return self;
}
#pragma mark -
#pragma mark UICollectionViewDelegate
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize selfSize = self.frame.size;
return CGSizeMake( (selfSize.width - GRID_SPACE) / 2, (selfSize.height - GRID_SPACE) / 2 );
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return GRID_SPACE;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return GRID_SPACE;
}
I'd appreciate if you would provide me a good solution.
Thank you.
The page size of an UIScrollView (which UICollectionView inherits from) is the size of it's viewport, so to make it work you need to include the height of the red border at the top. If you don't want to show the border at top or bottom, then you can let the UICollectionView stretch under another element or under the top of the display if it is aligned at the top.
LGP's answer resolved my problem. Resolved code I added to my GridView.m is below,
Add the length of grid item to the height of CollectionView, because the theight is the length of Paging Scroll.
And more, you need to set the length of grid item as bottom of CollectionView insets.
In GridView.m
- (void)layoutSubviews
{
[super layoutSubviews];
CGSize parentSize = self.superview.frame.size;
self.frame = CGRectMake(0, 0, parentSize.width, parentSize.height + GRID_SPACE);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0, 0, GRID_SPACE, 0);
}

set Dynamic width and height of collection view cell

Actually i want to set button dynamically and title of button appear Dynamic i have try this and got width of Dynamic content but am not setting cell width and height.
- (void)viewDidLoad {
[super viewDidLoad];
ContentArray = [[NSMutableArray alloc]init];
self.collectionview.delegate = self;
self.collectionview.dataSource =self;
self.collectionview.backgroundColor = [UIColor clearColor];
[ContentArray addObject:#"Planning"];
[ContentArray addObject:#"Resources"];
[ContentArray addObject:#"Human Resources"];
[ContentArray addObject:#"Agriculture"];
[ContentArray addObject:#"Resources management"];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return ContentArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell * Cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"CollectionViewCell"forIndexPath:indexPath];
[Cell.button setTitle:[ContentArray objectAtIndex:indexPath.row] forState:UIControlStateNormal];
return Cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGRect rect = [[ContentArray objectAtIndex:indexPath.row ] boundingRectWithSize:CGSizeMake(HUGE_VALF, 50) options:NSStringDrawingUsesFontLeading attributes:nil context:nil] ;
return CGSizeMake(rect.size.width, 50);
}
and output is like this
This is perfect i think if i make cell dynamic width and height, so please guide me through this.
pragma mark - GetHeightFromString
- (CGFloat)getTextHeightFromString:(NSString *)text ViewWidth:(CGFloat)width WithPading:(CGFloat)pading FontName:(NSString *)fontName AndFontSize:(CGFloat)fontSize
{
NSDictionary *attributes = #{NSFontAttributeName: [UIFont fontWithName:fontName size:fontSize]};
CGRect rect = [text boundingRectWithSize:CGSizeMake(width, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:attributes
context:nil];
//NSLog(#"rect.size.height: %f", rect.size.height);
return rect.size.height + pading;
}
Get height of the string from this method and add this to origional height of your cell or label or button whatever you want to use.
For example:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
YourCellClass *myCell = (YourCellClass*) [collectionView cellForItemAtIndexPath:indexPath];
CGFloat sizeFromString = [self getTextHeightFromString:itemObject.MenuDescription ViewWidth:myCell.frame.size.width WithPading:10 FontName:#"HelveticaNeue" AndFontSize:13];
return CGSizeMake(sizeFromString, sizeFromString);
}
You might need to change the height of inner label too, for this use same method in cellForItemAtIndexPath method of your UICollectionView.
Further more you can customize your own way.
In Swift 2.0:
Using a UICollectionViewFlowLayout enable cell auto-sizing.
The following code inside a UICollectionViewController subclass will enable auto-sizing for it’s flow layout.
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
if let cvl = collectionViewLayout as? UICollectionViewFlowLayout {
cvl.estimatedItemSize = CGSize(width: 150, height: 75)
}
}
You can put different sizes in landscape & portrait mode try this -
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
// Adjust cell size for orientation
if (UIDeviceOrientationIsLandscape([[UIApplication sharedApplication] statusBarOrientation])) {
return CGSizeMake(rect.size.width, 50);
}
return CGSizeMake(rect.size.width, 50);
}
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
[self.collectionView performBatchUpdates:nil completion:nil];
}
you can call invalidateLayout method on the .collectionViewLayout property of your UICollectionView
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
[yourCollectionView.collectionViewLayout invalidateLayout];
}
You can try this...
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(width, height);
}
width, height are the dynamically calculated value
Thanks

How can I remove the space between UICollectionViewCells?

I was trying to remove the space between UICollectionView and this is the screenshots from device
I am really trying to avoid those spaces(blue color) and i have tried following codes
This is my collectionview delegate
#pragma mark <UICollectionViewDataSource>
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 30;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor redColor];
return cell;
}
First I tried this one, and its not working
- (void)viewDidLoad {
[super viewDidLoad];
UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc] init];
flow.itemSize = CGSizeMake(cell.frame.size.width, cell.frame.size.height);
flow.scrollDirection = UICollectionViewScrollPositionCenteredVertically;
flow.minimumInteritemSpacing = 0;
flow.minimumLineSpacing = 0;
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"Cell"];
}
and I tried this one also, its not working
#pragma mark collection view cell paddings
- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(0, 0, 0, 0); // top, left, bottom, right
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 5.0;
}
Please help me to fix this.
So there is properties and methods can limit the minimum space, such as minimumInteritemSpacingForSectionAtIndex
However it is just the 'minimum space' not always the max space.
This what I am using: borrow from Cell spacing in UICollectionView
Override standard flow layout:
- (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *answer = [super layoutAttributesForElementsInRect:rect];
for(int i = 1; i < [answer count]; ++i) {
UICollectionViewLayoutAttributes *currentLayoutAttributes = answer[i];
UICollectionViewLayoutAttributes *prevLayoutAttributes = answer[i - 1];
NSInteger maximumSpacing = 4;
NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);
if(origin + maximumSpacing + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width) {
CGRect frame = currentLayoutAttributes.frame;
frame.origin.x = origin + maximumSpacing;
currentLayoutAttributes.frame = frame;
}
}
return answer;
}
maximumSpacing could be set to any value you prefer
From storyboard also you can set the spacing attributes. Select your collection view - select size inspector tab, there you can adjust minimum spacing for for cells or for lines.
And you can adjust section insets also.
flow.sectionInset = UIEdgeInsetsMake(1, 1, 1, 1);
Use sectionInset for your UICollectionViewFlowLayout in viewdidload.
See my answer on how to adjust UICollectionView width (using AutoLayout constraint) to fit all cells perfectly without any spacing between them.

How to remove spacing between lines in UICollectionView programmatically?

I have a UICollectionView and I can't get 0 spacing between lines. I have added UICollectionViewDelegateFlowLayout in .h class and implemented
(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
and
(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section**
methods set them to return 0.0. Also in ViewDidLoad I dynamically created UICollectionViewFlowLayout and UICollectionView. For UICollectionViewFlowLayout I set minimumInteritemSpacing and minimumLineSpacing to 0 but space between lines is still more than 0.
This is my code:
- (void)initializeCollectionView {
UICollectionViewFlowLayout* flowLayout = [[UICollectionViewFlowLayout alloc]init];
flowLayout.itemSize = CGSizeMake(50, 100);
[flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
[flowLayout setMinimumLineSpacing:0.0];
flowLayout.minimumInteritemSpacing = 0;
flowLayout.minimumLineSpacing = 0;
collView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, self.view.frame.size.height-70) collectionViewLayout:flowLayout];
[collView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"Cell"];
[collView setBackgroundColor:[UIColor grayColor]];
collView.delegate = self;
collView.dataSource = self;
[[self view] addSubview:collView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 100;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 0.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 0.0;
}
- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(0, 0, 0, 0);
}
Thank you for your answers.
I did it in a little different way. I created a collectionView programatically and added that to the view Controller. In my CollectionView Custom Class, I did all the customisation.
My Custom Collection View interface file-
#import <UIKit/UIKit.h>
#import "CustomCell.h"
#interface CustomCollectionView : UIView<UICollectionViewDelegateFlowLayout, UICollectionViewDataSource, UICollectionViewDelegate>
#property(nonatomic, strong) UICollectionView *myCollectionView;
#end
Now in the implementation File(CustomCollectionView.m), first I had to initialise and add my collectionView.
initWithFrame is called as soon as the view is drawn. So, I added my collectionView inside this view and let this view deal with all the delegate methods to customise my collection view and populate data through datasource methods.
-(id)initWithFrame:(CGRect)frame{
self=[super initWithFrame:frame];
if(self){
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
self.myCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 20, frame.size.width, frame.size.height) collectionViewLayout:flowLayout];
self.myCollectionView.backgroundColor=[UIColor whiteColor];
self.myCollectionView.delegate=self;
self.myCollectionView.dataSource=self;
[self.myCollectionView registerClass:[CustomCell class] forCellWithReuseIdentifier:#"customCell"];
[self addSubview:self.myCollectionView];
}
return self;
}
Now, let's implememt the UICollectionViewDelegateFlowLayout methods
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 0;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
//here I just made sure that I have square spaces boxes as my cell size
int width = self.myCollectionView.frame.size.width/5;
int height = width;
return CGSizeMake(width, height);
}
Now the UICollectionView Datasource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 5;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 7;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
CustomCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:#"customCell" forIndexPath:indexPath];
if(cell){
//customize the cell here
return cell;
}
}
Now when my custom view with collectionView is ready, I just added that to my viewController.
- (void)viewDidLoad {
[super viewDidLoad];
CustomCollectionView *myCollectionView = [[CustomCollectionView alloc]initWithFrame:CGRectMake(0, 10, self.view.frame.size.width, self.view.frame.size.height)];
[self.view addSubview: myCollectionView];
}
The above worked for me. You can do with storyboard to, but I found some complication when I tried to customise a collectionView connected by IBOutlet. So, I took this approach. There may be better ways to do that.

Resources