간단한 사용자 인터페이스 빌드

이 과정에서는 Android 스튜디오 Layout Editor를 사용하여 텍스트 상자와 버튼이 포함된 레이아웃을 만듭니다. 그다음 과정에서는 텍스트 상자의 콘텐츠를 다른 활동으로 전송하여 앱이 버튼 탭에 반응하게 합니다.

그림 1. 최종 레이아웃의 스크린샷

Android 앱용 사용자 인터페이스는 레이아웃(ViewGroup 객체) 및 위젯(View 객체) 계층을 사용하여 빌드됩니다. 레이아웃은 하위 뷰가 화면에 배치되는 방식을 제어하는 컨테이너입니다. 위젯은 버튼과 텍스트 상자 등의 UI 구성 요소입니다.

그림 2. ViewGroup 객체가 레이아웃에서 분기를 형성하고 View 객체를 포함하는 방식을 보여주는 삽화

Android는 ViewGroupView 클래스에 대한 XML 용어를 제공하므로 대부분의 UI가 XML 파일에 정의됩니다. 하지만 이 과정에서는 XML 작성에 대해 설명하지 않고 Android 스튜디오 Layout Editor를 사용하여 레이아웃을 만드는 방법을 보여줍니다. 이렇게 하면 뷰를 드래그 앤 드롭하여 쉽게 레이아웃을 빌드할 수 있습니다.

이 과정에서는 여러분이 Android 스튜디오 3.0 이상을 사용하고 있으며 이전 과정에서 Android 프로젝트를 만들었다고 가정합니다.

Layout Editor 열기

시작하려면 다음과 같이 작업공간을 설정합니다.

  1. Android 스튜디오의 프로젝트 창에서 app > res > layout > activity_main.xml을 엽니다.
  2. Layout Editor에 더 많은 공간을 만들려면 View > Toll Windows > Project를 선택(또는 Android 스튜디오 왼쪽의 프로젝트()를 클릭)하여 Project 창을 숨깁니다.
  3. 편집기에 XML 소스가 표시되면 창 하단에서 Desing 탭을 클릭합니다.
  4. Select Design Surface 를 클릭하고 Blueprint를 선택합니다.
  5. Layout Editor 툴바에서 Show 를 클릭하여 Show Constraints가 선택되도록 합니다.
  6. Autoconnect가 꺼져 있는지 확인합니다. 툴바의 도움말에 Turn On Autoconnect 로 표시되어 있어야 합니다(이 기능이 현재 꺼져 있는 상태이기 때문).
  7. 툴바에서 Default Margins 를 클릭하고 16을 선택합니다(나중에 계속 각 뷰의 여백을 조정할 수 있음).
  8. 툴바에서 Device for Preview 를 클릭하고 5.5, 1440 × 2560, 560dpi(Pixel XL)을 선택합니다.

이제 편집기가 그림 3과 같이 나타나야 합니다.

그림 3. activity_main.xml을 보여주는 Layout Editor

자세한 정보는 Layout Editor 소개를 참조하세요.

왼쪽 하단 Component Tree 창은 레이아웃의 뷰 계층을 나타냅니다. 이 경우 루트 뷰는 ConstraintLayout이며, TextView 객체 하나만 포함되어 있습니다.

ConstraintLayout은 동위 뷰와 상위 레이아웃에 대한 제약 조건에 따라 각 뷰의 위치를 정의하는 레이아웃입니다. 이러한 방식으로 플랫 뷰 계층 구조를 사용하여 간단한 레이아웃과 복잡한 레이아웃을 모두 만들 수 있습니다. 즉, 중첩된 레이아웃(그림 2에 나오는 레이아웃 내부의 레이아웃)을 만들 필요가 없으므로, UI 그리기에 필요한 시간을 줄일 수 있습니다.

그림 4. ConstraintLayout 내부에 배치된 두 뷰에 대한 삽화

예를 들어, 다음과 같은 레이아웃을 선언할 수 있습니다(그림 4).

  • 뷰 A는 부모 레이아웃 상단으로부터 16dp 위치에 나타납니다.
  • 뷰 A는 부모 레이아웃 왼쪽으로부터 16dp 위치에 나타납니다.
  • 뷰 B는 뷰 A 오른쪽 16dp 위치에 나타납니다.
  • 뷰 B는 뷰 A 상단에 맞춰집니다.

