실습_ios 콘텐츠 리스트 제작

Section_01.zip

0.31MB

---

1. 준비된 파일 ios_list_1.xd 불러온다

3. 사각형이 선택된 상태로 옵션 창에서 ‘테두리’의 체크는 해제하고 ‘그림자’에 체크한다

6. 준비 파일 왼쪽에 있는 상태 바를 드래그해 좌우측 가이드라인에 맞게 붙이고, 텍스 트도 그대로 복제하여 배치한 후 타이틀을 ‘Friends’로 변경한다

---

준비 파일에 있는 상태 바는 [목록] - [UI 키트 받기] 를 통해 미리 다운로 드해 필요한 부분만 가져온 것이다. 위치나 글꼴의 크기는 UI 키트를 참고 하면 좋다

8. 텍스트 툴( )을 이용해 사람 이름인 ‘Lauren David’, 대화 내용인 ‘Did you do well on your exams?’를 각각 입력해 다음과 같이 배치하고 옵션 창에서 글꼴과 크기, 속성을 각각 설정한다.

10. 대화 내용의 중앙에 맞추어 대화 수가 입력된 배지를 만들어 오른쪽 여백에 닿게 배 치한다. 배지의 W(너비)는 18, H(높이)는 12, ‘모퉁이에 대해 동일한 반경( )’ 값 은 8, ‘채우기’ 색상은 #0090FF로 설정한다. 대화 수 텍스트의 크기는 8로 지정한다

11.선택 툴( )로 작성한 부분을 모두 선택하고 ctrl  + G를 눌러 그룹화한 후 옵 션 창에서 ‘반복 그리드’를 클릭해 오브젝트를 반복 그리드로 만든다

14.썸네일 하나를 더블클릭하고 옵션 창에서 ‘테두리’의 체크를 해제하면 모든 썸네일의 테두리가 해제된다

16. 탭 메뉴 상자 상단에 선 툴( )로 크기는 0.5, 색상은 #0090FF인 선을 만든다. 탭 메뉴 상자 가장 오른쪽 아이콘의 ‘테두리’ 색상과 글꼴의 ‘채우기’ 색상도 동일하게 변 경해 콘텐츠 리스트 UI를 완성한다.

---

스크롤의 이해

1. 하단 아이콘 + 글자 를 그룹화 한다. 이후, 하단 박스로 그룹핑 한다.

2. 아트보드를 세로로 길게하고, 리스트로 세로로 길게 한다.

3. 아트보드보드 보다 길이가 over 되면 파란색 구분선이 나타난다.

4. 아트보드에서 옵션 창에 스크롤이 활성화 된 것을 확인 할 수 있으며 뷰포트 높이도 설정할 수 있다.

5. 그룹화 된 하단 바를 선택하고 옵선창 > 변헝 아랫부분의 스크롤 시 위치 고정을 체크한다.