UIScrollView의 contentInset, scrollIndicatorInsets 프로퍼티

UITableView와 Tab bar controller를 연동하다 UITableView의 마지막 셀이 탭바에 가려져 정상적으로 화면에 노출되지 않는 문제가 발생했다.  아래 그림을 보면 “1” 이 적힌 셀이 탭바에 가려져있다. 스크롤을 하면 “1”이 보이긴 하지만, 스크롤을 놓으면 아래와 같다.

마지막 UITableViewCell 숨김

이 문제는 UIScrollView의 contentInset 프로퍼티 설정을 통해 해결 가능하다. UIScrollView의 contentInset과 scrollIndicatorInsets 속성에 대해 알아보자.

UIScrollView의 contentInset 속성은 contentSize에 버퍼 공간을 추가할 때 사용한다.이는 UIScrollView의 서브뷰 크기를 변경하지 않고 스크롤 뷰 크기를 확장할 수 있게 한다.  UIScrollView class reference에 기술된 contentSize 속성 설명이다.

contentInset property

아래 그림을 보자. contentSize 위쪽으로 64px 만큼, 아래로 44px 만큼 버퍼 공간을 추가한다. UIEdgeInsets를 이용하여 위, 아래 뿐 아니라 좌, 우에도 버퍼 추가 가능하다.

< from iOS developer library >

그림에서 위쪽으로 추가한 64px 은 navigation bar 높이 44px과 status bar 높이 20px의 합이며, 아래쪽의 44px은 toolbar 높이다. 네비게이션 바 또는 툴바 등에 UIScrollView의 컨텐츠가 가려지는 상황에서 위, 아래로 추가 공간을 확보함으로써 네비게이션 바와 툴 바 사이에 UIScrollView의 컨텐츠가 보이도록 하고 있다. (블로그 글 하단의 Reference를 확인하면 위 설정의 결과를 볼 수 있다.)

UITableView는 UIScrollView를 상속하므로 UIScrollView의 contentInset 속성에 접근 가능하다. (UITableView Class Reference)

본인이 접했던 문제는 화면 하단 탭바에 마지막 셀이 가려지는 것이었고, 스크롤뷰 아래쪽으로 44px 버퍼를 추가하여 스크롤 뷰 크기를 확장함으로써 해결하였다.


_tableView.contentInset = UIEdgeInsetsMake(0, 0, 44, 0);

위 코드로 개선된 화면은 다음과 같다. “1”이 정상적으로 보인다.

< contentInset 적용 후 >

UIScrollView의 contentInset 속성의 변경은 scroll indicator (스크롤 시 보이는 스크롤 표시) 에도 영향을 미친다.

Scroll indicator가 contentInset으로 추가한 버퍼 공간에도 표시가 된다. 이를 방지하기 위해서는 scrollIndicatorInsets 속성을 변경해야 한다. (화면 캡쳐가 어려워 적용 전/후 스크린 샷을 첨부하지 않는다. 간단한 코드로 테스트 가능하니 궁금하면 확인해보기 바란다. )

본인이 적용한 코드는 다음과 같다.


_tableView.contentInset = UIEdgeInsetsMake(0, 0, 44, 0);

// contentInset으로 추가한 버퍼만큼 scroll Indicator 표시 영역을 조정
_tableView.scrollIndicatorInsets = _tableView.contentInset;

* Reference : Scroll View Programming Guide for iOS