[iOS] Gradient Layer 적용 시 View가 잘리는 현상

현재 소켓통신을 이용하여 채팅방을 구현중이다.

채팅창은 테이블 뷰를 통해 구현했고 채팅이 아래서 위로 올라가는 구조이다. 채팅창의 최상단은 블러처리된다.

블러처리를 위해 테이블뷰의 SupeView에 Gradient Layer을 추가해줬다.

 

 

그런데 영상과 같이 채팅창의 하단부분이 잘려서 나오는 문제가 발생했다. 이것 때문에 꽤 많은 시간을 삽질했다.

일단 나는 XIB파일을 이용해 CustomView를 만들어 ViewController위에 올려줬다.

 



 

사진의 가장 하단을 보면 iPhone SE 버전으로 UI를 구성한것을 확인할 수 있다.

그런데 정작 실행은 iPhone 11로 실행했다.

iPhone SE로 실행하면 채팅창 하단이 잘리는 현상은 사라진다.

즉, 내가 Xib파일을 이용해 UI를 구성한 시점에 frame크기로 그려진 것 같다.

 

출처 : https://jcsoohwancho.github.io/2019-09-21-iOS-%EB%B7%B0%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC%EC%9D%98-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0/

 

Xib 파일을 초기화 할때 우리는 init 함수를 overriding 해서 초기화 한다.

위 생명주기를 보면 뷰가 ViewDidLoad가 실행되기 이전에 우리가 만든 CustomView들은 이미 초기화 돼있다.

그렇기 때문에  CustomView가 생성되는 시점에는 현재 RootView의 크기를 알지 못한다.

그래서 나의 경우는 SE를 기준으로 GradientLayer가 만들어졌던 것이다.

그렇다면 GradientLayer 가 잘리는 현상을 해결하기 위해서는 view가 load된 이후에 GradientLayer을 설정해 주면 된다.

 

친구한테 받은 사진이라 출처를 모르겠다. 아시는분 알려주시면 감사하겠습니다.

 

위 사진은 ViewController와 View의 생명주기이다. 

ViewController에서 UI를 구성했다면 viewWillAppear을 Overriding해서 해당 함수안에서 GradientLayer을 설정해주면된다.

나같은 경우는 CustomView를 통해 UI를 구성했기에 viewWillAppear부분에 작성할 수 없다.

그래서 위 사진에 보면 drawRect 부분이 있는데 이 부분이 draw라는 함수를 통해 overriding 이 가능하다.

 

 

기존에는 init 함수 안에서 gradient를 설정해줬는데 위 사진처럼 draw함수에 gradient를 설정해주니 문제가 해결됐다.