Texture Best Practice #3

이전 Texture Best Practice #3에서 다뤘던 내용은 기초적인 LayoutSpec을 잡는 과정과 각종 노하우를 보여주었으면 오늘은 실질적으로 코드 작성을 통해서 위와 같이 복잡한 Layout을 설계를 해보도록 하겠습니다.

이 글을 먼저 보신분은 아래의 포스팅된 글을 우선 참고하시면 도움이 되실 것이라 생각합니다.

Texture Best Practice #2
_Texture Best Practice #2 LayoutSpec 기초 및 노하우_medium.com

참고로 FlexBox개념에 대해서 이해하신 분들께서는 이번 포스팅이 지루 할 수도 있습니다.

Texture는 FlexBox 개념을 토대로 UI 레이아웃을 설계하게 됩니다.

라이브러리 내부를 보면 Facebook YogaKit를 기반으로 만들어진것을 확인 할 수가 있습니다. Texture는 실제 프로덕트에서 사용되는데 필수적이고 가장 사용이 많이되는 레이아웃을 기본적으로 제공해줍니다. 그래서 YogaKit로 바닥부터 설계할 필요없이 편리하게 사용할 수가 있습니다.

예를 들어 3개의 View를 Row direction으로 균등한 크기로 화면 가운데에 채운다면 아래와 같습니다.

YogaKit를 사용한 예

이렇게 할 바에 차라리 SnapKit나 그냥 xib(storyboard)상에서 선을 긋는게 훨씬 빠를 것이다. 하지만 Texture는 이러한 번거로움을 간단히 아래의 코드와 같이 해결해준다.

하지만 실제 FlexBox 동작에 대해서 익히기 위해선 필자의 입장에서는 YogaKit를 우선 경험해보는게 좋다고 생각합니다.

그렇다고 프로젝트 하나 만들어서 YogaKit를 Pod으로 받아서 코드 작성을 할 필요는 없습니다.

필자가 처음 접했을 당시에는 없었지만 최근에는 FlexBox를 익힐 수 있게 Facebook에서 Yoga FlexBox Playground를 웹으로 제공해주기 때문입니다.

제가 설명한건 이게 끝입니다. 사실 FlexBox라는게 크게 대단한 건 아닙니다.

딱 한문장으로 표현하자면

편리하게 레이아웃을 설계하자

이게 다입니다.

그래도 이해가 안가신다면

Yoga Tutorial: Using a Cross-Platform Layout Engine
_Learn about Yoga, Facebook’s cross-platform layout engine that helps developers write more layout code in style akin to…_www.raywenderlich.com

갓 raywenderlich에서 YogaKit 사용 튜토리얼을 상세하게 설명 해놨으니 이거까지 참고하시면 도움되실꺼라 생각합니다.

자 그럼 FlexBox 개념을 숙지하셨으면 제가 처음 보여드렸던 톡 메세지 레이아웃을 직접 코딩을 해보겠습니다.

우선 위에 필요한 모든 UI구성요소들에 대한 Property를 만들어 줍니다.

참고로 XImageNode, TalkBalloonLikeNode이런 것들은 다른 곳에서 재사용 할 수 있도록 Node를 만든 것입니다.

그리고 contentAreaNode에 layoutSpecBlock을 사용하였는데 이건 좌측 이미자와 같이 노란 색 영역 의 회색 말풍선에 해당하는 Node입니다. layoutSpecBlock안에 노란색 레이아웃을 구성 할 것입니다.

이제 각 녹색, 노란색, 파란색 영역 순으로 LayoutSpec를 설계 해보겠습니다.

우선 프로필같은 경우 Relative하게 좌측 상단에 위치하면 되기 때문에 아래의 코드와 같이 ASRelativeLayoutSpec를 사용합니다.

그리고 우측 하트버튼의 경우도 마찬가지로 위와 같이 RelativeLayoutSpec으로 잡아주되 당연히 우측 하단에 위치하기 때문에 VerticalPosition을 end로 잡아줍니다.

사실 이미지를 보면 Like가 살짝 위로 올라간 것을 볼 수있는데 이건 메세지가 두 줄까지는 말풍선 가운데에 맞추겠끔 디자인 되어서 ASAbsoluteLayoutSpec으로 조절 했으나 구독자 편의에 맞춰서 대충 RelativeLayoutSpec으로 코드를 작성했습니다.

그리고 가운데 말풍선 Content영역은 이전 포스팅 글에서 언급한 바와같이 StackLayout으로 만듭니다.

위의 코드같은 경우 복잡한 편인데 아래와 같이 요약할 수가 있습니다.