[iOS] StackView 사이에서 간격을 주는법

✅ 이번 시간에는 스택뷰 사이에서 간격을 주는 방법에 대해서 알아볼 예정이야.

StackView Attributes Inspector

스택뷰를 활용하기 위해서는 저기서 하나씩 해보자.

Alignment와 Distribution을 활용하면 ok

 

✅ 실제 개발에서 스택뷰 때문에 고민했던 것

 

🟠 텍스트필드의 입력값이 주어지지 않은 상황에서 어떻게 처리해야 할까요?

피그마 UI

위에 보이는 이미지를 구현해야 하는데 스택뷰를 사용해서 구현시 발견한 문제점이

스택뷰 

 - 텍스트필드(시)

 - 레이블(콜론)

 - 텍스트필드(분)

이런식으로 넣었는데, 처음에는 텍스트 필드의 입력값이 주어지지 않아서(텍스트 필드의 길이가 0이라는 말) UI가 초기에 배치될 때 레이블이분을 담당하는 텍스트 필드가 나머지 모든 영역을 억지로 채우는 것을 확인할 수 있었다.

무슨 말이냐면, 스택뷰의 길이를 10이라고 가정하면,

 시(0) : 콜론(1) : 분(9) 

이런 문제가 발생한다.

그래서 초기값을 주지 않기 때문에, 스택뷰를 적용하기엔 어려움을 느꼈음.

 

그렇다면 나는 이것을 어떻게 해결했을까?

 

스택뷰가 아닌 일반 뷰를 사용하여 스냅킷을 이용해 분배

이름이 스택뷰라고 되어있지만 그냥 뷰다!! 

 

🟠 시작점을 알고 끝점은 모르지만, 거리를 일정하게 분배하고 싶어.

 

피그마 UI 빨간색 안의 것을 구현해야할 때

저기서 내가 느낀 문제점이 첫줄에서 '일'이라는 글자를 right를 건게 아니라 바로 앞의 텍스트 필드에서 left를 걸어두었기 때문에, right를 찾을 수 없었음.

처음에는 컬렉션 뷰로 구현하려고 했으나, 컬렉션 뷰는 레이아웃을 잡아주는 메소드(flow~~) 에 의해서 처음에 끝 점을 알 필요가 생김.

물론 커스텀 레이아웃을 사용하여 구현할 수도 있겠지만 그러면 배보다 배꼽이 더 커지게 된다.

그래서 Snapkit을 사용하니까 스택뷰를 첫줄의 캘린더 아이콘의 left 그리고 '일' 레이블의 right로 제약조건을 설정하여, 안에 요소들을 넣어주면 자동으로 자기들끼리 간격을 갖게 되어 해결할 수 있다!

 

 

 

 

 

 

(참고)

https://brody.tistory.com/115

iOS - StackView(기본)