Search code examples
swiftxcodeinterface-builderios9

Custom UITableViewCell programmatically with SWIFT

Attached you may find a picture of (left) my attempt to create a similar (right) UITableView. they look like buttons but they're only cells that can be clicked on as a tableview cell.

I have tried many different things including adding a container window inside a custom cell, adding a UIImage inside the custom cell but I just can't replicate these cells!

I have tried using a custom cell class, I have tried doing it through IB and I for the crazyiness of me, cannot recreate it.

Would anyone be able to give me a hint on how to create the (inside cell) text-bounding box/square? with the different background colour lighting?

If this can easily be done with IB I'd rather do it this way, but if you have a sample customcell class that I can take a look at that'd be greatly appreciated too!

failed attempt

Thank you for taking the time to look at my question.

Solution

  • I have made a sample for you close to your requirement. Have a look https://github.com/RajanMaheshwari/CustomTableCell

    I would like to do this using a UITableView. My approach will be taking a custom cell and add a UIView with some constraints from left, right, up and down. Also I will provide the same background color to UITableView, UIView which is the superview and the cell content view and also make the separator of UITableView as None and Selection of TableCell as None so that the UI looks like

    enter image description here

    enter image description here

    enter image description here

    Next after applying every constraint and making a CustomCell and making IBOutlets we will jump to code.

    I will do all the shadow and outlining in Custom Cell's awakeFromNib method

    This will be my CustomTableViewCell class

    class CustomTableViewCell: UITableViewCell {

@IBOutlet weak var labelBackgroundView: UIView!
@IBOutlet weak var cellLabel: UILabel!
override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code

    labelBackgroundView.layer.borderWidth = 0.5
    labelBackgroundView.layer.borderColor = UIColor.lightGrayColor().CGColor
    labelBackgroundView.layer.shadowColor = UIColor.lightGrayColor().CGColor
    labelBackgroundView.layer.shadowOpacity = 0.8
    labelBackgroundView.layer.shadowRadius = 5.0
    labelBackgroundView.layer.shadowOffset = CGSizeMake(0.0, 2.0)
    labelBackgroundView.layer.masksToBounds = false;
}

    I have two outlets.

    One is the label in which you will be displaying the name. Other is the outer view which you want to display with some outlining and shadow.

    The ViewController code will be:

    class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

var array = [String]()

@IBOutlet weak var myTableView: UITableView!
override func viewDidLoad() {
    super.viewDidLoad()

    array = ["Wealth","Health","Esteem","Relationship"]

}


func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return array.count
}

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

    cell.cellLabel.text = array[indexPath.row]
    cell.labelBackgroundView.tag = indexPath.row
    cell.labelBackgroundView.userInteractionEnabled = true

    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(cellViewTapped))
    cell.labelBackgroundView.addGestureRecognizer(tapGesture)

    return cell
}


func cellViewTapped(sender:UITapGestureRecognizer) {

    let view = sender.view
    let index = view?.tag
    print(index!)
    }
}

    Here I have not used didSelectIndex of UITableViewDelegate as I only want the tap on the Outlining LabelBackgroundView and not on complete cell.

    So the final outcome is like this

    enter image description here