Layout Editor로 UI 빌드

Layout Editor에서는 레이아웃 XML을 직접 작성하는 대신 UI 요소를 시각적 디자인 편집기로 드래그하여 레이아웃을 신속하게 빌드할 수 있습니다. 이 디자인 편집기의 경우 레이아웃을 다양한 Android 기기 및 버전에서 미리 볼 수 있습니다. 또한 레이아웃이 다양한 크기의 화면에서 제대로 작동하도록 레이아웃 크기를 동적으로 조절할 수 있습니다.

Layout Editor는 Android 2.3(API 레벨 9) 이상과 호환되는 지원 라이브러리에서 제공하는 레이아웃 관리자인 ConstraintLayout을 사용하여 새 레이아웃을 빌드할 때 특히 유용합니다.

이 페이지에서는 Layout Editor에 관해 간략하게 소개합니다. 레이아웃에 관한 기초 사항은 레이아웃에서 자세히 알아볼 수 있습니다. ConstraintLayout을 사용하여 레이아웃을 빌드하는 방법에 관한 자세한 내용은 ConstraintLayout으로 반응형 UI 빌드를 참조하세요.

Layout Editor 소개

Layout Editor는 XML 레이아웃 파일을 열면 나타납니다.

그림 1의 숫자에 상응하는 편집기의 영역은 다음과 같습니다.

  1. Palette: 레이아웃으로 드래그할 수 있는 뷰와 뷰 그룹의 목록입니다.
  2. Component Tree: 레이아웃의 뷰 계층 구조입니다.
  3. Toolbar: 편집기에서 레이아웃 외형을 구성하고 일부 레이아웃 속성을 변경하기 위한 버튼입니다.
  4. Design editor: Design 또는 Blueprint 뷰의 레이아웃, 또는 이 두 가지 뷰 모두의 레이아웃입니다.
  5. Attributes: 선택한 뷰의 속성을 제어할 수 있는 영역입니다.

그림 1. Layout Editor

XML 레이아웃 파일을 열면 디자인 편집기가 열리도록 기본 설정되어 있습니다(그림 1 참조).

텍스트 편집기에서 레이아웃 XML을 편집하려면 창 맨 아래에 있는 Text 탭을 클릭합니다. 텍스트 편집기에서 창 오른쪽에 있는 Preview를 클릭하면 Palette, Component Tree 및 디자인 편집기도 볼 수 있습니다. 텍스트 편집기에서는 Attributes 창을 사용할 수 없습니다.

도움말: Alt + Shift + 오른쪽/왼쪽 화살표(Mac: Control + Shift + 오른쪽/왼쪽 화살표)를 눌러 디자인 편집기와 텍스트 편집기 간을 전환할 수 있습니다.

미리보기 모양 변경

디자인 편집기 맨 위 행에 있는 버튼을 사용하여 편집기에서 레이아웃의 모양을 구성할 수 있습니다. 이 툴바는 텍스트 편집기의 Preview 창에서도 사용할 수 있습니다.

그림 2. Layout Editor 툴바에 있는 레이아웃 모양 구성 버튼

그림 2의 숫자에 상응하는 사용 가능 버튼은 다음과 같습니다.

  1. Design and blueprint: 편집기에서 레이아웃을 보는 방식을 선택합니다. Design 뷰(레이아웃의 실제 미리보기)나 Blueprint 뷰(각 뷰의 윤곽선만 보기)를 선택합니다. 두 개의 뷰를 나란히 보려면 Design + Blueprint를 선택합니다.

    도움말: B를 누르면 뷰를 전환할 수 있습니다.

  2. Screen orientation and layout variants: 가로 및 세로 화면 방향 또는 기타 화면 모드를 선택합니다. 기타 화면 모드의 경우 앱에서 야간 모드와 같은 대체 레이아웃을 제공합니다. 이 메뉴에는 새 레이아웃 변형 생성을 위한 명령어도 포함되어 있습니다.
  3. Device type and size: 기기 유형(스마트폰/태블릿, Android TV 또는 Wear OS) 및 화면 구성(크기 및 밀도)을 선택합니다. 몇 가지 미리 구성된 기기 유형과 자체 AVD 정의 중에서 선택하거나 목록에서 Add Device Definition을 선택하여 새 AVD를 시작할 수 있습니다.

    도움말: 레이아웃의 오른쪽 하단을 드래그하여 기기 크기를 조정할 수 있습니다.

  4. API version: 레이아웃을 미리 볼 Android의 버전을 선택합니다.
  5. App theme: 미리보기에 적용할 UI 테마를 선택합니다. 앱 테마는 지원되는 레이아웃 스타일에서만 실행되므로 이 목록의 많은 테마에서는 오류가 표시됩니다.
  6. Language: UI 문자열에 표시할 언어를 선택합니다. 이 목록에는 문자열 리소스에 사용할 수 있는 언어만 표시됩니다. 번역을 편집하려면 드롭다운 메뉴에서 Edit Translations를 클릭합니다(Translations Editor를 사용하여 UI 현지화 참조).

