Problem with TableviewController/Rows/Images - ios

Question

Im Developing an App and I have some few problems with my tableviewcontroller.First of all, left to the picture there is free space.How can I get the Image bigger ? or how can I get this so that there is no free space. The image is a cell.imageview and its getting his image data from core data.
And the next problem is. I have some problems with the rows, you can see this on the picture.How can I fix this ?

Answer 1

It seems that you use the default UITableViewCell class , but you need to create a subclass of it and make every content custom
regrading label trimming you need to set .numberOfLines property of the UILabel item to 0 so it can wrap , a review for constraints may be like this
ImageView : width , height (static/propertional) , top , leading
label : leading to imageView , top - trailing and bottom to cell
This Using Auto Layout in UITableView for dynamic cell layouts & variable row heights may help you in creating the dynamic table cell

Answer 2

First of all, it would be much more constructive for you to implement a subclass of UITableViewCell and specify any cell-related logic in there. An intuitive approach - based on the contents of your table view screenshot - would look something like this
class ShowTableViewCell: UITableViewCell {
// MARK: - Outlets
#IBOutlet weak var imgThumbnail: UIImageView!
#IBOutlet weak var lblTitle: UILabel!
// MARK: - Functions
func setUp(withShow show: Show) {
self.imgThumbnail.image = show.thumbnailImage
self.lblTitle.text = show.title
}
}
Note that the setUp(withShow:) function declared above is using a user-defined object of type Show
class Show {
// MARK: - Properties
var title: String?
var thumbnailImage: UIImage?
// MARK: - Initializers
public init(withTitle title: String, andImage image: UIImage) {
self.title = title
self.thumbnailImage = image
}
}
In my opinion, the latter approach conforms much better with Object Oriented Programming (OOP) standards. In case you need to add/remove any property to your Show object, it will be so much easier and cleaner to reflect those changes within your cells. All you would have to do is add/remove the respective #IBOutlet objects from your cell and configure them just as demonstrated in the setUp(withShow:) class function.
Moving on, you implement the following view controller that conforms to the UITableViewDataSource protocol, and populate your table accordingly
class ViewController: UIViewController {
// MARK: - Properties
var shows = [
Show(withTitle: "UFC 127: Penn vs. Fitch", andImage: RESPECTIVE_IMAGE),
Show(withTitle: "Strangers in Good Company", andImage: RESPECTIVE_IMAGE),
Show(withTitle: "Candles on Bay Street", andImage: RESPECTIVE_IMAGE),
Show(withTitle: "Flight Angels", andImage: RESPECTIVE_IMAGE)
]
// MARK: - View Life Cycle
override func viewDidLoad() {
super.viewDidLoad()
}
}
// MARK: - UITableViewDataSource Extension
extension ViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return shows.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cellIdentifier = "showCell"
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! ShowTableViewCell
cell.setUp(withShow: shows[indexPath.row])
return cell
}
}
Note that you when declaring the shows array, you should replace the RESPECTIVE_IMAGE placeholder I have added with whatever image you want. You should also populate it with whatever static elements you want - or more dynamically - query them from your database.
Additionally, using auto-layout, you can manually determine the size of your image and, using the Number of Lines label attribute, you can prevent your labels from trimming.