표준 레이아웃

• 표준 레이아웃은 다양한 폼팩터에서 최적화된 사용자 경험을 제공하는 검증된 다양한 레이아웃임

• 표준 레이아웃은 작은 화면의 스마트폰뿐만 아니라 태블릿, 폴더블, ChromeOS 기기까지 지원함, 머티리얼 디자인 가이드에서 파생된 레이아웃이며 이는 심미적이면서도 기능적임

• 안드로이드 프레임워크는 레이아웃의 구현을 직관적이고 신뢰할 수 있도록 만드는 특별한 컴포넌트를 포함함

• 표준 레이아웃은 매력적이고 생산적인 UI를 만들어내고 이는 훌륭한 앱의 기반이 됨

목록-세부정보

• 목록-세부정보 레이아웃은 사용자가 설명적, 해설적 또는 다른 추가정보(아이템 세부정보)를 가지는 아이템 목록을 탐색할 수 있게 함

• 이 레이아웃은 앱의 창을 양쪽 두개의 패널로 나누고, 한쪽은 목록, 다른 한쪽은 세부정보를 표시하는 패널로 배치함, 사용자가 목록에서 아이템을 선택하면 다른쪽에 아이템 세부정보를 표시하기 위함임, 상세정보에 있는 딥 링크는 상세정보 패널에서 추가 내용을 표시할 수 있게 함

• Expanded 너비의 화면은 목록과 세부정보를 동시에 표시함, 목록의 아이템을 선택하면 선택된 아이템과 관련된 내용을 표시하도록 세부정보 패널을 업데이트함

• Medium 과 Compact 너비의 화면은 사용자 상호작용에 따라 목록이나 세부정보 하나만 표시함, 목록이 표시되고 있을 때 아이템을 선택하면 목록의 대신에 아이템 세부정보를 표시함, 세부정보가 표시될 때 뒤로가기 버튼을 누르면 목록을 다시 표시함

• 기기 방향 전환이나 앱 창 크기 변경같은 설정 변경은 창 크기 클래스를 변경시킬 수 있음, 목록-세부정보 레이아웃은 그에 따라 다음과 같이 반응하며 앱 상태를 보존함

  • 만약 expanded 너비의 화면이 목록과 세부정보 패널 모두를 표시하고 있을 때 medium 이나 compact 로 너비가 좁아진다면 세부정보 패널이 남아서 표시되고 목록 패널이 가려짐
  • 만약 medium 이나 compact 너비의 화면이 세부정보 패널만 표시되고 창 크기 클래스가 expanded 로 넓어진다면 목록과 세부정보가 같이 표시되고 목록은 세부정보에 내용이 나오고 있는 아이템을 선택 상태로 나타냄
  • 만약 medium 이나 compact 너비의 화면이 목록 패널만 보이고 있는 상태에서 expanded 로 넓어지면 목록과 빈 세부정보 패널이 같이 표시됨

• 목록-세부정보 레이아웃은 메시지 앱, 연락처 관리자, 파일 관리자 또는 목록의 아이템에서 추가 정보를 보여주는 모든 앱에서 이상적임

그림 1. 대화의 목록과 선택된 대화의 세부정보를 표시하는 메시지 앱

구현

• 목록-세부정보 레이아웃은 컴포즈, 뷰, 액티비티 임베딩(레거시 앱용)을 포함하는 다양한 기술로 만들 수 있음, 앱을 위해 어떤 기술이 적합한지는 뒤의 적용 대상 부분에서 설명함

• SlidingPaneLayout 라이브러리는 뷰나 프래그먼트 기반으로 목록-세부사항 레이아웃을 구현할 수 있도록 설계됨

• 이를 구현하는 첫 단계로는 SlidingPaneLayout 을 XML 레이아웃의 루트 요소로 선언하는 것임, 그 다음 목록과 세부정보 내용을 나타내는 뷰나 프래그먼트를 그 자식요소로 추가해야 함

• 그 후에는 목록과 세부정보 뷰 또는 프래그먼트 사이에서 데이터를 전달할 수 있는 통신 방법을 구현해야 함, 이 때 비즈니스 로직을 구성 변경이 일어나도 남아있도록 저장하기 위할 수 있는 ViewModel 이 권장됨