다음 섹션에서는 이와 유사한 레이아웃을 빌드합니다.

텍스트 상자 추가

그림 5. 텍스트 상자는 상위 레이아웃의 왼쪽 상단으로 제한됨

  1. 먼저, 레이아웃에 이미 있는 항목을 제거해야 합니다. 이렇게 하려면 Component Tree 창에서 TextView를 클릭한 후 삭제를 누릅니다.
  2. Palette에서 Text를 클릭하여 사용 가능한 텍스트 컨트롤을 표시합니다.
  3. Plain Text를 디자인 편집기로 드래그하여 레이아웃 상단 가까이에 드롭합니다. 일반 텍스트 입력이 허용되는 EditText 위젯입니다.
  4. 디자인 편집기에서 뷰를 클릭합니다. 이제 각 모서리에 크기 조절 핸들(사각형)이 나타나고 각 측면에 제약 조건 앵커(원)가 나타납니다.

    더 효율적인 제어를 위해 레이아웃 편집기 툴바의 버튼을 사용하여 편집기를 확대할 수 있습니다.

  5. 상단의 앵커를 길게 클릭한 후 위로 드래그하여 앵커가 레이아웃 상단에 맞춰지도록 한 후 해제합니다. 여기에 제약 조건이 있습니다. 즉, 뷰가 레이아웃 상단으로부터 16dp 떨어져 있도록 지정되어 있습니다. 기본 여백을 16dp로 설정했기 때문입니다.
  6. 마찬가지로, 뷰 왼쪽에서 레이아웃 왼쪽으로 제약 조건을 만듭니다.

그 결과는 그림 5의 스크린샷과 같아야 합니다.

버튼 추가

그림 6. 버튼은 텍스트 상자 오른쪽과 해당 기준선에 제한됨

  1. Palette에서 Buttons를 클릭합니다.
  2. Button을 디자인 편집기로 드래그하여 오른쪽 부근에 드롭합니다.
  3. 버튼 왼쪽에서 텍스트 상자 오른쪽으로 제약 조건을 만듭니다.
  4. 가로 정렬에서 뷰를 제한하려면 텍스트 기준선 사이에 제약 조건을 만들어야 합니다. 이렇게 하려면 버튼을 클릭한 후 Edit Baseline 을 클릭합니다. 이 항목은 디자인 편집기의 선택한 뷰 바로 아래에 나타납니다. 기준선 앵커는 버튼 내에 나타납니다. 이 앵커를 길게 클릭한 후 텍스트 상자에 나타나는 기준선 앵커쪽으로 드래그합니다.

그 결과는 그림 6의 스크린샷과 같아야 합니다.

참고: 상단 또는 하단 가장자리를 사용하여 가로 정렬을 만들 수도 있지만, 버튼은 해당 이미지 주위에 패딩이 포함되므로 상단 또는 하단 가장자리를 사용하는 방식으로 뷰를 정렬하면 시각적 정렬이 잘못됩니다.

UI 문자열 변경

UI를 미리 보려면 툴바에서 Select Design Surface 을 클릭하고 Design을 선택합니다. 텍스트 입력은 'Name'으로 미리 채워져 있고 버튼에는 'Button' 레이블이 지정되어 있습니다. 이제는 이러한 문자열을 변경하겠습니다.

  1. Project 창을 열고 app > res > values > strings.xml을 엽니다.

    이 파일은 모든 UI 문자열을 지정해야 하는 문자열 리소스 파일입니다. 이렇게 문자열을 지정하면 단일 위치에서 모든 UI 문자열을 관리할 수 있으므로, 레이아웃이나 앱 코드의 하드 코딩 문자열에 비해 찾기, 업데이트 및 현지화를 더욱 쉽게 수행할 수 있습니다.

  2. 편집기 창 상단에서 Open editor를 클릭합니다. 그러면 번역 편집기가 열립니다. 이 편집기는 기본 문자열을 추가하고 편집하기 위한 간단한 인터페이스를 제공하며, 번역된 모든 문자열을 체계적으로 구성하도록 지원합니다.
  3. Add Key 를 클릭하여 텍스트 상자에 새 문자열 '힌트 텍스트'를 만듭니다.

    그림 7. 새 문자열을 추가할 수 있는 대화상자

    1. Add Key 대화상자에서 키 이름에 'edit_message'를 입력합니다.
    2. 값에 'Enter a message'를 입력합니다.
    3. OK를 클릭합니다.
  4. 이름이 'button_send'이고 값이 'Send'인 다른 키를 추가합니다.

