Swift StackView 스택뷰의 Nib Subview 정렬하기

 

 

 

안녕하세요! 민군입니다. 장장 몇 주에 걸쳐서 부스트코스 네 번째 과제, Photo Allbum에 이어 다섯 번째 BoxOffice 프로젝트까지 (기능상으로만 이지만) 완성을 해내었습니다! 

비동기, 네트워킹처리도 단연 초보인 제게 힘든 부분이었지만 저는 외외로 별점 뷰, 커스터마이징 뷰의 적용에 많은 애로사항을 겪었습니다. 여차 저차 해서 구현해낸 Customizing View, RatingStarView(별점 뷰)! 이제 정렬까지 하면 되는데요. 여기서 또 문제가 생깁니다. 

고정형 별점 뷰인 RatingStarView(별점뷰)는 Nib파일로 뷰의 인터페이스를 설정하고, 셀 클래스에 해당 nib파일을 불러와서 사용하였는데요. 이 Nib으로 불러온 커스터마이징 뷰(FixedRatingStarView, 별점 뷰)가 셀 내의 StackView에 들어가 있는 상태에서 정렬을 해결해가며 깨달은 내용을 공유하고자 합니다. 

먼저 여느때처럼 문제가 발생했던 상황을 살펴보도록 하겠습니다. 

 

 

 

보시면 평점, 7.8 밑에 별점뷰가 보이시죠? 무언가 이상한 게 보이실 접니다. 네 X축으로 정렬이 되질 않고 있는데요. 이 별점뷰는 Nib파일로부터 받아온지라 인터페이스 빌더의 스토리보드로 조작이 불가능했어요. 코드를 통해 AutoLayout을 구현, 정렬을 시도해야 하는 상황이었습니다.

 

 

 

 

 

제가 커스터마이징한 뷰가 담긴 Nib파일을 불러와서 세부 설정을 했는데요. 따로 코드를 통해 정렬하지 않으면 레이아웃이 계속 어긋나게 되는 상황이었습니다. ratingStarNibView.center의 값을 해당소속 StackView.center값과 일치시키는 방법도 있었지만 가로모드에 대응할 수 없었기에 오토레이아웃을 코드로 구현해야 하는 상황입니다. 스택뷰 내에 addSubView 처리된 이 별점 뷰를 어떻게 정렬시킬 수 있을까! 문제를 해결한 방법은 아래와 같습니다.

 

 

 

 

fixedRatingStarView는 별점뷰 인스턴스입니다. 위와 같은 설정 코드로 해당 변수의 중앙 X, 중앙 Y좌표의 제약 값을 소속 StackView의 중앙 X값, 소속 StackView하위 부모 View의 중앙 Y값과 일치시키도록 했습니다.  위와 같이 centerXAnchor, centerYAnchor 외에도 Leading / Trailing / Top / Bottom / Height / Width 등의 제약 값 또한 UIView의 옵션 값을 통해 코드로 구현할 수 있습니다. 

이번에 제가 구현해야했던 경우처럼 스토리보드, 인터페이스 빌더상에서 편하게 구현할 수 없는, 코드로만 구현해야 하는 상황이 생깁니다. 그렇기에 코드로도 제약 상황을 자유롭게 설정할 수 있도록 꾸준히 노력해야겠다는 생각이 들었습니다. 

사실 위와같이 오토 레이아웃 설정으로 제약조건을 코드로 작성했지만 문제가 완벽하게 해결되지 않았습니다. 그 이유는 RatingStarView(별점뷰)가 속해있는 부모 뷰, StackView의 설정값 조절이 필요했습니다.

서브뷰의 오토 레이아웃, 제약조건을 설정할 때에는 부모 뷰들의 상태까지 면밀히 신경 써야 한다는 것을 느꼈습니다. 특히 많은 부모 뷰에 종속되어있는 뷰일수록 말이죠.

 

 

 

 

위 StackView의 Attribute Inspector 설정값입니다. contentMode가 AspectFit, Allignment가 Fill로 되어있는데요. 이런 부모 뷰의 세세한 설정값의 차이에도 그 뷰 아래 종속되는 서브 뷰 SubView들은 많은 영향을 받습니다. 위의 설정을 했을 시 별점뷰가 정렬이 X좌표로 제대로 되어있지 않는 것을 보실 수 있습니다.

 

 

 

 

 

위 이미지의 설정값이 잘했다는 것은 아닙니다. 살짝 값을 바꿔보니 위와같이 이번엔 X좌표로 정렬이 되어있네요. Y값만 좀 만져주어 해결을 했습니다. 위처럼 SubView의 오토레이아웃, 제약 설정은 부모 뷰들의 설정까지 하나하나 꼼꼼히 확인해야 할 것 같습니다. 자칫 이런 신경을 못쓰다가는 레이아웃 설정에 많은 시간이 소요될 수 있습니다 ㅠ_ㅠ... 

 

 

 

 

PS. 앞서 스택뷰의 인터페이스빌더 설정을 통해 정렬을 했는데요. "정렬설정을 위처럼 해야한다" 가 아니라, 이처럼 자식뷰의 레이아웃설정에 부모뷰의 설정값이 크게 영향을 끼친다는 것을 알려드린 것 뿐입니다!

하나의 부모뷰를 설정한 값 이외로도 다른 뷰 요소에 따라 정렬이 제대로 이루어질 수도 있고, 다른 변수가 생길 수도있다는 것 아셨으면 합니다! 위의 스택뷰 설정값은 스택뷰안에있는 또다른 스택뷰의 설정값입니다. 앞서 소개해드린 스택뷰 설정값과는 또 다른 값으로 되어있지요. 이처럼 여러모로 제대로된 레이아웃을 만드려면 뷰 요소 하나하나의 설정을 꼼꼼히 확인하는것이 중요하다 정도를 이해하시면 됩니다! @~@;;

 

 

 

 

휴... 이렇게 오토 레이아웃까지 얼추 맞추며, 커넥트 재단의 부스트코스 5번째 과제 BoxOffice를 기능상 완성할 수 있었습니다. 리뷰를 받아가면서 많은 보완을 거쳐야 할 것 같습니다.

오늘 포스팅의 내용을 요약하자면,

스토리보드로 구현못하는 커스터마이징 뷰의 구현을 위해서 오토레이아웃을 코드로도 능숙하게 구현할줄 알아야 한다! 또한 서브뷰(SubView)에 오토레이아웃, 제약조건을 줄때에는 부모뷰의 상태까지 꼼꼼히 확인해야한다! 입니다.

이후에도 좋은 경험이나 팁이 생기면 자주 공유하겠습니다. 모두 그럼 즐 코딩하시길 바랍니다 ^-^//

 

 

 

▼커넥트재단 부스트코스 다섯 번째 과제, BoxOffice 중간 완성본 190410

커넥트재단 부스트코스 다섯번째과제, BoxOffice 중간본 시연 영상