One morning you opened the task list and you see that screen. Actually, the task is simple. You are expected to design a screen that lists movies. Suppose each movie has 2 components. The first one is the poster of the movie and the second is the movie’s description. Everything is great so far, let’s see the part where we adjust the height of the cell, because the problem starts there.
Looking at the design file, we decided that the height of each tableView cell should be 500 and assigned the value 500 to the tableView function.
Are we going a little fast? Let’s take a run, let’s see what we see on the screen.
It’s actually not bad to have our data on the screen. But it seems like the description parts didn’t come completely, it seems to be cut off after a while. So what’s the problem here?
Let’s set up a little equation. Let our image dimensions be fixed and 200 px. The size of our each cell is 500px, 500(totalSize)–200(imageHeight) = 300(descriptionHeight). So we expect the description parts to be 300px. But the word counts in the descriptions of movies can vary and we expect them to fit all in 300 px. As we can see in the picture, as many words as they fit on our label in the description part, we can’t see the ones that don’t fit on the label :(
Now that we have defined the problem and seen the problem, we can start talking about the solution. I prefer programaticUI while developing my projects, besides that, I like to use snapKit. I’ll use that way while developing the solution.
MovieListViewController
First we created the TableView. We add the TableView as a subView to the main view, the ViewController, in the setUpView function and using snapKit we give the contraints of all the edges. We haven’t done anything unusual so far, but the magic begins in viewDidload.
We have assigned two properties to tableView in ViewDidload. first, the rowHeight property of the tableView will be auto dimension, which means that the tableView cells won’t take any exact height and we will not use the “heightForRowAt” function in the tableViewDelegate as we did the first time.
Second one we specify the estimated height of the cells of our TableView. It’s just a value we assign to assist in drawing the cell while drawing the UI on the Background. When we enter any number other than 0, the application will continue to create cells automatically.
MovieListCell
As we remember from the design, we had 2 components. Let’s define image and description programmatically. While defining, the important part of the description label is the numberOfLines property of the label. NumberOfLines contains the information that the label it is defined will consist of maximum number of lines on the screen. For example, if we want it to contain only 3 lines, it will be sufficient to make 3 sets. We set 0, means it will fit all the content there is, because we are trying to establish a dynamic structure.
The second important part in Cell is the SetUpView function, the part where the contraints are set. I prefer stackView to reduce the margin of error and set up a more dynamic structure. We can give contraints without using StackView. But the thing we need to be careful to when setting the contraints is that all subViews have bottom, top, leading and trailing contraints. In this way, all subViews will know their own limits and can be positioned dynamically. Let’s run the application and see what awaits us.
Our efforts paid off and we were able to create the description part dynamically 🥳. I hope you enjoyed throughout the article. If you have any questions or suggestion, don’t be hesitate. You can find the whole project on my github.
Merry Christmas!🎄
