Md. Mostafizur Rahman
Md. Mostafizur Rahman

Reputation: 481

Image adding in a Custom TableView

Is it possible to design the below UI using tableview ?

I know, I can define numberOfSections in the tableview. In each cell, I can define number of column. But, i am not sure how to add the image in the tableView ? What i understand is the image will be on the right side merging some cells. But how to do it or is it possible or not ?

Any help will be highly appreciated.

image

Upvotes: 0

Views: 85

Answers (2)

Jay Patel
Jay Patel

Reputation: 2740

Yeah its possible. You need to do some calculation for Y Position, trailing space from tableview, etc

Add your image view into tableView.

let imageWidth: CGFloat = 150.0
let imageHeight: CGFloat = 150.0    //Addition of height of meging cells
let trailingSpace: CGFloat = 25.0

let yPosition: CGFloat = 100        //Calculate Y position depend on NavigationBar, Name cell, etc...

let imgView = UIImageView(frame: CGRect(x: view.frame.width - imageWidth - trailingSpace, y: yPosition, width: imageWidth, height: imageHeight))
imgView.backgroundColor = .clear
imgView.image = UIImage(named: "Waterfall")
imgView.contentMode = .scaleAspectFit

tableView.addSubview(imgView)

enter image description here

Upvotes: 1

Milan Nosáľ
Milan Nosáľ

Reputation: 19765

You will not be able to add an image to those 4 cells at once.

As I see it, there are two options:

  1. create a single cell for those 4 cells, in which use UIStackViews or just autolayout to lay the contents out along with the image.

  2. Change the tableView to a collectionView with custom layout implementation, then you can have the image as a single cell laid out to the right of those cells.

I myself would chose the first approach, because I believe it will be easier and faster to implement.

Upvotes: 2

Related Questions