• SlidingPaneLayout 은 목록과 세부정보를 언제 동시에 표시하고 각각 표시해야 하는지 자동으로 결정함, 창이 목록과 세부정보를 수용할 수평 공간이 있다면 이를 양쪽으로 배치해 나타냄, 창이 그러기에 공간이 충분하지 않다면 사용자의 상호작용에 따라 목록이나 세부정보 중 하나만 표시함

액티비티 임베딩

• 여러 액티비티를 가지는 레거시 앱에서 두 액티비티를 같은 화면의 양쪽에 배치하거나 쌓기 위해서(한 액티비티를 다른 액티비티 위에) 액티비티 임베딩을 사용할 수 있음, 만약 앱이 목록과 세부정보를 별도의 액티비티에서 구현했다면 액티비티 임베딩을 사용해 리팩토링을 최소화하거나 없이 목록-세부정보 레이아웃을 구현할 수 있음

• XML 설정 파일을 사용해 태스크 창 분할을 저장해 액티비티 임베딩 기능을 구현할 수 있음, 분할은 분할을 시작하는 주 액티비티와 보조 액티비티를 정의함, 창 크기 클래스 중단점을 이용해 분할이 시작되는 최소 디스플레이 너비를 지정할 수 있음, 디스플레이 너비가 최소 중단점 미만이 된다면 액티비티는 다른 액티비티 위에 표시됨, 예시로 최소 디스플레이 너비가 600dp라면 compact 디스플레이에서는 액티비티가 다른 액티비티 위에 표시되지만, medium 이나 expanded 디스플레이에서는 두 액티비티가 양쪽으로 배치되어 표시됨

• 액티비티 임베딩은 안드로이드 12L (API 레벨 32) 이상에서 지원되지만, 기기 제조사가 구현해놓았다면 더 낮은 API 레벨에서도 지원될 수 있음, 만약 기기에서 액티비티 임베딩을 지원하지 않으면 대체 행동의 결과로 목록 액티비티나 세부정보 액티비티가 사용자 상호작용에 따라 앱의 전체 화면을 차지하게 됨

피드

• 피드 레이아웃은 많은 양의 내용을 빠르고 편하게 볼 수 있도록 동등한 내용의 요소를 조절 가능한 그리드에 배치함

• 크기와 포지션은 내용 요소들 간의 관계를 만듬

• 요소들을 같은 크기로 만들고 같이 배치함으로써 컨텐츠 그룹을 만들수 있고, 이 그룹 내에서 특정 요소를 다른 인접한 요소보다 크게 만들어서 주목도를 높일 수 있음

• 카드나 리스트는 피드 레이아웃의 일반적인 컴포넌트임

• 피드 레이아웃은 그리드를 단일 스크롤 열에서 다중 열 스크롤 피드까지 조정해 내용을 피드로 나타낼 수 있기 때문에 거의 모든 크기의 디스플레이를 지원함

• 피드는 뉴스나 소셜 미디어 앱에 특히 잘 어울림

그림 2. 다양한 크기의 카드로 글을 나타내는 소셜 미디어 앱

구현

• RecyclerView 는 많은 양의 아이템을 한 열로 효율적으로 렌더링함, GridLayoutManager 는 아이템을 그리드로 배열하고 아이템의 크기와 그리드 내에서 차지하는 칸을 설정할 수 있음

• 사용 가능한 디스플레이 영역의 크기를 기준으로 그리드 열 수를 설정해 아이템을 위한 최소 허용 너비를 설정할 수 있음

• 한 아이템당 한 칸을 차지하는 GridLayoutManager 의 기본 나열 방법은 사용자 지정 SpanSizeLookup 을 생성해 바꿀 수 있음, 이를 통해 특정 아이템을 다른 아이템보다 강조하기 위해 차지하는 칸을 조정할 수 있음

• compact 너비의 디스플레이에서는 오직 한 열을 위한 공간만 있으므로 GridLayoutManager 보다 LinearLayoutManager 를 사용하는 것이 좋음

