How to remove gap between cells in iOS? - ios

I have created a UICollectionView which is having custom cells.Now to main the height width ratio of cell on each device i have added the below code.But for ipad i have defined the fix height/width but in this case it is taking the gap between cells.Please tell me how can i remove the gap between cells?
// 1
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
float first_width_per,first_height_per,final_width,final_height;
first_width_per=((150/self.collectionView.frame.size.width)*100);
first_height_per=((180/self.collectionView.frame.size.height)*100);
first_width_per=46.875000;
first_height_per=48.780487;
final_width=((first_width_per*self.collectionView.frame.size.width)/100);
final_height=((first_height_per*self.collectionView.frame.size.height)/100);
if(IS_IPAD)
{
final_width=200;
final_height=220;
}
return CGSizeMake(final_width, final_height);
}
// 3
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(5, 5, 5, 5);
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 5
;
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 5;
}

Related

how to set constraint for uicollectionview so that it adjusts with all devices

enter image description here/Users/seedoo/Desktop/Simulator Screen Shot 28-Jul-2017, 1.33.59 PM.png
/Users/seedoo/Desktop/Simulator Screen Shot 28-Jul-2017, 1.34.37 PM.png
The gaps between the cells is less in iPhone 5s device than in 6s.Please let me know how to solve this issue.Thanks in advance.
Try this : make changes in all methods as per your needs
Objective C
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(collectionView.frame.size.width/2 -5, 135); // 2 is indicates number of cell in sigle row
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(0, 0, 0, 0);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 10.0f;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 10.0f;
}

The UICollectionViewCell do not flow according to common sense

I set my UICollectionView's delegate methods:
#pragma mark - collectionView delegate
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
//CGPoint point = self.collectionView.frame.origin;
//CGRect rect = CGRectMake(point.x, point.y, self.collectionView.bounds.size.width, 70*2);
// height
/*_heightOfCollectionView.constant = kHeight_Collection_Cell * 6;
_heightOfContents.constant = collectionView.frame.origin.y + 230 + _heightOfCollectionView.constant;*/
return 12;//_recommendDataArr.count;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewFlowLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
float width = (self.view.bounds.size.width / 2);
float height = 89; // 89
return CGSizeMake(width, height);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
HomeGMCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"HomeGMCell" forIndexPath:indexPath];
if (cell == nil) {
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"HomeGMCell" forIndexPath:indexPath];
}
return cell;
}
The minimumLineSpacingForSectionAtIndex is 0:
And you see I return the Cell's size's width is:
(self.view.bounds.size.width / 2) // attention: no matter is `(self.view.bounds.size.width / 2) - ?(?=1,2,3,4)` it all get the below issue:
But I get the result:
It did not flow to the 2 cols. it flows to one flow.
But if I set the Cell's size's width (self.view.bounds.size.width / 2) - 5 in the sizeForItemAtIndexPath method, I will get the below effect:
It shows two cols, it my requirement, but however there comes an other issue is, the right has a 10px's space.
How to avoid this issue in UICollectionView?
Add this method for padding .
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(SCREEN_WIDTH/2 -5, 89);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(0, 0, 0, 0);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 10.0f;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 10.0f;
}

iOS Define Number of Cell according to Page in UICollectionview (Collectionview with Paging)

