ios


spacing between UITableViewCells


I am creating a ios app in swift and want to add spacing between cells like Facebook (pic bellow).
I am using a custom nib for the posts. I know to use UITableViewController. I figure I would use a separator style but it does not achieve the effect. I goggled around for hours and can't find a single tutorial in swift that makes sense! could some one explain how they did it in there app using swift? thanks!
With Swift 2 you can do spacing between UITableViewCells in this way:
In your TableViewController copy this:
// In this case I returning 140.0. You can change this value depending of your cell
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 140.0
}
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
cell.contentView.backgroundColor = UIColor.clearColor()
let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 10, self.view.frame.size.width, 120))
whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 1.0])
whiteRoundedView.layer.masksToBounds = false
whiteRoundedView.layer.cornerRadius = 2.0
whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
whiteRoundedView.layer.shadowOpacity = 0.2
cell.contentView.addSubview(whiteRoundedView)
cell.contentView.sendSubviewToBack(whiteRoundedView)
}
This is the result:
This is my solution with result: (based on Jorge Casariego's answer)
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! CustomApplicationCell
cell.contentView.backgroundColor = UIColor.clear
let whiteRoundedView : UIView = UIView(frame: CGRectMake(10, 8, self.view.frame.size.width - 20, 149))
whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 0.8])
whiteRoundedView.layer.masksToBounds = false
whiteRoundedView.layer.cornerRadius = 2.0
whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
whiteRoundedView.layer.shadowOpacity = 0.2
cell.contentView.addSubview(whiteRoundedView)
cell.contentView.sendSubviewToBack(whiteRoundedView)
return cell
}
table row height: 165 point
header section height, footer section height: 10 point
and result
Edit For Swift 3 Syntax:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomApplicationCell
cell.contentView.backgroundColor = UIColor.clear
let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.size.width - 20, height: 120))
whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
whiteRoundedView.layer.masksToBounds = false
whiteRoundedView.layer.cornerRadius = 2.0
whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1)
whiteRoundedView.layer.shadowOpacity = 0.2
cell.contentView.addSubview(whiteRoundedView)
cell.contentView.sendSubview(toBack: whiteRoundedView)
return cell
}
If you want to have right / legal spacing, not a trick, you can try UICollectionView instead of UITableView.
UICollectionView is more generic than UITableView, and you can custom almost thing on it.
I made a subclass of UITableViewCell and a nib file to go with it. Drag a UIView into the contentView of the cell and to start with, make it the same size as contentView. This will act as a container and become the "new" contentView. You can put what you need in there, just like you would normally in the contentView of a UITableViewCell.
Now you can adjust the height of the container view to leave your desired spacing at the bottom of the cell. Finally, change the background color of the contentView to clearColor, which will complete the effect.
Objective-C version for Jorge Casariego Swift code:
//play with the 'y' parameter of the whiteRoundedView to change the spacing
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
cell.contentView.backgroundColor = [UIColor colorWithRed:225/255.0 green:225/255.0 blue:225/255.0 alpha:1.0];
UIView *whiteRoundedView = [[UIView alloc]initWithFrame:CGRectMake(5, 2, self.view.frame.size.width-10, cell.contentView.frame.size.height)];
CGFloat colors[]={1.0,1.0,1.0,1.0};//cell color white
whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), colors);
whiteRoundedView.layer.masksToBounds = false;
whiteRoundedView.layer.cornerRadius = 5.0;
whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1);
whiteRoundedView.layer.shadowOpacity = 0.2;
[cell.contentView addSubview:whiteRoundedView];
[cell.contentView sendSubviewToBack:whiteRoundedView];
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
//assign the right cell identifier
UITableViewCell *cell = [[self tableView]dequeueReusableCellWithIdentifier:CellIdentifier];
return cell.bounds.size.height;
}
These methods will help you to achieve the spacing:-
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 15;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView *invisibleView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds .size.width, 15)];
[invisibleView setBackgroundColor:[UIColor clearColor]];
return invisibleView;
}
There 2 possible solutions:
1) Use UICollectionView with vertical layout. This is really flexible solution, you can write you own layout for collection. Some amazing results with custom layout
2) Like #sikhapol has commented. But you will have problems with highlight cell. In my project I create common cell with content outlet view, witch contains all content view.
class ShadowContentCell: UITableViewCell {
#IBOutlet var content: UIView!
private var contentBg: UIImageView!
private var contentOverlay: UIImageView!
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.frame = super.frame
}
override func awakeFromNib() {
super.awakeFromNib()
// custom higlight color
selectedBackgroundView = UIView()
selectedBackgroundView.backgroundColor = nil
contentBg = UIImageView(frame: content.bounds)
contentBg.autoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
contentBg.image = UIImage(color: content.backgroundColor)
content.addSubview(contentBg)
content.sendSubviewToBack(contentBg)
contentOverlay = UIImageView(frame: content.bounds)
contentOverlay.autoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
contentOverlay.highlightedImage = UIImage(color: UIColor(white: 0.000, alpha: 0.2))
content.addSubview(contentOverlay)
}
override func setHighlighted(highlighted: Bool, animated: Bool) {
contentOverlay.highlighted = highlighted
if animated {
let transition = CATransition()
transition.duration = 0.3
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.type = kCATransitionFade
contentBg.layer.addAnimation(transition, forKey: nil)
}
}
override func setSelected(selected: Bool, animated: Bool) {
}
}

Related Links

GMSMarker - custom alert/pop-up not using markerInfoWindow
react-native ios project + memory leak
Parsing Error using RestKit : Loaded an unprocessable response (200) with content type 'application/json'
The webview doesn't Display url
Spacing between UITableViews like Settings Application
Google font does not work in IOS system, such as iPad and iPhone
Json Code is not working
How to solve keyboard problems in Swift 3?
How can I customize the scrolling path of a uicollectionview?
preinstalled iOS apps in other languages
inputAccessoryViewController height modification
What could be “advanced” settings in developers.facebook.com/apps/settings/Hybrid Mobile App - android and iOS for Production
How to remotely access a local parse server (parse port and server url)
Download fails when on first use or app goes in background
Function that separates sentences and questions in swift
UISearchController table view results empty

Categories

HOME
uwp
clojure
bootstrap-4
runnable
tags
apacheds
build.gradle
binary-search
dbus
square-connect
avplayer
cytoscape.js
nanotime
google-cloud-sdk
ellipse
calabash-android
flow
valueinjecter
svn2git
pmd
breakpoint-sass
paypal-rest-sdk
ipod-touch
compass-lucene
easy-digital-downloads
mdanalysis
tabview
rating-system
adal.js
federation
multistore
wrk
jasmine2.0
laravel-routing
glfw
node.js-tape
abbyy
masm32
cmsmadesimple
flying-saucer
mysql-error-1050
geneticsharp
sqlite-net
rails-console
webtrends
cufft
facebook-comments
schematiq
ctakes
multiple-files
subroutine
wgs84
ssha
biojava
julian
avalonedit
ppl
byte-order-mark
vraptor
openxls
javaw
conditional-statements
kue
json-web-token
modern-ui
boxapiv2
brooklyn
catalina.out
asf
monk
clearcase-remote-client
nhunspell
custom-titlebar
jquery-backstretch
magic-unipaas
requiredfieldvalidator
android-lru-cache
couchrest
route-me
neventstore
virtual-earth
impdp
dynamic-usercontrols
clean-urls
timestamp-with-timezone
lungojs
harvest
maven-bundle-plugin
time-limiting
ekeventkit
closest
jquery-pagination
etrade-api
android-3.1
android-searchmanager
iequalitycomparer
dynamic-websites
contracts

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App