varijkap varijkap - 4 months ago 14x
iOS Question

Swift- Buttons on ScrollView in CustomCell overlapping each other

I have created a custom cell in the storyboard, and added a ScrollView in it.
Now, what I want to do is, create multiple buttons based on the data from my webservice. Below is the code for that:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell: MainTableViewCell! = tableView.dequeueReusableCellWithIdentifier("cellIdentifier", forIndexPath: indexPath) as! MainTableViewCell

cell.titleLabel.text = self.postsData.objectAtIndex(indexPath.row).valueForKey("title") as? String
let imageurl = self.postsData.objectAtIndex(indexPath.row).valueForKey("image") as? String

let jsonStringAsArray = self.postsData.objectAtIndex(indexPath.row).valueForKey("links")
let data: NSData = jsonStringAsArray!.dataUsingEncoding(NSUTF8StringEncoding)!
let anyObj: AnyObject? = try! NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions(rawValue: 0))
var yCoord:CGFloat = 15.0, xCoord:CGFloat = 0.0, buttonHeight:CGFloat = 30.0, buttonWidth:CGFloat = 100.0, buffer:CGFloat = 10.0,i = 0;

while i<anyObj?.count {
if cell.viewWithTag((indexPath.row+1)*1000+(i+1)) != nil{

let button :UIButton = UIButton()
button.frame = CGRectMake(xCoord, yCoord, buttonWidth, buttonHeight)

button.setTitleColor(UIColor.greenColor(), forState: .Normal)
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.greenColor().CGColor
button.layer.cornerRadius = 10.0
button.titleLabel?.font = UIFont(name: "Futura-Medium", size: 17)
button.tag = (indexPath.row+1)*1000+(i+1);
button.addTarget(self, action: #selector(MainViewController.linkButtonAction(_:)), forControlEvents: .TouchUpInside)
button.setTitle(anyObj?.objectAtIndex(i).valueForKey("title") as? String, forState: .Normal)
let tempWidth = button.frame.size.width + 10;
button.frame=CGRectMake(xCoord, yCoord, tempWidth, buttonHeight)


xCoord += button.frame.size.width + buffer;

i += 1
cell.buttonScrollView.contentSize = CGSizeMake(xCoord, buttonHeight+10)

cell.clipsToBounds = true;

return cell

The code I have written, seems to work perfectly, except the problem is that buttons in the first and the last cell are overlapped with buttons from the other cells.

The first cell displays all buttons perfectly at first, but when I scroll down to the bottom and come back up, its all messed up.

It is supposed to appear like this on all cells:
The Second cell

But appears like this:

the fist cell

I tried checking for views with same tags in the cell, and clipsToBounds, as you can see in the code, but nothing worked for me.

Any help appreciated. Thanks!


What you are doing is adding the button subviews to a cell that was already configured. You will need to remove existing buttons from the cell after you dequeueReusableCellWithReuseIdentifier:forIndexPath and re-create them again.