12.2. Setting up the Main Screen View
In this Project, we will keep the codes as modular as possible. So, let's create a new Group called 'Main Screen.' Put ViewController.swift file inside 'Main Screen.'
Then we create a new Group called 'Views' inside 'Main Screen.' Add a new file named MainScreenView.swift inside 'Views.' The structure looks like this:
MainScreenView.swift
Then open MainScreenView.swift, and the following code there:
In the above code, you should have already worked with all the elements in your previous assignments. The only new concept here is to build a floating add button at the bottom right corner of the screen. If you look at lines 77 through 80, we are setting up the constraints for that button.
It is a regular button; we make it appear floating on the screen.
We first fix the height and width of the floating button. (Lines 77 and 78).
Then we fix the bottom and right anchors of the floating button to the bottom and right anchors of the safe area.
Later, in the controller code, we will force this button to appear over all the UI elements to make it float.
In lines 43 through 56, we add some shadow effects to make this button look like it is over the other elements.
ContactsTableViewCell.swift
We are displaying a table view for the contacts the user saves, so we need to design a cell layout for the table view. Let's create a new file inside Main Screen -> Views -> named 'ContactsTableViewCell.swift.' Then add the following code there:
The above code is pretty straightforward; we have used the same code before. However, we still need to set up an identifier for the cell to use in the table view.
Configs.swift
Let's create a new file named 'Configs.swift' in the project directory. We will add a static constant defining the ID of the cell. The Configs.swift file would look like this:
The file structure looks like the following:
Great! Now that our view is set up, we can start patching the ViewController.
Last updated
Was this helpful?