Add UITableView programmatically
In this quick tutorial we are going to make UITableView programatically. Before you start doing it make sure your project has no storyboard. If you dont know how to do it there is article on this topic on my Medium profile.
First thing is creating new view controller.
After we create our table view controller we are going to create table view cell for this table view.
First thing after we create table view cell is to add content to it. All code we write should be separated in extensions and own functions to be more readable and easier to maintain.
Our cell will have one small image and 2 labeles in it to show data inside table view. Adding UI elements in cell is done by addSubview(…) method, but still it will not be shown because we need to setup constraints and UI for each element. Take a look how everything is separated in dedicated method for better code separation.
Here you can take a look what we did in every one of these functions. First we created extension on DemoCell.
First function here is configureCell(…) and it will be used in table view delegate method to create our cell and add our own content to it.
configureLabels() is pretty straight forward one because we used it just to edit layout of our labels. .numberOfLines = 0 means if our title or description is longer it will automatically decide how many lines it will have and if needed our font will shrink, for font size shrink we are using .adjustFontSizeToFitWidth = true
Last 2 functions here are setLabelsConstraints() and setImageConstraints(). In case you table view cell or table view is not showing on you screen is cause by missing .translatesAutoresizingMaskIntoConstraints = false. This is most common issue.
Finally we can see how to setup our DemoTableViewVC.
Just like we separated our code in table view cell we will do the same here.
First thing to do after we create our table view instance is to configure table view delegate methods.
in cellForRowAt we created image from our Assets.xcassets catalog for it is safe to do force unwrap because we know that image exists. Take a look at cell.configureCell(…) method we created in our Table View cell .swift file. Here we provided values to populate our UIImageView() and UILable().
Just like we did UI Setup in Cell we are going to do the same here in table view. For this purpose we created extension on DemoTableViewVC
After UI setup we need to configure table view delegates and register table view cell for this table view. Even tho you can setup delegate and dataSource in viewDidLoad() it is better to do in separate function.
Very important part here is .register method of tableView where we define what is according TableViewCell and what is identifier of that cell.
After we did everything shown above now we are able to run our project and see our TableView.
