Tab, Navigation Bar, 인스턴스 실습 (TIL 3일차)

주요 컴포넌트 카테고리

• Actions /액션: 버튼(Button), 플로팅 액션 버튼(FAB)
• Communication /인포메이션: 스낵바(Snackbar), 토스트 메시지
• Containment /컨테이너: 카드(Card), 다이얼로그(Dialog)
• Navigation /내비게이션: 탭(Tab), 네비게이션 바(Navigation Bar)
• Selection /컨트롤: 체크박스(Checkbox), 라디오 버튼(Radio Button)
• Text inputs /인풋: 텍스트 필드(Text Field), 검색 바(Search Bar)

1. Navigation

 1-1. Tab(탭)

• 서로 다른 화면과 뷰에 걸쳐 콘텐츠를 정리하는 데 사용
• 두 가지 유형: 프라이머리 탭 (주요 탭, 콘텐스 상단에 배치), 세컨더리 탭(보조 탭, 콘텐츠 영역 내)
• 서로 동등한 요소로 인식되도록 나란히 배치

연속적인 콘텐츠는 탭으로 만들지 말자! (그룹화된 것만)

Do스크롤 가능한 탭의 첫 번째 탭을 왼쪽 가장자리에서 52dp만큼 띄워 배치 Don't 중간에 잘려 표시 지양

또한 스크롤 할 때 앱 바 뒤로 스크롤하는 것은 별로라서 바까지 다 스크롤되게 인터렉션하면 좋음.

탭 바에서 라벨 요소가 없을때, 접근성 라벨의 묘사를 명확히 할 것

 1-2. Navigation Bar(네비게이션 바) 

• 작은 화면의 디바이스(폰, 태블릿)에서 서로 다른 UI 화면 간 이동을 가능하게 함
• 데스크탑에는 네비게이션 레일이나 탭을 사용하기(네비게이션 바 사용 XX)
• 동일한 중요도를 가진 3~5개의 탭
• 페이지는 네비게이션 바, 관련 콘텐츠는 탭!
• 아래로 스크롤 시 사라질 수 있음

수직 배치는 휴대폰에서, 수평 배치는 태블릿이 제일 적합하다

 

네비게이션에서 라벨 떼지 말기! 그리고 항목이 적을 경우에는 탭을 사용하자

 

--이후 피그마 실습

어제에 이어서 네비게이션 바 연습(실패작)

조건은 아이콘 유무, 라벨 유무, 아이콘 스왑이었다

근데 아이콘을 스왑하는게 아이콘을 인스턴트 교체로 바꾸는 건지 저 활성 인디케이터를 바꾸도록 하는 건지 뇌정지가 왔다

(그래서 베리언트 위에 저 혼돈의 결과물을 탄생시킴...)

일단 튜터님께 물어보기 전에 혼자서 이리저리 해보는 게 나중에 까먹지 않아서 유튜브에 검색했다

그래서 Nav item을 컴포넌트를 만들고, 인스턴트를 오토 레이아웃으로 묶어서 구현해보기로 결정...

 

짠!! 베리언트 개수도 줄어들고 아이콘 스왑도 된다!!

베리언트로 하나의 Nav item를 만들고, 하나에서 변경되도록 하면 아주 쉽다!

 

순서는

1.아이콘 컴포넌트화 (네이밍도 해준다)

2.선택/미선택 베리언트 만들기

2.아이콘에 인스턴스 스왑 속성 적용

3.텍스트 속성 추가

4.인스턴스를 오토레이아웃으로 묶고, 배경색 추가+패딩값 적용 ->완성!

 

아주 간단하다...(근데 몇시간 동안 방황함ㅠ.ㅠ)

글로는 이해가 어려우니 시청했었던 영상을 공유해둡니다 (개인적으로 피그마는 글보다 영상 설명이 더 이해하기 쉬움!)

[피그마 네비게이션 바 예시1 만들기]Create Navigation Bar type1 with figma

 

한번 배우니까 네비게이션 서랍은 금방 만들었다. 이것도 똑같은 방법으로 만들면 금방 만든다!

그리고 이그노어 오토레이아웃을 걸지 않고 구분선 늘어나게 하는 방법도 해결했다! 나의 경우 서순이 잘못된 거였다

먼저

1.프레임 안의 구분선에 콘스트레인츠 설정 

2.그리고 프레임은 fill로 설정

나는 오토레이아웃을 건 상태로 콘스트레인츠를 주려고 해서 자꾸 이그노어로 설정되는 거였다!! 해결~~~~

탭(좌) 헤더(우)

탭은 저번에 실습해본 적이 있어서 금방 만들었고, 헤더는 적용해야하는 베리언트가 많아서 꽤 걸렸다.

네비게이션 필의 프로퍼티가 꽤 많아서 차근차근 만들었는데 너무 여유부려서 시간이...

이제 익숙해졌으니 빨리 만들어야겠다!!