I have created a table view as
var tblView : UITableView = UITableView()
tblView.frame = CGRectMake(0, 168, 320-50 , 450)
tblView.separatorColor = UIColor.clearColor()
tblView.scrollEnabled = false
tblView.rowHeight = 39
self.addSubview(tblView)
tblView.delegate = self
tblView.dataSource = self
tblView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "myCell")
Now i am trying to add custom view to the tableviewcell as
//MARK: table view data source methods
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier("myCell") as UITableViewCell
var cellImgView:UIImageView = UIImageView()
cellImgView.frame = CGRectMake(cell.contentView.frame.origin.x+10, cell.contentView.frame.size.height, 20, 20)
let cellImage = UIImage(named: self.cellImgs[indexPath.row])
cell.backgroundColor = UIColor(red: 0.000, green: 0.400, blue: 0.404, alpha: 1.00)
cellImgView = UIImageView(image: cellImage)
cell.contentView.addSubview(cellImgView)
return cell
}
Only first image is at correct position and other are overlapped.Why is this happening?
cellForRowAtIndexPath will called each time when cell in user's sight.
But you need add UIImageView only once. So, you need to check, is there is the first call.
Also, it is good practice to use custom UITableViewCell
Tableview is reusing created cells, so your approach is not the best. What you are doing now is creating UIImageView everytime a cell is being used and if its a cells that is going to be reused you will create new UIImageView on top of your previous one.
I would suggest to do all this in interface builder. If you dont want to, at least subclass UITableViewCell and create image view in init method of your cell, that will take care of overlapping UIImageviews over each other, but still consider using interface builder, its the easiest way to build tableviews.
EDIT
Here's some tutorial on tableviews in interface builder, this should help you get started: http://shrikar.com/blog/2015/01/17/uitableview-and-uitableviewcell-customization-in-swift/
Good luck!
Related
I have a problem when i use the function tableView. I show you my code :
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cardCell", for: indexPath) as! OpsCardCell
cell.workTest(drawCard: .selectOpponent)
return cell
}
In the exemple I have 4 cell and when I scroll in the simulator the cell who are out of the screen and come back, the cell is again called. And since I draw the card dynamically, the card was drawn several times and the shadow I adds too many times. I show you the screen before and after:
after few scroll down and scroll up:
this is because the function tableView called many times the cell [0] and [3]
This is my code to draw the card:
func drawBasiqCard(){
let cardView = UIView()
self.addSubview(cardView)
cardView.frame = CGRect(marginCardWidth,
marginCardHeight,
self.bounds.size.width - (marginCardWidth*2),
self.bounds.size.height - (marginCardHeight*2))
cardView.layer.cornerRadius = 10
let rounding = CGFloat.init(10)
let shadowLayer = CAShapeLayer.init()
shadowLayer.path = UIBezierPath.init(roundedRect: cardView.bounds, cornerRadius: rounding).cgPath
shadowLayer.fillColor = UIColor(rgb: 0xaaccbb).cgColor
shadowLayer.shadowPath = shadowLayer.path
shadowLayer.shadowColor = UIColor.black.cgColor
shadowLayer.shadowRadius = 5
shadowLayer.shadowOpacity = 0.2
shadowLayer.shadowOffset = CGSize.init(width: 0, height: 0)
cardView.layer.insertSublayer(shadowLayer, at: 0)
}
So my question is, what is wrong with my code? And there is another way to solve my problem ?
thanks to your reply !
You should try to add sublayer at once in your awakefromnib method. Tableviewcell reuse the same cell using cell identifier that why multiple shadows added to your cell.
Your problem is cell recycling. When you scroll, the same cell gets re-used to display data at a different indexPath.
You should create a custom subclass of UITableViewCell. Give it an optional property shadowLayer. In your cellForRow(at:) method, dequeue a cell and cast it to the correct custom class. Then check to see if its shadowLayer property is nil. If it is nil, add a shadow layer. If it's not nil, create a shadow layer and install it in the cell (cell.shadowLayer = shadowLayer).
In you code you have taken new card each time that card drawing method called, so this will work fine for the first time, but after that this will create problem because you haven't removed that view or you have not checked is that card is already added in cell or not.
So you can either remove below line from you code and take one parent view to design your card inside your storyboard or xib, if you are going to design your cell using xib or storyboard.
let cardView = UIView()
Or if you are going to design your cell programatically then first check if that cardview is added in cell or not, and then cardview is not added then add new one else skip that code.
So I add to the top of my class :
private var ShadowLayerCard: CAShapeLayer?
and I compare if the ShadowLayerCard is not nil :
if(self.ShadowLayerCard == nil){
let shadowLayer = CAShapeLayer.init()
self.ShadowLayerCard = shadowLayer
// here I have my code to add the shadowLayer and other parameters of the shadow...
}
this solve my problem, thanks to duncan-c
I tried to change the background and separator style in a UITableView, but nothing happens. In the snippet below, everything besides those changes works.
This tableView is located in a #IBDesignable UIView. Best part is, that everything shows as it should in the interface builder. The colors change, the separators dissapear.
func getTableViewToDisplayRecords() -> UITableView {
let tableView:UITableView = UITableView(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: self.frame.size.width, height: (self.frame.size.height * 3) / 4)), style: UITableViewStyle.Plain)
tableView.dataSource = self
tableView.delegate = self
tableView.tableFooterView = UIView(frame:CGRectZero)
tableView.backgroundColor = UIColor.clearColor()
tableView.separatorStyle = .None
return tableView
}
What could be causing this behavior?
----- EDIT -----
I have managed to do a workaround:
UITableView.appearance().backgroundColor = UIColor.clearColor()
UITableView.appearance().separatorStyle = .None
Now everything works fine, although this is not really a solution of the problem. Any new ideas anyone?
Try the code snippet below to change the background colour of UITableview along with no separator between the table cell's.
{
tableView.backgroundColor = UIColor.clearColor()
tableView.separatorStyle = UITableViewCellSeparatorStyle.None
}
Also, you need to change the background color of UITableViewCells
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
// change the background color of cell, which is by-default white
cell.backgroundColor = UIColor.clearColor()
return cell
}
Here is the screenshot with the table background color being red (for demonstration purpose) and no seperator between cell.
And here is another image with table background being red and single line seperator between cell.
Hope this helps!!
I think this is a Bug in UITableView.
When your tableView move to superview, sometimes the 'separatorStyle' property will reset to UITableViewCellSeparatorStyleSingleLine(the default style).
So you must set this property again when you finish frame change. Like this:
[self.view addSubview:_searchContentView];
_searchContentView.separatorStyle = UITableViewCellSeparatorStyleNone;
Thanks in advance for the help.
I have a UITableView within a main view contoller. Within the prototype cell, I have a UIImageview. In the code below everything works until I add the 5 lines to apply a circular mask and border. Once I do that, the images will not load unless I scroll the cells. The mask and border do get applied perfectly however. Will be great when it works... but until then.
Certainly this has been seen before. I'm a swift/objective-C newbie.
Working in swift for this one.
Code below;
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("mixerCell", forIndexPath: indexPath) as! MixerTableViewCell
// set label background color to clear
cell.textLabel?.backgroundColor = UIColor.clearColor()
// set highlight selection to none
cell.selectionStyle = .None
// set image for cell
let imageView = cell.viewWithTag(1) as! UIImageView
// put circular mask and border. This is the problem code that causes initial load of the tableview images to show up blank.
imageView.layer.cornerRadius = imageView.frame.size.width / 2;
imageView.clipsToBounds = true;
let color1 = UIColor(white: 1.0, alpha: 0.5).CGColor as CGColorRef
imageView.layer.borderWidth = 2;
imageView.layer.borderColor = color1
// assign image
imageView.image = UIImage(named: mixerSounds[indexPath.row])
return cell
}
initial view load
after scroll
your code is perfectly working for me. Here i am using Xcode-7. i think you are using Xcode-6.3 or less version. just upgrade it to Xcode- 7. and if you are using the same then just check your heightforRowAtIndexpath or other delegates there should be some issue.
thanks
Try changing the below lines,
// replace this
let imageView = cell.viewWithTag(1) as! UIImageView
// to
let imageView = cell.yourImageViewName
/* yourImageViewName is the outlet
reference name you have given in the
MixerTableViewCell custom class.
*/
Edit 2: Just for debugging purposes,
hardcode the image name and check if the image appears on the all the cells.
imageView.image = UIImage(named: "first1.png")
override func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell!
{
let cellIdentifier = "cell"
var cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as UITableViewCell
cell.image_View.image = UIImage(named: mixerSounds[indexPath.row])
println("The loaded image: \(image)")
cell.image_View.layer.masksToBounds = false
cell.image_View.layer.borderColor = UIColor.blackColor().CGColor
cell.image_View.layer.cornerRadius = image.frame.height/2
cell.image_View.clipsToBounds = true
return cell
}
Give imageview outlet to cell and not give imageview name because by default name is imageview so take diffrent name
It looks like the problem is using clipToBounds = true I am facing the same issue while making circular UIImageView inside UITableViewCell
I didn't find the exact solution but for now I found a way to do this
if (indexPath.row == indexPath.length && !isTableReloaded)
{
let dispatchTime: dispatch_time_t = dispatch_time(DISPATCH_TIME_NOW, Int64(0.000000001 * Double(NSEC_PER_SEC)))
dispatch_after(dispatchTime, dispatch_get_main_queue(), {
self.reloadTableView()
})
}
func reloadTableView()
{
isTableReloaded = true
self.tableViewContacts.reloadData()
}
Here isTableReloaded is a Bool type var which is initialized to false in viewDidLoad()
and the if condition is to be placed at the last of cellForRowAtIndexPath but before return statement
This will resolve our problem but do not rely on this as this is not the best approach.
Please post solution for this if any one found the better approach.
Here is a perfect and state away solution for circular image in UITableview Cell.
Simply modify your UITableviewCell (custom cell) class with below code.
override func awakeFromNib() {
super.awakeFromNib()
imgEvent.layer.frame = (imgEvent.layer.frame).insetBy(dx: 0, dy: 0)
imgEvent.layer.borderColor = UIColor.gray.cgColor
imgEvent.layer.cornerRadius = (imgEvent.frame.height)/2
imgEvent.layer.masksToBounds = false
imgEvent.clipsToBounds = true
imgEvent.layer.borderWidth = 0.5
imgEvent.contentMode = UIViewContentMode.scaleAspectFill
}
It will also helps to solve the problem of image circular only after scrolling table..(if any!)
let width = cell.frame.size.width
cell.img.layer.cornerRadius = width * 0.72 / 2
0.72 is the ratio of the cell width to image width, for eg. cellWidth = 125 and imageWidth = 90, so 125/90 would give 0.72. Do similar calculation for your image.
First: Images doesn't load until you scroll, because when cellForRowAtIndexPath methods called the constraints doesn't set for image until now, so when scrolling the constraints was added and the image appears, so if you set proportional width and height for imageView (width==height) in cell then
do that
let w = tableview.frame.width*(proportional value like 0.2)
imageView.layer.cornerRadius = w / 2
imageView.clipsToBounds = true;
I have a tableview in a view controller that is dynamically populated with data from a database. Now I have set the tableview to be clear and it working correctly, but I have tried to set the cells to be clear to no avail ?
cell.backgroundColor = UIColor.clearColor()
That line has been placed in the cellForRowAtIndexPath function.
This little extension should help you.
The idea is to set the backgorundView to clear too and not just the backgroundColor:
extension UITableViewCell {
func setTransparent() {
let bgView: UIView = UIView()
bgView.backgroundColor = .clearColor()
self.backgroundView = bgView
self.backgroundColor = .clearColor()
}
}
Usage:
In the cellForRowAtIndexPath add the following line:
cell.setTransparent()
I'm trying to implement a table by code, so far so good but when I scroll down and up in my table my rows went crazy, I did a little research and I think its because of the way I reuse my cells, but the examples I found were all in Obj- C, So could you please help me to understand the problem? Here are my function where I implement the cells:
override func tableView(tableView: (UITableView!), cellForRowAtIndexPath indexPath: (NSIndexPath!)) -> UITableViewCell{
let sectionA = seccionesDiccionario[indexPath.section]
let sectionName = tableDataSwiftDictionary[sectionA]!
var cell: UITableViewCell? = tableView.dequeueReusableCellWithIdentifier("CellId") as? UITableViewCell
if cell == nil {
cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "CellId")
cell!.backgroundColor = UIColor.clearColor()
cell!.textLabel?.textColor = UIColor.darkTextColor()
let selectedView:UIView = UIView(frame:CGRect(x: 0, y: 0, width: cell!.frame.size.width, height: cell!.frame.size.height))
selectedView.backgroundColor = UIColor.orangeColor().colorWithAlphaComponent(0.3)
cell!.selectedBackgroundView = selectedView
cell!.textLabel?.text = sectionName[indexPath.row]
cell!.textLabel?.numberOfLines = 0
cell!.textLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping
cell!.textLabel?.sizeToFit()
}
return cell!
}
Thank you so much.
when I scroll down and up in my table my rows went crazy
what do you mean by 'went crazy'.
One thing that I can see in the above code: You should move the text assignment out of the if statement. You want the 'textLabel' to show the String in the 'sectionName' array at the given indexPath.row. Currently, you are creating some cells and then - when you start scrolling your tableView - the cells are reused but the textLabel's text is not set, so it will always show its initial value.
Move this line
cell!.textLabel?.text = sectionName[indexPath.row]
out of the if{} block. Maybe that's all you need to do here.
EDIT
btw: since you're calling sizeToFit on the textLabel, I assume you want the cell to be high enough to display all the text. Note that sizeToFit will not be enough in order to achieve that. You'll have to either use Auto-sizing cells using AutoLayout (> iOS8) or implement the tableView:heightForRowAtIndexPath: delegate method and return the calculated cell height there.