오토레이아웃은 비율 중심으로 잡아라!

데이터 통신으로  값을 전달 받아

DetailVC에서 posterImage를 화면에 보여주는 부분이다.

레이아웃

posterImage Constraints

현재 레이아웃을 보면 posterImage는

backImage의 하단과 Label의 하단에 고정 값으로 연결되어 있다.

 

실행을 해보면  영화의 타이틀이 처음에는 나왔는데

해당 영화를 들어가면 영화 타이틀이 없어지는 것을 볼 수 있다.

print 결과물

print를 찍어봐도 성공적으로 출력되는 것을 볼 수 있다.

 

흠... 그러면 어디가 문제 일까?  

이곳저곳 디버그를 찍어보면서 확인해본 결과 문제점을 파악 할 수 있었다.

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        print("detailMovieTitleLabel",detailMovieTitleLabel)
    }

viewDidAppear에서 확인을 해본 결과  x, y, width, height 순으로 찍히는데

두번째 출력문을 보면 height값이 0인것을 확인 할 수 있었다...

엥??.. 그렇다면 Label이 없어진걸까? 

 

계층 구조를 보면서 다시 한번 확인해보자

내 Label 누가 훔쳐갔어!!

 

Label이 없어진 이유는
처음 Gif영상을 자세히 보신 분들은 아시겠지만

영화를 다시 들어갔을때 posterImage의 크기가 변하는 것을 알 수 있다.

 

 

내가 생각했을 때 사진의 크기가 바뀌는 이유는 

로드되는 시점이 다르기 때문인거 같다.

 

현재 posterImage는 KingFisher를 통해 로드되고

한번 로드되면 캐시가 쌓이게 되어 빠르게 화면에 보여질 수있다.

 

하지만 영화 타이틀 같은 경우에는 화면에 들어갈때 마다 새롭게 값 전달을 받아야 되기 때문에

posterImage가 먼저 로드 되고 영화 타이틀이 로드 되어

posterImage의 크기가 먼저 정의되어 

타이틀이 없어지는 것으로 추측된다.

 

두가지 해결 방법을 통해 문제를 해결 할 수 있었다.

 

1. 영화 타이틀에 Height값을 적용한다. 

현재 레이아웃을 보면 가장 밑바탕이 되는 ImageView의 레이아웃이 비율로 잡혀져 있는것을 볼 수 있다.

레이아웃이 비율로 잡혀지면 고정값으로 적용했을때보다 늦게 비율이 적용되는것을 알 수 있다. 

왜냐하면 비율로 설정하면 사용자 디바이스에 따른 화면에 대한 비율로 잡히기 때문에 늦어질 수 밖에 없다.

 

이번 사례는 영화 타이틀은 레이아웃이 고정값으로 설정되어 있는데 BackImage가 비율로 잡혀있기 때문에

BackIMage 레이아웃 적용 -> 영화 타이틀 레이아웃 적용이 되므로 보여지지 않는 것이다.

 

해결 방법은 간단하다. 영화 타이틀에 Height 값을 주는 것이다.

 

 

2. posterImage의 레이아웃을 비율로 잡자.

레이아웃

영화 타이틀를 넘지 않는 범위에서 비율로

posterImage를 설정한다.

posterImage의 설정 레이아웃을 보면

Width: backImage의 width와 같게 설정하여 비율로 설정

height: posterImage width와 비율로 1: 1.5 설정

bottom: posterImage bottom과 backImage bottom을 20 간격을 두고 설정

 

실행해보면 정상적으로 영화 타이틀이 나오는 것을 확인 할 수 있다!

 

...

해결 하지 못한 문제

그렇다면 왜 빌드 하고 처음에 DetailVC로 들어갔을때는 

정상적으로 영화 타이틀이 나오는 것일까...?