[Swift/Study] TableView 셀을 둥글게 만들고 간격 띄우기

이번 글에서는 테이블 뷰의  셀 테두리를 둥글게 만들고 간격을 띄워보는 법을 써보도록 하겠다.

 

결과 화면

 

 

먼저 셀들의 모서리를 둥글게 만들어 보겠다.

코드로 해도 되는데 나는 스토리보드에서 설정하였다.

테이블 뷰 셀을 터치하고

이 설정창의 User Defined Runtime Attributes메뉴에서 +버튼을 누른다.

Key Path에 layer.cornerRadius를 입력한다.

Type를 Number로 지정하고 value는 원하는 값을 넣으면 된다. (큰 수 일수록 더 둥근 모서리)

 

그러면 다음과 같이 셀 모서리가 둥글게 변한다.

 

 

이제 간격을 띄워줘야 되는데 한 섹션에서 각 셀들의 간격을 띄우는 것을 실패했다.

그래서 여러개의 섹션을 만들고 각 섹션에 한 개의 셀들을 넣었다.

// 섹션 수
func numberOfSections(in tableView: UITableView) -> Int {
    return 10
}
// 섹션에 셀의 수
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}

 

 

다음으로 스토리보드에서 테이블 뷰를 터치하고 다음 설정에서 아래와 같이 헤더와 푸터높이를 임의로 지정해준다.

 

그리고 코드로 돌아와 다음 코드들을 추가해준다.

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    if(section == 0) {
        return 0.1 // 첫 번째 섹션의 헤더 높이
    }
    return 0 // 각 섹션의 헤더는 0으로 하고 푸터로 간격 조정
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    // 섹션 푸터의 높이를 조정하는 로직을 구현
    return 10
}

섹션의 헤더와 푸터 높이를 지정해주는 함수이다.

헤더 높이는 0으로 고정하고 푸터를 통해 높이를 조정했다.

 

실행해보면 다음과 같은 결과를 얻을 수 있다.