참고: Layout Variants에서 새 레이아웃 파일을 추가하도록 선택하지 않은 경우 이러한 구성은 앱의 코드나 매니페스트에 어떠한 영향도 미치지 않고 레이아웃 미리보기에만 영향을 미칩니다.

새 레이아웃 생성

앱에 새 레이아웃을 추가할 때는 새 레이아웃이 모든 기기 구성에 적용되도록 먼저 프로젝트의 기본 layout/layout/ 디렉터리에 레이아웃 파일을 생성합니다. 기본 레이아웃을 생성했으면 특정 기기 구성(예: 특대형 화면)을 위해 레이아웃 변형을 생성할 수 있습니다.

Project 창 뷰에 따라 달라지는 새 레이아웃 생성 방법이 몇 가지 있습니다. 그러나 아래 절차는 모든 뷰에서 수행할 수 있습니다.

  1. Project 창에서 레이아웃을 추가할 모듈(예: app)을 클릭합니다.
  2. 기본 메뉴에서 File > New > XML > Layout XML File을 선택합니다.
  3. 대화상자가 나타나면 파일의 이름, 루트 레이아웃 태그, 레이아웃이 속한 소스 세트를 입력합니다. 그런 다음 Finish를 클릭합니다.

표시되는 대화상자가 다르기는 하지만 새 레이아웃 파일을 시작할 수 있는 다른 방법 두 가지는 다음과 같습니다.

  • Project 창에서 Project 뷰를 선택한 경우: 앱 모듈의 res 디렉터리를 열고 레이아웃을 추가할 레이아웃 디렉터리를 마우스 오른쪽 버튼으로 클릭한 후 New > Layout resource file을 클릭합니다.
  • Project 창에서 Android 뷰를 선택한 경우: layout 폴더를 마우스 오른쪽 버튼으로 클릭한 후 New > Layout resource file을 선택합니다.

레이아웃 변형 생성

레이아웃이 이미 있는 상황에서 다양한 화면 크기나 방향에 맞게 레이아웃을 최적화하기 위해 대체 버전을 생성하고자 하는 경우 다음 단계를 따르세요.

  1. 원래 레이아웃 파일을 열고 디자인 편집기가 표시되는지 확인합니다(창 맨 아래에 있는 Design 탭 클릭).
  2. 툴바에서 Orientation for Preview 를 클릭합니다. 드롭다운 목록에서 Create Landscape Variant와 같은 권장 변형을 클릭하여 작업을 마치거나 Create Other를 클릭하여 다음 단계로 진행합니다.
  3. 대화상자가 나타나면 디렉터리 이름에 리소스 정성자만 정의하면 됩니다. 리소스 정성자를 Directory name에 입력하거나 Available qualifiers 목록에서 선택(한 번에 하나씩)한 후 Add 를 클릭하면 됩니다.
  4. 모든 정성자를 추가했으면 OK를 클릭합니다.

동일 레이아웃의 변형이 여러 개 있는 경우 Layout Variants 를 클릭하면 표시되는 목록에서 변형을 쉽게 전환할 수 있습니다.

다양한 화면에 맞는 레이아웃을 생성하는 방법에 관한 자세한 내용은 다양한 화면 크기 지원을 참조하세요.

뷰 또는 레이아웃 변환

뷰를 다른 종류의 뷰로 변환하고 레이아웃(뷰 그룹)을 다른 종류의 레이아웃으로 변환할 수 있습니다.

  1. 편집기 창 맨 아래에 있는 Design 탭을 클릭합니다.
  2. Component Tree에서 뷰 또는 레이아웃을 마우스 오른쪽 버튼으로 클릭한 다음 Convert view를 클릭합니다.
  3. 대화상자가 나타나면 새로운 유형의 뷰 또는 레이아웃을 선택한 다음 Apply를 클릭합니다.

레이아웃을 ConstraintLayout으로 변환

