6.8. Wrapping Up: a bit of polishing

We will polish the TableView a little bit to make our TableView look like this:

Let's make the following changes to the code:

Removing the separator line:

Open ViewController.swift file. Put the following line in viewDidLoad() method:

override func viewDidLoad() {
    super.viewDidLoad()
    title = "Expense App"
    
    //MARK: manipulating TableView separator line...
    firstScreen.tableViewExpense.separatorStyle = .none
    
    //Codes omitted...
}

Working with shadows:

Open the TableViewExpenseCell.swift file. Update the code in the method where we initialize the wrapperCellView (setupWrapperCellView()) :

func setupWrapperCellView(){
    wrapperCellView = UITableViewCell()
    
    //working with the shadows and colors...
    wrapperCellView.backgroundColor = .white
    wrapperCellView.layer.cornerRadius = 10.0
    wrapperCellView.layer.shadowColor = UIColor.gray.cgColor
    wrapperCellView.layer.shadowOffset = .zero
    wrapperCellView.layer.shadowRadius = 6.0
    wrapperCellView.layer.shadowOpacity = 0.7
    
    
    wrapperCellView.translatesAutoresizingMaskIntoConstraints = false
    self.addSubview(wrapperCellView)
}

• By default, a view has a transparent background, hence, wrapperCellView's background is transparent too. So, we set it to white.

• Then we set the cell's corner radius to 10.0.

• We want to create a shadow effect. So first, we set the shadow color to gray. (The color has to be a CGColor).

• Then we set the offset of the shadow. If you set the offset to .zero, it means that there will be no gap between the object (cell) and the shadow.

• Then we set how wide the shadow would be; we set it to 6 points.

• And then, we set the shadow opacity. We set it to .7. Meaning the opacity will be 70%.

Changing the constraints to make room for the shadows:

In TableViewExpenseCell.swift file, let's update the constraints for the wrapperCellView.

//MARK: initializing the constraints...
    func initConstraints(){
        NSLayoutConstraint.activate([
            wrapperCellView.topAnchor.constraint(equalTo: self.topAnchor,constant: 10),
            wrapperCellView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10),
            wrapperCellView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10),
            wrapperCellView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -10),
            //codes omitted...
            
            wrapperCellView.heightAnchor.constraint(equalToConstant: 104)ft            
        ])
    }

Here, we are adding 10 points margins around the Cell wrapper.

Now, let's run the app again.

There we have a 3D effect!