클론디자인 과제를 진행하는데 어려운 점이 있었는데 바로 카드, 리스트를 만드는 것이었다.
그래서 여러 시도를 해보다가 어려운 점들을 모아모아 튜터님께 여쭤보러 갔다.
그리하여 방법을 찾아내었는데!
그 방법 첫번째,,,
오토레이아웃 적극 활용하기
지금 클론디자인을 진행하는 페이지가 채용사이트(원티드)이기 때문에 카드 디자인은 이런 식으로 구성이 되어있다.
이러한 카드는 가로로도 나타낼 수 있는데 그게 바로 리스트이다.
바로 이게 리스트!
이때 카드와 리스트는 레이아웃으로 편리하게 서로 왔다갔다 하며 만들 수 있는데 그게 바로
오토레이아웃의 이 플로우!
첫번째는 프레임 느낌이고,
두번째 세번째가 오토레이아웃 느낌이다. 특히 두번째가 세로 나열이기 때문에 카드, 세번째가 가로 나열이기 때문에 리스트를 위한 기능이다. 즉, 카드였던 오토레이아웃을 세번째 플로우만 누르면 작은 수정만 거치면 리스트가 될 수 있다는 것이다! 이것이 카드, 리스트를 오토레이아웃으로 만들어야 하는 이유다.
카드를 만들 때, 시각적 관점
위와 같은 카드가 있다고 했을때, 하기와 같이 생각하는 것이 좋다.
이렇게 따로 따로 덩어리로 봐서 노란색박스와 초록색박스를 먼저 만들고 그 둘을 오토레이아웃 한다고 생각하면 좋다.
여기서 중요한 점은 초록색 덩어리를 만들 때 제목, 부제를 오토레이아웃으로 만들고 그걸 또 오토레이아웃으로 묶는 것이 초록색 덩어리를 만드는 방법이다. (더불어 패딩값으로 위치 조정하기)
또 위 노란색박스는 프레임으로 만들고 이 두 박스를 오토레이아웃으로 묶으면 된다. 여기서 또 중요한 점!!! 그건 바로..
Clip content
위와 같이 클립 콘텐트를 꼭 눌러줘야지 하기와 같은 상황을 방지할 수 있다... 즉 오토레이아웃프레임 모양에 맞추어 모든 프레임들을 넣는다고 생각하면 좋다. 체크하지 않는다면 프레임이 하기처럼 오토레이아웃프레임에 들어가지 않고 자기 주장을 펼칠 수 있다.
프레임으로 만들기(모형 X)
당연한거겠지만 은근 헷갈렸는데, 모든 컴포넌트들은 기본적으로 프레임으로 만드는 것이라고 튜터님께서 알려주셨다.
시각적 관점 보충 설명
위와 같은 카드는
초록색 박스를 먼저 만들고 그걸 또 오토레이아웃 하면 한 프레임에 담기는데 그걸 곡률 조정하고 fill하면 노란색 박스가 되는 것이다! 그 후에 파란색 박스를 만들고 노란색과 파란색 박스를 오토레이아웃하면 되는 것이다.
그리하여 완성한 결과물
매우 기본적인 것이겠지만 뿌듯하네요 ㅎㅎ
익숙해질수있도록 복습을 열심히 해야겠지요!