ConstraintLayout은 Constraint Layout 라이브러리에서 사용할 수 있는 뷰 그룹으로서 Android 스튜디오 2.2 이상에 포함되어 있습니다. 이 레이아웃은 Layout Editor와 함께 완전히 새로 빌드되었습니다. 따라서 모든 항목을 디자인 편집기에서 액세스할 수 있으므로 XML을 직접 편집할 필요가 없습니다. 무엇보다도 제약 조건 기반 레이아웃 시스템을 통해 중첩된 뷰 그룹 없이 대부분의 레이아웃을 빌드할 수 있습니다.

레이아웃 성능을 향상시키려면 이전의 레이아웃을 ConstraintLayout으로 변환해야 합니다.

기존 레이아웃을 ConstraintLayout으로 변환하려면 다음 단계를 따르세요.

  1. Android 스튜디오에서 기존 레이아웃을 열고 편집기 창 맨 아래에 있는 Design 탭을 클릭합니다.
  2. Component Tree 창에서 레이아웃을 마우스 오른쪽 버튼으로 클릭한 후 Convert layout to ConstraintLayout을 클릭합니다.

레이아웃을 ConstraintLayout으로 변환하는 명령어는 앞 섹션에서 설명한 간단한 Convert view 명령어보다 더욱 지능적으로 제약 조건을 추론하고 레이아웃을 보존합니다.

ConstraintLayout을 사용하여 레이아웃을 빌드하는 방법에 관한 자세한 내용은 ConstraintLayout으로 반응형 UI 빌드를 참조하세요.

Palette에서 항목 찾기

Palette에서 이름으로 뷰 또는 뷰 그룹을 검색하려면 Palette 맨 위에 있는 Search 버튼을 클릭하거나 Palette 창이 활성화되어 있을 때 항목 이름 입력을 시작합니다.

PaletteCommon 카테고리에서 자주 사용하는 항목을 찾을 수 있습니다. 이 카테고리에 항목을 추가하려면 Palette에서 뷰 또는 뷰 그룹을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Favorite을 클릭합니다.

Palette에서 문서 열기

뷰 또는 뷰 그룹에 관한 Android 개발자 참조 문서를 열려면 Palette에서 UI 요소를 선택하고 Shift+F1을 누릅니다.

뷰 또는 뷰 그룹에 관한 Material Guidelines 문서를 열려면 Palette에서 UI 요소를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Material Guidelines를 선택합니다. 이 명령어를 사용했을 때 그 항목의 내용이 없을 경우 Material Guidelines 문서의 홈페이지가 열립니다.

레이아웃에 뷰 추가

레이아웃 빌드 작업을 시작하려면 Palette의 뷰와 뷰 그룹을 디자인 편집기로 드래그하기만 하면 됩니다. 레이아웃에 뷰를 놓으면 편집기에 그 뷰와 나머지 레이아웃의 관계에 관한 정보가 표시됩니다.

ConstraintLayout을 사용하고 있다면 Infer Constraints 및 Autoconnect 기능을 사용해 제약 조건을 자동으로 생성할 수 있습니다.

뷰 속성 편집

그림 3. Attributes

XML이 아닌 Attributes 창(Layout Editor 오른쪽에 있음)에서 뷰 속성을 편집할 수 있습니다. 이 창은 디자인 편집기가 열려 있을 때만 사용할 수 있으므로 창 맨 아래에 있는 Design 탭을 선택했는지 확인해야 합니다.

Component Tree 또는 디자인 편집기에서 뷰를 클릭하는 방법으로 뷰를 선택하면 Attributes 창에 그림 3과 같이 다음 내용이 표시됩니다.

  1. 레이아웃 파일에 지정된 속성이 나열되어 있는 Declared Attributes 섹션. 속성을 추가하려면 섹션 오른쪽 상단에 있는Add 를 클릭합니다.
  2. 너비/높이 스타일의 컨트롤이 있는 뷰 검사기. ConstraintLayout에 있는 뷰의 경우 이 섹션에는 제약 조건 바이어스가 표시되고 뷰에서 사용하는 제약 조건이 나열됩니다. 자세한 내용은 ConstraintLayout으로 반응형 UI 빌드를 참조하세요.
  3. 선택한 뷰의 공통 속성 목록. 사용 가능한 모든 속성을 보려면 창의 맨 아래에 있는 All Attributes 섹션을 펼칩니다.
  4. 검색 버튼. 특정 뷰 속성을 검색하는 경우 클릭합니다.
  5. 각 속성값의 오른쪽에 있는 표시기는 값이 리소스 참조인 경우에는 채워져 있고 그렇지 않으면 빈 상태 입니다. 이를 통해 하드 코딩된 값을 한눈에 인식할 수 있습니다. 둘 중 어떤 상태에서든 이 표시기를 클릭하면 Resources 대화상자가 열리는데, 이 대화상자에서 해당하는 속성의 리소스 참조를 선택할 수 있습니다.
  6. 오류 또는 경고가 있는 속성이 강조표시됩니다. 이때 오류는 빨간색으로, 경고는 주황색으로 강조표시됩니다. 오류의 예로 레이아웃 정의 속성에 있는 잘못된 항목을 들 수 있습니다(그림 참조). 경고의 예로는 리소스 참조가 예상될 때 하드 코딩된 값을 사용하는 것을 들 수 있습니다(그림 참조).

