Swift_IOS_Self-SizingCell(1)_UI구성

안녕하세요! 

이번 포스팅 주제는 Self-Sizing Cell 입니다. 

셀프사이징 셀은 셀에 AutoLayout을 적용함으로써 셀 스스로 크기를 결정하여 고정된 높이값이 아닌 동적으로 높이가 바뀌는 것을

Self-Sizing Cell 이라고 합니다.

 

 UI 구성  

xcode를 켜서 Stroboard -> TableView를 만들어 줍니다

자 이번에는 cell를 만들어 주어야 합니다. 이번에는 Cell을 스토리보드가 아닌 xib 파일을 만들어서 cell을 만들어 보도록 하겠습니다.

xib 파일을  NewFile -> Empty(하단에 있어요!) ->이름 설정 ( myCell로 저는 이름을 정했습니다.)

xib파일을 만들었으면 쉬프트 + 커멘트 + L을 눌러 Cell을 올려주도록 합시다.

cell을 올리면 다음과 같은 화면이 나옵니다.

저는 디자인을 상단에 커뮤니티에서 일반적으로 자주 보이는 형식으로 디자인을 해보겠습니다.

상단에는 프로필 사진(ImageView), 제목(Label), 작성자(Label), 가운데는 본문 내용(Label), 하단에는 버튼들로 구성을 해보겠습니다.

 

각각 위처럼 구성을 했으면 이제 오토 레이아웃을 사용하여 위치를 잡아주겠습니다.

ImageView는 다음과 같이 오토레이아웃을 하겠습니다.( 이미지는 편하신 이미지로 적용시켜주시면 됩니다.)

Width와 Height는 편하신 숫자로 하시면 될 것 같습니다.

imageView constraint

그리고 상단 라벨 2개를 묶어 스택 뷰로 구성을 하겠습니다. 스택뷰로 구성을 하는 이유는 UI를 조금 더 쉽게 관리하기 위해서입니다.

상단 2개를 묶으면 Vertical로 스택 뷰가 구성이 되실 겁니다. (Fill Equally로 할 경우 뷰간의 넓이를 똑같이 해줍니다.)

여기서부터는 제 나름대로의 방식으로 오토 레이아웃을 적용시켜 보겠습니다

저는 상단스택 뷰를 imageView의 Top과 Height과 같게 할 생각입니다. 

여기서 스택뷰를 constraint를 적용하듯이 하나하나 정성 들여서 해도 되지만...... 만약? imageView의 높이나 탑의 위치가 바뀐다면??

불행하게 스택 뷰도 동시에 같이 바꿔주어야 합니다. 즉 일을 2번 해야 합니다ㅠㅠㅠㅠ 

그러면 일을 한 번만 하려 하면 어떻게 해야 할까요?? 바로 imageView를 기준으로 오토 레이아웃을 적용시켜주면 됩니다!!

상단 스택 뷰의 포커싱을 두고 컨트롤+드래그 이미지 뷰까지 드래그 

여기까지 하면 다음과 같은 화면이 나옵니다.

여기서 TOP, Equal Heights를 체크해줍시다 ( 쉬프트 키를 누르면 여러 개를 체크할 수 있습니다.)

여기까지 하면 완성이 안되고 오토 레이아웃 에러가 납니다!! 그 이유는 스택 뷰의 Y축과 높이는 알 수 있지만 X축을 모르기 때문입니다.

MissingConstrainsts

자 그럼 X축을 지정해줍시다. 저는 ImageView로부터 10 떨어지게 설정을 하겠습니다. 

스택 뷰 포커스 -> NewConstraint -> leading 10 주도록 합시다

이렇게까지 하고 나면 X , Y 높이를 다 알 수 있어서 오토 레이아웃 에러가 사라집니다.

자 그렇다면 여기서 간단한 테스트를 위해 이미지 뷰의 Top Constraint를 수정해봅시다.

보기에는 많이 불편해 보이지만.... 결과적으로는 잘 되고 있습니다. 상단 작업은 끝났으니 이제 가운데 라벨에 대한

오토 레이아웃을 적용시켜봅시다. 

라벨의 리딩의 시작은 이미지 뷰와 같게 처리할 겁니다! 즉 이미지 뷰의 리딩이 바뀌면 가운데 라벨도 같이 위치가

바뀌게 됩니다.

아까와 동일하게 컨트롤+드래그를 이미지 뷰까지 해줍시다 그리고 리딩을 체크해줍니다. 자 그럼 X축은 해결이

되었고 이제 Y축 설정을 해줍시다. (NewContaint -> top 15)

 

여기까지 하면 오토 레이아웃 에러는 사라집니다!!! 하지만 여기서 끝이 아닙니다.  그 이유는 콘텐츠는 2줄 3줄이 될 수도 있기 때문입니다. 

그러기 위해서는 라벨의 width를 잡아주어야 합니다.  저는 라벨의 트레일링을 20까지 주겠습니다. 

트레일링 20을 주면 다음과 같은 화면이 나옵니다.

그리고 여기서 Label포커싱 -> size inspecter -> traling더블클릭 -> relation을 equal 아닌 Greater Than으로 변경시켜줍니다.

이렇게 하면 트레일링 20전까지 계속해서 폰트가 채워지고 다 채워진다면 라인 브레이크가 되는 것을 보실 수 있을 겁니다.

반대로 콘텐츠의 내용이 없다면 Traling이 줄어들겠죠 즉 고정이 아닌 동적으로 Traling을 잡아주는 것입니다!

폰트가 많을때

폰트가 양이 많이 없을때

마지막으로 하단에 버튼들을 스택 뷰 구성 후 이미지 뷰의 리딩과 동일하게 하겠습니다.

그리고 top, bottom의 constraint를 잡아줍시다.

완성본의 모습입니다! 

UI 구성을 모두 완료하였으니 이제 코딩을 진행 보도록 하겠습니다.