floatingButton을 만들때 이 링크 처럼
이렇게 각 버튼이 떨어져 있으며 따로 다른 동작을 해야하는 것일 일반적입니다.
하지만 제가 만들어야하는 floating button은
이와 같이 붙어있으며 하나의 버튼으로 작동해야하는 특이한 케이스였기 때문에 custom 하였습니다.
아래는 floating Back이라고 적혀있는 뷰를 사용한 것이고
위 버튼은 floating Button에 커스텀 한 것입니다
사실 위에 버튼은 클릭이 되지 않지만
단지 뷰를 어떻게 그렸는지 설명하기 위하여 그린 것입니다.
저는 stack View를 활용하여 만들었는데요
Stack View 란?
UIStackView는 iOS 9에서 나온 개념으로 여러 개의 View를 한 셋트로 만들어주는 역할을 하는 View입니다. 그래서 항상 StackView 안에는 몇 개의 View 들이 있는데, 이를 arrangedSubViews라고 합니다. 이 subView들은 일정한 규칙에 따라 StackView 안에서 배치됩니다
저희가 일반적으로 stack을 생각할 때
를 생각하시는데요
이것처럼 stack 안에 뷰를 hidden 하면 단순히 보이지 않는 것이 아니라
그 뷰가 pop된 것 처럼
그 상위 view 또한 넓이가 줄어들게 됩니다.
따라서 custom 버튼의 넓이가 < 이미지 넓이 + text넓이 + sideview 넓이>였다가
text, sideview를 hidden 해줌에 따라 이미지 넓이만 남게 되는 것이지요
여기서 주의할 점은 상위 뷰의 넓이를 지정하지 말아야하는 것입니다.
stackview안의 view들의 넓이로 계산 할 수 있게 해두어야합니다.
제가 만든 이 소스는
github에 남겨두도록 하겠습니다.
https://github.com/p41155a/floatingButton/blob/master/README.md