0

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.

Improve this question

3 Answers 3

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This is perfect! I was close so close... I was using a label inside a container view inside the custom cell... all I saw before was a white space on top of what was designed.... Anyway this worked for me after I deleted my whole storyboard and class, and started from scratch! thanks a lot!
my bad... thought I did earlier... there done! :) Thanks again
1

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.

Improve this answer

1 Comment

Funny thing is, every time I put something on my "shadowed view" class, (something like this for example) I would get something like a white box covering 90% of my tableview for some reason.... but I ended up using code similar to this one as well as code from @Rajan Maheshwari. Thank you both!
0

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

Improve this answer

1 Comment

It certainly looks much closer to what mine is... but you're using a collection view... I know they're pretty much the same as table views but I'd rather stick with tableviews until I get more experienced with the rest :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.