Containment 요소 정리, 오토레이아웃 실습 (TIL 2일차)

주요 컴포넌트 카테고리

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

1. Containment

 1-1. Card(카드)

• 내용에는 이미지부터 헤드라인, 보조 텍스트까지 다양
• 카드 안의 내용에 따라 치수가 달라짐

❶ 높이 있는 카드 (Elevated) ❷ 채워진 카드 (Filled)  ❸ 외곽선 카드(Outlined)

시각적 위계

Outlined> Elevated> Filled

인터렉션에서 카드를 펼쳐도 되지만, 스크롤은 X(모바일 환경에서 두개의 스크롤바가 나타날 수 있기 때문)

 

 1-2. Dialog (다이얼로그)

• 중요한 안내나 결정을 요구할 때 사용(행동 유도)
• 카드 안의 내용에 따라 치수가 달라짐
• 하나의 단일 작업으로 설계
• 진행 상황 삭제와 같이 위험도가 높은 행동을 확인하는 용(낮은 것은 스낵바 사용)

❶기본 다이얼로그 ❷전체 화면 다이얼로그

 

두 가지 다이얼로그의 패딩값. 타이틀-본문 텍스트 간 패딩 16dp, 본문-버튼 간 패딩 24dp

❶선택이 이뤄질 때가지 비활성화 ❷무시 버튼은 왼쪽에 배치

대화 필드에 관한 오류는 항상 발생하는 위치에 인라인으로 표시되어야 한다!

 

---이후로는 피그마 실습 중 튜터님께 물어봐서 해결했던 것 기록

피드백 받기 전 상황을 다시 재현한 것

1.Header의 높이가 내가 만들던 것이 더 작았고(패딩값은 동일)

2.카드 컨테이너를 잡고 옆으로 늘리면 이미지의 프레임은 늘어나는데 이미지는 늘어나지 않은 상황이었다

 

1번 문제는 높이값이 fixed로 되어있던 것이라서 fill로 하고 간단히 해결

2번은 콘스트레인츠 값을 좌우, 스케일로 하면 이미지 크기가 늘어나는 것으로 해결되었다

원래는 영문판을 쓰지만 직관적으로 이해하는데 한글판이 쉬워서 섞어가면서 쓴다....(영알못이에요)

 

이렇게 해서 이 문제는 해결되는 것으로 보았으나 똑같은 문제가 또 일어나게 된다!!!

네비게이션 바를 늘렸더니 구분선이 안 늘어났다;;

먼저 Divider의 프레임을 fill로 하고 Divider는 콘스트레인트로 위의 이미지와 똑같이 설정해두었다

그랬더니 예시처럼 쭉쭉 잘 늘어난다!

단, 오토레이아웃 무시(이그노어)가 걸려있다...(위치 옆에 뜨는 파란색) 튜터님이 해준 이미지에는 안 떠서 해결해야할 것 같다!!..