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 


					
Advertisements
Leave a comment

7 Comments

  1. [[self tableView] setScrollIndicatorInsets:UIEdgeInsetsMake(40, 0, 0, 0)];
    self.tableView.contentInset = UIEdgeInsetsMake(40, 0, 0, 0);

    이렇게 하니 잠깐 탑에 40이 먹히다가 다시 초기화 되버리는데 왜 이런걸까요?ㅠ

    Reply
    • 폰으로 댓글 확인하였는데 위 코드만 가지고는 뭐라 말씀드리기가 어렵네요. 증상이나 코드 관련 정보를 더 알려주셨으면 합니다.

      Reply
    • 코드 자체에는 문제가 없는 것 같습니다. 코드의 위치나 진행 로직등의 문제가 아닐까 싶기도 하구요..

      Reply
  2. 강성희

     /  June 8, 2016

    44대신 cell height 만큼 버퍼를 주면 더 깔끔한 화면이 될 것 같네요 좋은 글 잘 보고 갑니다.

    Reply
  1. UITableViewCell 위치 이동: 키보드 피하기 « Park's Park
  2. UIScrollview ContentInset | 블로깅앱 개발 관련 자료

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: