UITableView, UITableViewCell transparent

1. Problem

 

위의 화면에서 아래 이미지의 부분을 UITableViewCell로 만들 생각인데,

Cell이 그림자 효과를 가지고 있기 때문에 그림자가 보일 여유 공간이 필요하므로

UITableView의 크기를 마진 값을 적용시키는 것이 아니라,

디바이스 크기와 동일하게 너비를 잡고, UITableViewCell 위의 view인 baseView의 크기를 조절해

아래 디자인과 같이 만들 생각을 했다.

 

 

ViewController의 backgroundColor가 grey값을 가지기 때문에 baseView를 제외한 UITableView와 UITableViewCell의 배경 값이 transparent 값으로 지정되어야 한다.

 

따라서 처음에 UITableView와 UITableViewCell의 contentView의 backgroundColor 값을 transparent으로 지정했는데, 여전히 아래 사진과 같이 흰색 배경으로 나타나는 문제가 발생했다

 

---

2. Search and Think

먼저 어느 View가 문제인지 확인해보기 위해서 디버깅을 진행해 보았다.

 

 

흰색 배경을 가진 View를 선택해 정보를 확인해본 결과 FriendTableViewCell 자체가 white로 값을 가지고 있었던 것이었다.

---

3. Solution and Apply

 

# UITableView

class FriendView: BaseView{

	let tableView = UITableView().then{
			$0.backgroundColor = Color.transparent
			...
   }

}

 

# UITableViewCell

class BaseTableViewCell: UITableViewCell {
    
    let baseView = UIView().then{
        $0.backgroundColor = .white
    }
    
    func setting(){ 
        **self.backgroundColor = Color.transparent**
        ...
    }
    
}

---

4. Result

 

정리하자면, TableViewCell에서 ViewController view의 backgroundColor값을 보이게 하기 위해서는

 

1. UITableView의 backgroundColor
2. UITableViewCell의 backgroundColor

 

이 2가지를 transparent 값으로 설정해주면 된다.

 

비록 아직 UI 작업을 기본 틀만 구현해서 완성도가 디자인에 비해서 많이 떨어져 보이겠지만… TableViewCell에 대해서 backgroundColor로 transparent를 설정한 것이 잘 적용된 것을 확인할 수 있다.