iOS 다수 UILabel 사이 붙이는 간단 제약조건 설정법

 

 

안녕하세요! 민군입니다 ^-^//
오늘은 iOS개발 팁 중 간단한 주제 들고 왔는데요.
앱을 만들다보면 메인라벨 옆에 붙는 꼬리라벨을 구현해야할 때가 있는데요. 이 꼬리라벨은 항시 메인라벨 옆에 붙어있어야 보기 좋은데 제약설정이 부족하면 이게 잘 안될 때가 있어요. 

오늘은 이런 다수의 라벨을 적절한 제약조건(Constraint)메인라벨에 찰싹 붙어있게 할 수 있는 방법을 얘기해보겠습니다. 

* 이 방법이 꼭 정답이 아닙니다. 다양한 UI배치 상황이 있기 때문입니다. 복잡한 UI구성시에는 Hugging Priority, Compression등의 제약조건 세부설정도 필요할 수 있습니다.

 

 

 

---

iOS 다수 UILabel 사이 붙이는 간단 제약조건 설정법

 

❋ UILabel을 어느때나 서로 붙이고 싶은데... ㅠㅠ

오늘의 문제상황을 보여주는 UI예시입니다. 저는 BTC/KRW 옆에 증가율라벨을 찰싹 붙이고 싶은데 붙어있질 않고 저 멀리 가있네요. 
제약조건 설정은 어떻게 되어있는지 한번 볼까요?

 

 

메인 타이틀라벨(BTC/KRW)은 Leading, Top, Height엥커만 지정이 되어있네요. 라벨의 길이가 텍스트마다 다를 수 있어서 초기 제약설정은 이것 뿐입니다. 이번에는 서브라벨의 제약조건을 보겠습니다.

 

증감율 서브라벨의 제약설정 상태입니다. 이 라벨 또한 너비설정이 안되어있네요. 메인 타이틀라벨의 길이에따라 위치가 바뀌기 때문에 이렇게 설정을 해봤습니다.
위와같은 설정일때 서브라벨이 타이틀라벨에 달라붙지 않는 상황! 이 상황에서의 해결방법은 매우 간단합니다.

 

❋ 두 개의 UILabel을 제약조건설정으로 붙여보자!

바로 서브라벨의 Trailing, RightAnchor의 설정을 equalTo가 아닌 lessThanOrEqualTo 로 변경하시면 됩니다.
우측 제약조건 간격이 상황에 따라 줄어들 수 있는 설정값이 되는 셈이죠.

Bottom, Trailing(Right)Anchor 값은 줄어들수록 사이 공백간격이 커진다는 사실을 꼭 이해하셔야합니다. 

이런 설정은 Compression, Hugging 설정에 따라 결과가 달라질 수도 있는 것으로 알아요. 잘 생각하고 써야 추후에 꼬이는 일이 없겠지요.
자, 그럼 바로 결과를 보도록 하겠습니다. ^-^//

 

✓ 제약조건 설정 후 UI배치 결과

넵 깔끔하게 메인타이틀라벨에 서브라벨이 붙는 것을 보실 수 있습니다. 이처럼 UI의 적절한 배치를 위해서는 제약조건의 우선순위와 제약조건 효과의 이해가 동반되어야 한다는 점! 저도 더 멋진 UI배치를 위해 계속 공부하겠습니다.

지금까지 iOS 다수 UILabel 사이를 간단하게 붙이는 제약조건 설정방법에 대해 다뤄봤습니다.
모두들 즐거운 하루 되세요 ^-^//