뷰에 샘플 데이터 추가

다수의 Android 레이아웃은 런타임 데이터에 의존하기 때문에 앱을 디자인할 때 레이아웃의 모양과 느낌을 시각화하기 어려울 수 있습니다. Android 스튜디오 3.2 이상의 경우 Layout Editor 내에서 샘플 미리보기 데이터를 TextView, ImageView 또는 RecyclerView에 추가할 수 있습니다.

이 뷰 유형 중 하나를 마우스 오른쪽 버튼으로 클릭하고 Set Sample Data를 선택하면 그림 4와 같이 Design-time View Attributes 창을 표시할 수 있습니다.

그림 4. Design-time View Attributes

TextView에서 여러 가지 샘플 텍스트 카테고리 중 하나를 선택할 수 있습니다. 샘플 텍스트를 사용하는 경우 Android 스튜디오에서는 TextViewtext 속성을 개발자가 선택한 샘플 데이터로 채웁니다. text 속성이 비어 있을 경우에만 Design-time View Attributes 창을 통해 샘플 텍스트를 선택할 수 있습니다.

그림 5. 샘플 데이터가 있는 TextView

ImageView에서 여러 가지 샘플 이미지 중 하나를 선택할 수 있습니다. 샘플 이미지를 선택하면 Android 스튜디오에서는 ImageViewtools:src 속성을 채웁니다(지원 라이브러리를 사용하는 경우에는 tools:srcCompat 속성을 채움).

그림 6. 샘플 데이터가 있는 ImageView

RecyclerView에서는 샘플 이미지와 텍스트를 포함하는 일련의 템플릿 중에서 선택할 수 있습니다. 이 템플릿을 사용하면 Android 스튜디오에서는 샘플 데이터의 레이아웃이 포함된 recycler_view_item.xml 파일을 res/layout 디렉터리에 추가합니다. 또한 Android 스튜디오에서는 샘플 데이터를 적절히 표시하기 위해 RecyclerView에 메타데이터를 추가합니다.

그림 7. 샘플 데이터가 있는 RecyclerView

레이아웃 경고 및 오류 표시

레이아웃에서 문제가 감지되면 해당 뷰 옆에 있는 Component Tree에 느낌표 아이콘( 또는 )이 표시됩니다. 오류에 관한 세부정보를 보려면 아이콘을 클릭합니다.

편집기 아래의 창에서 모든 알려진 문제를 보려면 툴바에서 Show Warnings and Errors( 또는 )를 클릭합니다.

이 창에서 Show issues on the preview를 활성화할 수도 있습니다. 이 기능으로 미리보기에서 각 뷰에 경고 또는 오류 아이콘이 추가됩니다(Blueprint 뷰가 아닌 Design 뷰에만 적용).

글꼴을 다운로드하여 텍스트에 적용

Android 8.0(API 레벨 26) 또는 Android Support Library 26.0.0 이상을 사용하는 경우 다음 단계에 따라 수백 가지 글꼴 중에서 선택할 수 있습니다.

  1. Layout Editor에서 Design 탭을 클릭하여 디자인 편집기에서 레이아웃을 봅니다.
  2. 텍스트 뷰를 클릭합니다.
  3. Attributes 창에서 textAppearance를 펼치고 클릭하여 fontFamily 상자를 펼칩니다.
  4. 목록 맨 아래로 스크롤한 다음 More Fonts를 클릭하여 Resources 대화상자를 엽니다.
  5. Resources 대화상자에서 목록을 탐색하거나 맨 위의 검색창에 입력하여 글꼴을 선택합니다. Downloadable에 있는 글꼴을 선택하면 Create downloadable font를 클릭하여 런타임에 다운로드 가능한 글꼴로 로드하거나 Add font to project를 클릭하여 TTF 폰트 파일을 APK에 패키징할 수 있습니다. (Android 아래에 나열된 글꼴은 Android 시스템에서 제공되므로 APK에서 다운로드하거나 번들로 제공하지 않아도 됩니다.)
  6. OK를 클릭합니다.