How to redesign horizontal cells to vertical cells - ios

Question

This is what all of my cells look like. With some information displayed on right hand side of the cell. Instead of this design with a circular radius image on the left hand side and information on the right hand.I want my cells to be an Image and the information to be on top of that image.
This is the type of style I want on my cells to have, without the space in between images, I gave this an attempt by removing the information labels and using a horizontal Stack View on the cell.
But this is what the cells ended up looking like. For the radius of the image I didn't do it programatically I did trough the Identity Inspector
Keypath layer.cornerRadius
Type Number
Value 30
which makes the images round. Other than that there's no much code involved in the tableView, It's all mostly done trough the Main.StoryBoard, below I added some code showing how I configured the cells. Any tips or ideas on how I can accomplish this?
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cellIdentifier = "Cell"
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! RestaurantTableViewCell
//* Configure the cell...
cell.nameLabel.text = restaurants[indexPath.row].name
cell.thumbnailImageView.image = UIImage(named: restaurants[indexPath.row].image)
cell.locationLabel.text = restaurants[indexPath.row].location
cell.typeLabel.text = restaurants[indexPath.row].type
cell.accessoryType = restaurants[indexPath.row].isVisited ? .Checkmark : .None
return cell
}

Answer 1

If you want the cell to show an image and then show text on top of that image, I'd suggest you set the image as the cell background view (rounding the corners if needed) and then populate your labels and accessory view as you are already doing.
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let dictData : NSDictionary = arrayOfData.objectAtIndex(indexPath.row) as! NSDictionary
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
cell.textLabel?.text = "THIS IS SOME TEXT"
if let image = dictData.objectForKey("Image"){
cell.backgroundColor = UIColor.clearColor()
let imageView = UIImageView(image: image as? UIImage)
imageView.layer.cornerRadius = 30.0
imageView.clipsToBounds = true
cell.backgroundView = imageView
}
return cell
}
That will give you text on top of an image :

Answer 2

So it looks like you use AutoLayout problem here is that you have right constraint. You can try removing constraint and set fixed width.

Answer 3

Step 1: Add UITableView and add constraints
Step 2: Add UIImageView and set it to "Aspect Fill" Otherwise your rounded corner image will not cover whole cell. (You can also set it to "Aspect fit" if you want). And add constraints as shown in image.
Step 3: Add labels and other information and also add constraints according to your requirement.