20240528_미니프로젝트_오토레이아웃을 위한 StackView 사용

프로젝트 2일차

메인페이지, 이미지 리스트 주요 기능 구현

 

오늘은 드디어 Xcode 첫걸음을 떼었습니다..! 강의 외적인 기능이 필요하던 차에 매니저님의 피드백 중 'StackView'에서 힌트를 얻어 나름  구글링을 했지만 꼭맞는 케이스를 찾지 못해 조금 난감했습니다. 그래도 팀원분들과 화면 공유를 하면서 원하는 기능 구현까지 마칠 수 있어서 기쁜 마음으로 오늘의 기록을 남깁니다.  

 

아직은 코딩 없이 스토리보드만으로 UI를 구성하고 화면 전환을 설계하는 단계이기 때문에 StackView 기능의 기초 부분인 정렬과 배치 그리고 사이징에서 어려움을 느끼시는 분들에게 도움이 되었으면 좋겠습니다. 

---

 

메인페이지

메인페이지는 팀명, 팀소개, 더보기 버튼으로 구성했습니다. 완성해보니 참 쉬운데 이게 왜 오래걸렸을까요?ㅎㅎ 

 

 

팀명, 팀소개, 더보기 버튼 생성 후 다음 페이지 생성 후 연결해주면 끝입니다. 

 

텍스트 줄바꿈이 되지 않는다.

메인 페이지에서 팀소개 밑에 긴글을 넣고 싶은데 Label 보다는 TextField가 맞을 것 같아서 넣었지만 줄바꿈이 되지 않아 앱화면 범위를 넘어갔습니다. 

해결 Objects library를 가니 TextView가 보여서 혹쉬? 하고 넣어봤는데 간단하게 리사이징을 통해 원하는 배치를 마쳤습니다. 많이 어리버리하죠? ㅎㅎ

 

시뮬레이터에서 확인하니 모든 개체가 왼쪽 모서리로 쏠리는 현상이 나타났다.

분명 Editor area에서는 예쁘게 정렬되어 있던 개체들이 시뮬레이터에서는 왼쪽 모서리에 쏠리는 현상이 나타났습니다.  주로 오토레이아웃 제약 조건이 제대로 설정되지 않았기 때문에 일어나는 현상입니다. 

해결 Inspector area > Size Inspector > Layout과 Autoresizing 설정값을 입력하여 오류를 해결했습니다. (하단 사진 참조)

이미지 리스트

메인페이지를 만들었으니 더보기 버튼을 눌렀을 때 나타나는 화면을 만들 차례입니다.

이미지와 텍스트로 구성하되, 하나의 리스트를 누르면 각 리스트의 세부 페이지로 넘어가도록 만들어줍니다.

 

이미지 리스트 = 이미지 + 텍스트

1. Horizontal StackView : 이미지와 텍스트를 나란히 배치하기 위해 
2. Imageview 추가 : Horizontal StackView 영역에 드래그 앤 드랍
3. Button 추가 : 팀원의 이름이 들어갈 부분입니다. 같은 StackView 영역에 드래그 앤 드랍
4. Vertical StackView : 여러개의 Horizontal StackView(이미지+텍스트)를 일정한 간격에 따라 리스트형으로 배치하기 위해 

** 4단계에서 추가한 Vertical StackView 위에 미리 만들어둔 Horizontal StackView를 쌓기 위해 작업트리에서 순서를 조정해주세요!

 

내가 원하는 이미지는 어떻게 추가할까요? 

1. 원하는 이미지를 Asset에 추가
2. Inspector area 내 'Image'에서 Asset에 추가했던 이미지 선택
3. 사진 크기가 아닌 Image View 크기 기준으로 구현하기 위해 Add New Constraints에서 원하는 Width와 Height값을 입력 합니다. 

** 앞으로 복붙할 이미지 + 텍스트 스택을 일정한 사이즈로 추가하기 위해 아래 설정값에 유의해야 합니다. 

1. Vertical StackView Inspector area에서 'Distribution' Fill Equally 
2. 'View'_'Content Mode' Aspect Fit
3. Image View > Add New Constraints > 값 설정 : 사진 크기가 아닌 Image View 크기 기준으로 구현하기 위해 Add New Constraints에서 원하는 Width와 Height값을 입력 합니다. 

 

시뮬레이터에서 확인하니 모든 개체가 왼쪽 모서리로 쏠리는 현상이 또 나타났다.

네 또 나타났습니다. 이놈

해결 가장 상위 개체인 Vertical StackView의 Inspector area에서 Layout을 조정합니다. 

Inspector area > Size Inspector > Autoresizing Mask > Autoresizing에서 상하좌우 선택해서 개체 고정

 

 

Horizontal StackView와 Vertical StackView를 병합할 때 생기는 문제

성격이 다른 두 StackView를 병합해야 이미지 리스트 완성이 되지만 왼쪽에 보이는 스택을 Vertical StackView에 드래그 앤 드랍하니 오른쪽 화면과 같이 꽉 차는 현상이 발생했습니다. 

해결 

Vertical StackView의 Inspector area > Attribute Inspector >

'Destribution'은 Fill Equally(앞으로 복붙할 이미지 리스트가 동일한 사이즈로 배치됨)

Vertical StackView의 Inspector area > Attribute Inspector > View 

'Content Mode'는 Aspect fit으로 설정해줍니다. 

 

하 끝났습니당

 

팀원분들과 만들어 본 부분을 잘 이해했는지 확인하기 위해 처음부터 혼자 만들어보았습니다. 내일 필요한 부분을 예습까지 해보고 싶었는데 참 쉽지 않네요 ㅜ.ㅜ 

 

 

 

 

좀 cheesy하죠?ㅎㅎ