지원 패널

• 지원 패널 레이아웃은 앱 내용을 주 디스플레이 영역과 보조 디스플레이 영역으로 구성함

• 주 디스플레이 영역은 메인 컨텐츠를 포함하고 앱 창의 대부분의 영역(일반적으로 3분의 2정도)을 차지함, 보조 디스플레이 영역은 앱 창의 나머지 영역을 차지하며 메인 컨텐츠를 지원하는 내용을 표시함

• 지원 패널 레이아웃은 expanded 너비의 디스플레이의 가로 방향에서 잘 동작함, medium 이나 compact 너비의 디스플레이에서는 주 디스플레이 영역과 보조 디스플레이 영역의 내용이 모두 좁은 디스플레이 공간에 맞게 적응형으로 만들어졌다면 두 디스플레이 영역이 모두 표시되고 그렇지 않다면 추가 내용(보조 디스플레이 영역)이 초기에는 하단 또는 측면 시트에 숨겨져있고, 메뉴나 버튼과 같은 조작 수단을 통해 접근할 수 있음

• 지원 패널 레이아웃은 주 내용과 보조 내용의 관계에 있어서 목록-세부정보 레이아웃과는 다름, 지원 패널 레이아웃의 보조 패널의 내용은 오직 주 패널의 내용과 관련있을 때만 의미가 있음, 예시로, 지원 패널 도구 창은 그 자체로는 의미를 가지지 않음, 목록-세부정보 레이아웃의 세부정보 패널에 있는 추가 정보의 경우엔 주 내용이 없더라도 의미를 가짐, 예시로, 상품 목록에서 가져온 상품의 설명은 스스로 의미를 가짐

• 지원 패널은 다음과 같은 상황에 쓰임

  • 생산성 앱: 리뷰어 댓글이 포함된 문서나 스프레드시트가 있을 때
  • 미디어 앱: 관련된 영상 리스트가 포함된 스트리밍 영상이나, 플레이리스트가 추가된 앨범이 있을 때
  • 검색 및 참조 앱: 쿼리 입력 폼과 결과가 있을 때

그림 3. 지원 패널에 상품 설명을 표시하는 쇼핑 앱

구현

• 지원 패널 레이아웃은 LinearLayout 이나 ConstraintLayout 과 같은 보조 레이아웃을 사용해 구현할 수 있음, compact (<600dp), medium (>=600dp), expanded (>=840dp) 와 같이 앱을 위해 사용가능한 가로 디스플레이 공간을 구분하기 위해 창 크기 클래스를 설정함

• 각 창 크기 클래스에 대해 다음과 같이 레이아웃을 정의함

  • compact : 앱 리소스 layout 폴더 내에 지원 패널의 내용이 주 내용 밑에 배치되거나 하단 시트의 안에 배치되어 렌더링되는 레이아웃을 정의해야 함
  • medium : layout_w600dp 폴더 내에 주 내용의 결과를 내용으로 가지는 지원 패널을 주 내용과 같은 가로 디스플레이 영역을 차지하며 화면 양쪽에 배치되어 렌더링되는 레이아웃을 정의해야 함
  • expanded : layout-w840dp 폴더 내에 주 내용의 결과를 내용으로 가지는 지원 패널을 주 내용과 같이 화면 양쪽에 배치하지만 지원 패널이 30%의 너비만 차지하고 나머지 공간을 주 내용이 차지하도록 배치하는 레이아웃을 정의해야 함

• ViewModel 을 사용해 뷰, 프래그먼트 또는 둘의 조합과 같은 어떤 방식으로 만들어지더라도 주 내용과 지원 패널이 통신할 수 있도록 하는 것이 좋음

적용 대상

• 표준 레이아웃은 내용을 쉽게 접근하고 깊게 탐색할 수 있는 다면적인 표현이 가능하게 함, 앱을 위해 어떤 레이아웃을 사용할지와 구현 전략을 결정하기 위해 다음 흐름도를 사용하면 좋음

그림 4. 대형 화면 표준 레이아웃 결정 트리

원문: https://developer.android.com/develop/ui/views/layout/canonical-layouts