CODEWITHSUNDEEP
swiftxcodeinterface-builderios9
Agustin
Agustin

Reputation: 166

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.

Upvotes: 0

Views: 4002

Answers (3)

Rajan Maheshwari
Rajan Maheshwari

Reputation: 14571

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

Upvotes: 3

Amadeu Andrade
Amadeu Andrade

Reputation: 181

I think you are on the right path. I did something similar in a project. I created a subclass of UIView (too add a shadow to the view) and added a view with this type inside the cell.

class ShadowedView: UIView {

override func awakeFromNib() {
    layer.shadowColor = UIColor(red: 157.0/255.0, green: 157.0/255.0, blue: 157.0/255.0, alpha: 0.5).CGColor
    layer.shadowOpacity = 0.8
    layer.shadowRadius = 5.0
    layer.shadowOffset = CGSizeMake(0.0, 2.0)
}
}

Don't forget to add some constraints to the view inside the cell.

Upvotes: 1

Willjay
Willjay

Reputation: 6459

You can arrange your collection view layout in "Size insepector"

And customise your image in the cell.

enter image description here

enter image description here

Upvotes: 0

Related Questions