I am working on Collectionvew with Paging . I am Successfully able to done collectionview with Paging. and It's work perfectly.
But the problem is i need only 10 cell in 1 page , then another 10 cell 2nd page and Next 10 cell in 3rd page. but I dont know How can i achive it when page changed.And i also want to change the title when page changed like , Easy ,Medium and Hard(Levels).
Currently i take 30 cells in collectionview . Here is my methods for collectionview ,
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView
numberOfItemsInSection:(NSInteger)section
{
return kNumberOfCells;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier = #"GameCollectionViewCell";
GameCollectionViewCell *cell = (GameCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
if (cell == nil)
{
NSArray *xib = [[NSBundle mainBundle] loadNibNamed:#"HomeCollectionViewCell" owner:self options:nil];
cell = [xib objectAtIndex:0];
}
cell.lblLevel.text=[NSString stringWithFormat:#"%d",indexPath.item+1];
cell.lblLevelPoints.text=#"points";
return cell;
}
#pragma mark – UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
float width = collectionView.frame.size.width/6.4;//120
float height = collectionView.frame.size.height/4;//120
return CGSizeMake(width,width);
}
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(8.0, 14.0, 5.0, 14.0);//TOP , LEFT ,BOTTOM ,RIGHT
}
Output Currently i am getting :-
There are two solutions :
Solution 1 :
You can take number of section 3. Each section with 10 items. With each section you have change current page of UIPageControl and change title too.
Solution 2:
Place PageControl in your view or set by Code.
Set UIScrollViewDelegate
In Collectionview-> cellForItemAtIndexPath (Method) add the
below code for calculate the Number of pages,
int pages =floor(ImageCollectionView.contentSize.width/ImageCollectionView.frame.size.width);
[pageControl setNumberOfPages:pages];
Add the ScrollView Delegate method
pragma mark - UIScrollVewDelegate for UIPageControl
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGFloat pageWidth = ImageCollectionView.frame.size.width;
float currentPage = ImageCollectionView.contentOffset.x / pageWidth;
if (0.0f != fmodf(currentPage, 1.0f))
{
pageControl.currentPage = currentPage + 1;
}
else
{
pageControl.currentPage = currentPage;
}
NSLog(#"finishPage: %ld", (long)pageControl.currentPage);
}
Reference Link :
Collectionview + Pagecontrol
Update:
There is one sample code also made by me on Github. It help you :
https://github.com/maniyarpayal/PagingWithCollectionView
try this delegate methods,
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake((self.view.frame.size.width / 5) , self.view.frame.size.height / 2);
}
- (NSUInteger)maximumNumberOfColumnsForCollectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout
{
return 5;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 0.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0.0;
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0, 0, 0, 0);
}
i have also same problem, then use the above methods its will working for me, hope its helpful.
you can use this delegate method but you have to customise according to your requirement because i did not mention distance between cells and x-origin .and you have to do minus those distance from view width. hope this will help you.
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake((self.view.frame.size.width / 10) , self.view.frame.size.height / 2);
}

iOS UICollectionViewCell

I am trying to make the spacing between my cells = 5
In the iPhone 4s the UICollectionViewCell becomes a square but I need rectangle.
I need iPhone4s iPhone5 iPhone6 iPhone 6Plus the cell, but the width and height of the cell is always wrong. I don't know how to do it automatically.
This is my code:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(([UIScreen mainScreen].bounds.size.width - 20) /2, ([UIScreen mainScreen].bounds.size.height) /3);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(5, 5, 5, 5);
}
What am I missing? Thanks in advance!
some change in your code will works fine
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
int itemWidth=([UIScreen mainScreen].bounds.size.width - 20)/2;
int intemHeight=itemWidth*2/3;
return CGSizeMake(itemWidth, intemHeight);
}

UICollectionView content not resizing properly

I'm using a collection view inside of a static table view cell and I'm using autolayout to define the collection view's frame. Also, I'm using FlowLayout as the collectionViewLayout.
The problem:
The behaviour is just as expected for the iPhone 4s and 5 screen. (same width)
Once the width changes (iPhone 6 and 6 Plus), the collection view resizes properly, but the content keeps it size.
This happens both for the cells and for the sections.
Extra info:
I'm setting collectionViewLayout minimumInteritemSpacingForSectionAtIndex to zero.
The width of the cells is always being set to tableView.frame.size.width / 2
Where I configure the layout:
CGFloat headerHeight = 52;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
collectionViewLayout.headerReferenceSize = CGSizeMake(self.width, headerHeight);
This is what it looks now. The green part represents the UICollectionView. Black and blue the cells. The dividing lines should be resizing and the cells should be divided in 2 columns.
From the code you posted, you are just setting the size for the header but I suppose you also have something like
collectionViewLayout.itemSize = CGSizeMake(self.collectionView.frame.width/2, height);
The important part is in which method you configure this, because if you do it in viewDidLoad the views are not correctly layouted yet so the width would just be the one set in the storyboard, no matter on which device you run your app.
The solution would be to place the code above in viewWillLayoutSubviews
- (void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
collectionViewLayout.itemSize = CGSizeMake(self.collectionView.frame.width/2, height);
collectionViewLayout.headerReferenceSize = CGSizeMake(self.collectionView.frame.width/2, height);
}
Another way would be to implement the flowLayout delegate method:
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return cCGSizeMake(collectionView.frame.width/2, CUSTOM_HEIGHT);
}
// The same for the header
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
return cCGSizeMake(collectionView.frame.width/2, CUSTOM_HEIGHT);
}
Make sure you set the delegate for the collectionView
Let me know how it goes :)
Update
For the cells, add these methods too:
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return CGRectZero;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 0;
}
As for the sectionHeader, maybe you need to check the constraints you have there, for the separator for example.
Be sure to use all the following for precise styling:
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
To change the cell content size, use this:
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake((kScreenWidth/2-8), 44); // Use your own X and Y sizes
}

Resources