How to give space between two cells in tableview?
IphoneObjective CCocoa TouchUitableviewIos4Iphone Problem Overview
I want a space between two cell in table view,
I want cell like this,
How can i do that?
Iphone Solutions
Solution 1 - Iphone
you can't set distance between cells directly, but you can set the height for header in section to achieve the same result.
1.set the numbers of cell you need as sections:
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 3; // in your case, there are 3 cells
}
2.return only 1 cell for each section
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}
3.set the height for header in section to set space between cells
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 10.; // you can have your own choice, of course
}
4.set the header's background color to clear color, so it won't look weird
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] init];
headerView.backgroundColor = [UIColor clearColor];
return headerView;
}
Solution 2 - Iphone
The Best way to get space between two cells in TableView, declare the numbers of sections you want in delegate method of numberofsections this way
For example you have array of 10 objects
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return [array count]; //array count returns 10
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 1;// this should be one because it will create space between two cells if you want space between 4 cells you can modify it.
}
Then the important point is in cellForRowAtIndexPath delegate method you need to use indexpath.section but not indexpath.row
cell.textLabel.text=[NSString stringWithFormat:@"%@",[array objectAtIndex:indexPath.section]];
That is is check your tableview for the space between two cells. Enjoy!
Solution 3 - Iphone
You can create a Sections of TableView also in the UITableView... This methods are compulsory so create sections and in each section you can create single cell as in your picture..
Solution 4 - Iphone
The multiple sections answer would work, but it's extremely brittle, and doesn't allow for actual sections. Instead, you should create a custom cell, or custom cell prototype that simply has a gap at the bottom and/or top.
Use your struts and springs in IB to maintain that uniform gap, and use heightForRowAtIndexPath to return a height that includes the gap.
Solution 5 - Iphone
Objective - C
UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 3)];/// change size as you need.
separatorLineView.backgroundColor = [UIColor whiteColor];// you can also put image here
[cell.contentView addSubview:separatorLineView];
Swift 3 (This same will work for Swift 4 also)
var separatorLineView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 3))
/// change size as you need.
separatorLineView.backgroundColor = UIColor.white
// you can also put image here
cell.contentView.addSubview(separatorLineView)
It worked for me.
Solution 6 - Iphone
If someone looking for Swift version. Here you go.
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 10; // space b/w cells
}
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return items.count // count of items
}
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = UIView()
header.userInteractionEnabled = false
header.backgroundColor = UIColor.clearColor()
return header
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
Solution 7 - Iphone
For people that looking for alternative way of showing gaps between cells without using sections, you may want to show alternate colours and height like below. Use clearColor
for the spacing.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
if (indexPath.row % 2 == 1)
{
static NSString *CellIdentifier = @"cellID1";
UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:CellIdentifier];
}
cell.backgroundColor = [UIColor colorWhite];
return cell;
} else {
static NSString *CellIdentifier2 = @"cellID2";
UITableViewCell *cell2 = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier2];
if (cell2 == nil) {
cell2 = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:CellIdentifier2];
}
cell2.backgroundColor = [UIColor clearColor];
return cell2;
}
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.row % 2 == 1) {
return 40.0;
} else {
return 2.0;
}
}
Solution 8 - Iphone
Add these lines in the cellForRowAtIndexPath
UITableViewDelegate
method before returning the cell.
let separator = UIView(frame: CGRectMake(0, 0, cell!.bounds.size.width, 1))
separator.backgroundColor = UIColor.whiteColor()
cell.contentView.addSubview(separator)
Solution 9 - Iphone
Sometimes, you might really want to keep the tableview divided in rows, and have 1 section. For example, this could happen if you need to display a custom header for that table view that stays in place when you scroll through the section.
What I would recommend doing in this case, is returning a bigger float than the normal height of a cell in:
- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
and then making sure that the table style is Plain, and that the cell separator is none. You can do that in the XIB file itself, or in code:
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.tableView.style = UITableViewStylePlain;
Maybe also add the cell's selection style to none (otherwise it will look like you are selecting more than just the visible part of the cell).
cell.selectionStyle = UITableViewCellSelectionStyleNone;
This will give the impression of space between the cells, but at the same time keeping them as rows in one section (which sometimes is what you want).
Solution 10 - Iphone
I have used a simple and quick approach for this (using storyboard)
- Add UITableView in your controller
- Set the separator style to none (from attributes inspector)
- Set the height of the row 5 pts more from top and bottom from the desired height
- Now add an image in the cell, pin it from left and right but leave 5 pts space (for padding like feel) and set the background of the image same as the background you want for cell
When the table view will be loaded, it will feel like there are spaces between cells.
Solution 11 - Iphone
For spacing between cells like the ones in your screenshot, there is no need for custom cells (for their look anyway, like the gradient bkg and so on, this could anyway be a good idea, but this won't help for your spacing between cells)
To achieve this kind of spacing, simply use different sections in your UITableView.
[EDIT] Everything is explained In Apple's TableView Programming Guide (and that's worth reading it, as it contains a lot of stuff you should know about tableviews)
Solution 12 - Iphone
What you're trying to achieve, visually, would be the same as adding the content of each cell inside a container View with a gray background, and having that view inside the cell. I don't think there's a need to add spaces between cells.
Solution 13 - Iphone
I don't know why all the answers that complicated. KIS, only using storyboard I've put a UIView inside the tableCell Content View; now the UIView height is less than Content View height, and that's it!
Play with the Content View color and the UIView color to get the desired result.
Solution 14 - Iphone
My easy solution using Swift :
// Inside UITableViewCell subclass
override func layoutSubviews() {
let f = contentView.frame
let fr = UIEdgeInsetsInsetRect(f, UIEdgeInsetsMake(10, 10, 10, 10))
contentView.frame = fr
}
or one line code
override func layoutSubviews() {
contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}
Solution 15 - Iphone
*** WORKING WITH IOS 9 XCODE 7.3 ***
The most straight forward way to achieve this is to simply add this code to your cellForRowAtIndexPath method.
cell.separatorInset.left = 20.0
cell.separatorInset.right = 20.0
cell.separatorInset.top = 20.0
cell.separatorInset.bottom = 20.0
cell.layer.borderWidth = 3
cell.layer.cornerRadius = 20.0
cell.layer.borderColor = UIColor.flatSkyBlueColorDark().CGColor
Then go to your story board and click on the tableview. Go to identity inspector and change the View's background color to whatever border color was set in the method. Voila! Play with the values to get the desired output. Hope this helps!
Note: If using Chameleon library you must set the background color for the view in code, not via the story board plugin. For some reason the color seems to be off by a shade.
Solution 16 - Iphone
best way to do that use xib file and give top and bottom constraint to it. for example, here I give bottom constraint 10 and make sure give perfect height to cell as shown as given below.here in code 'joinTableViewCell' is fileName of xib file.
extension JoinTableViewController: UITableViewDataSource,UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 4
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = Bundle.main.loadNibNamed("joinTableViewCell", owner: self, options: nil)?.first as! joinTableViewCell
cell.ImgView.layer.masksToBounds = true
cell.ImgView.cornerRadius(cell.ImgView.bounds.width / 2)
cell.lblName.text = "Christian Bell"
cell.lblJoin.text = "Joined"+"\t"+"Sep 3"
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 90
}
}
Solution 17 - Iphone
Well what I did is simply simulate the space by creating a simple custom cell that is a little larger than what I want (cell + gap/2), and then put all my cell's content in an inner-view.
Then put your cell's topmost view as the color of your background, and the inner-view as your actual cell. And you'll have the illusion of having space between cells, when it's actually just a larger cell with borders.
Solution 18 - Iphone
In Table View DataSource there are two methods named number of sections and number of rows In sections return 3; In Rows return 1;
Solution 19 - Iphone
You don't have to assign each section for each cell. Just create a UIView (container) inside your cell, margin it with cell's view. And we layout components like label, text, image on that container.
Solution 20 - Iphone
I suggest to create a custom UITableViewCell
base class and use this class like below,
- Create custom
UITableViewCell
class - Create a
UIView
in new class, this will act as the 'baseContentView
' and it will be immediate child of 'UITableViewCell.contentView
' - Adjust the top '
padding
' on 'baseContentView
' (this will be the separator/gap) from parent view (UITableViewCell.contentView
) - Inherit all your custom classes from this class rather than
UITableViewCell
- Add all the content/subviews to '
baseContentView
' rather than 'self.contentView
'
You can play with the 'padding
' as per your need.
Solution 21 - Iphone
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return __titlesArray.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 10;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *header = [[UIView alloc]init];
header.backgroundColor = [UIColor clearColor];
return header;
}
Solution 22 - Iphone
I use like:
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 194.0;
}
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
cell.contentView.backgroundColor = UIColor.clearColor()
let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 185))
whiteRoundedView.backgroundColor = UIColor( red: CGFloat(61.0/255.0), green: CGFloat(117.0/255.0), blue: CGFloat(147.0/255.0), alpha: CGFloat(1.0))
whiteRoundedView.layer.masksToBounds = false
whiteRoundedView.layer.cornerRadius = 3.0
whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
whiteRoundedView.layer.shadowOpacity = 0.5
cell.contentView.addSubview(whiteRoundedView)
cell.contentView.sendSubviewToBack(whiteRoundedView)
}
Get Color Code RGB values from:
Solution 23 - Iphone
- first create 2 sections in table view.
- create an empty cell.
- create the cell with data you want to display.
- use the method
-
(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.section==0) {
if (indexPath.row % 2 != 1) { return 15.0; } else { return 100; } } else
if (indexPath.row % 2 != 1) { return 100.0; } else { return 15.0; }
}
It will add space between the cells. It worked for me.
Solution 24 - Iphone
Here is my method with Swift 3:
In ViewDidLoad(), add:
self.tableView.rowHeight = 500.0
In tableview "CellForRowAt", add following:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
// Configure the cell...
var actualContentView = UIView()
actualContentView.frame = CGRect(x: 10, y: 10, width: cell.contentView.frame.width - 20, height: cell.contentView.frame.height - 20)
actualContentView.backgroundColor = UIColor.blue
cell.contentView.addSubview(actualContentView)
return cell
}
Solution 25 - Iphone
in your cellForRowAt
cell.layer.borderWidth = 2
cell.layer.cornerRadius = 10
cell.layer.borderColor = UIColor.systemBackground.cgColor
Solution 26 - Iphone
I have checked all the answers but I think this is the easiest way:
UIView * theContentView = [UIView alloc]initWithFrame:CGRectMake(0,gap,width,height)];
theContentView.backgroundcolor = [UIColor lightGrayColor];//contentColor
cell.backgroundcolor = [UIColor blackColor];//gapColor
[cell addSubview: theContentView]
The prototype code says You can create a subview to show the content of cell and the rest is the gap as you wish.