이제 각 뷰에 이들 문자열을 설정할 수 있습니다. 탭 모음에서 activity_main.xml을 클릭하여 레이아웃 파일로 돌아간 후 다음과 같이 문자열을 추가합니다.

  1. 레이아웃에서 텍스트 상자를 클릭하고, Attributes 창이 아직 오른쪽에 표시되지 않은 경우 오른쪽 사이드바에서 Attributes 를 클릭합니다.
  2. text 속성(현재는 'Name'으로 설정됨)을 찾아 값을 삭제합니다.
  3. hint 속성을 찾은 후 텍스트 상자 오른쪽에 있는 Pick a Resource()를 클릭합니다. 나타나는 대화상자의 목록에서 edit_message를 더블클릭합니다.
  4. 이제 레이아웃에서 버튼을 클릭하고, text 속성(현재는 'Button'으로 설정됨)을 찾고, Pick a Resource 을 클릭하고, button_send를 선택합니다.

유연한 크기의 텍스트 상자 만들기

다양한 화면 크기에 반응하는 레이아웃을 만들기 위해, 이제 버튼과 여백을 고려한 후 남은 모든 가로 공간을 채우도록 텍스트 상자를 확장해 보겠습니다.

계속하기 전에 툴바에서 Show 를 클릭하고 Blueprint를 선택합니다.

그림 8. Create Horizontal Chain 선택 결과

그림 9. 클릭하여 너비를 Match Constraints로 변경

그림 10. 이제 텍스트 상자가 확장되어 남은 공간을 채웁니다.

  1. 두 뷰를 선택하고(뷰 하나를 클릭한 후 Shift를 누른 채 다른 뷰를 클릭), 두 뷰 중 하나를 마우스 오른쪽 버튼으로 클릭한 후, Chain > Create Horizontal Chain을 선택합니다. 그림 8과 같이 레이아웃이 나타나야 합니다.

    체인은 둘 이상의 뷰 간에 존재하는 양방향 제약 조건입니다. 체인을 사용하면 체인으로 연결된 뷰를 일관성 있게 레이아웃할 수 있습니다.

  2. 버튼을 선택하고 Attributes 창을 엽니다. Attributes 창 상단의 뷰 검사기를 사용하여 오른쪽 여백을 16으로 설정합니다.
  3. 이제 텍스트 상자를 클릭하여 속성을 봅니다. 너비 표시기를 두 번 클릭하면 그림 9의 콜아웃 1에 표시된 것처럼 Match Constraints로 설정됩니다.

    'Match constraints'는 가로 제약 조건과 여백의 정의에 맞게 너비가 확장되는 것을 의미합니다. 따라서 버튼과 모든 여백을 고려한 후 남은 가로 공간을 채우기 위해 텍스트 상자가 확장됩니다.

이제 레이아웃이 완료되고 그림 10과 같이 나타나야 합니다.

레이아웃이 예상과 다르게 보이는 경우에는 아래를 클릭하여 XML이 어떻게 보이는지 확인하고 Text 탭에서 보이는 것과 비교해 보세요 (속성이 다른 순서로 나타나도 괜찮습니다).

체인과 ConstraintLayout으로 작업할 수 있는 기타 모든 작업에 관한 자세한 정보는 ConstraintLayout으로 반응형 UI 빌드를 참조하세요.

앱 실행

이전 과정을 통해 앱이 이미 기기에 설치되어 있는 경우 툴바에서 Apply Changes 를 클릭하여 앱을 새 레이아웃으로 업데이트하면 됩니다. 앱이 설치되어 있지 않은 경우 Run 을 클릭하여 앱을 설치하고 실행합니다.

아직 버튼은 아무 동작도 수행하지 않습니다. 버튼을 탭하여 다른 활동을 시작하려면 다음 과정을 계속합니다.