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

이 과정에서는 Android 스튜디오 Layout Editor를 사용하여 텍스트 상자와 버튼이 포함된 레이아웃을 만드는 방법을 알아봅니다. 이는 다음 과정을 위한 준비 단계로, 다음 과정에서는 버튼을 탭했을 때 앱에서 텍스트 상자의 콘텐츠를 다른 활동으로 전송하는 방법을 알아봅니다.

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

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

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

Android는 ViewGroup 및 View 클래스를 위한 XML 용어를 제공하므로, UI 대부분이 XML 파일에 정의됩니다. 하지만, 이 과정에서는 XML 작성 방법을 설명하는 대신 Android 스튜디오의 Layout Editor를 사용하여 레이아웃을 만드는 방법을 보여줍니다. Layout Editor는 개발자가 뷰를 드래그 앤 드롭하여 레이아웃을 만들 때 XML을 작성합니다.

이 과정에서는 Android 스튜디오 v3.0 이상을 사용 중이며 Android 프로젝트 만들기 과정을 완료했다고 가정합니다.

Layout Editor 열기

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

1. 프로젝트 창에서 app > res > layout > activity_main.xml을 엽니다.
2. Layout Editor를 위한 공간을 확보하려면 Project 창을 숨깁니다. 이렇게 하려면, View > Tool Windows > Project를 선택하거나 간단히 Android 스튜디오 화면 왼쪽에 있는 Project를 클릭합니다.
3. 편집기에 XML 소스가 표시되면 창 오른쪽 상단에 있는 Design 탭을 클릭합니다.
4. (Select Design Surface)를 클릭하고 Blueprint를 선택합니다.
5. Layout Editor 툴바에서 (View Options)를 클릭하고 Show All Constraints가 선택되어 있는지 확인합니다.
6. 자동 연결이 사용 중지되어 있는지 확인합니다. 자동 연결이 사용 중지되어 있으면 툴바의 도움말에 (Enable Autoconnection to Parent)가 표시됩니다.
7. 툴바에서 (Default Margins)를 클릭하고 16을 선택합니다. 필요한 경우, 나중에 각 뷰의 여백을 조정할 수 있습니다.
8. 툴바에서 (Device for Preview)를 클릭하고 5.5, 1440 × 2560, 560 dpi (Pixel XL)을 선택합니다.

이제 그림 3과 같이 Layout Editor가 표시됩니다.

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

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

왼쪽 아래의 Component Tree 패널은 레이아웃의 뷰 계층 구조를 보여줍니다. 이 경우 루트 뷰는 ConstraintLayout이며 이 뷰는 하나의 TextView 객체만 포함합니다.

ConstraintLayout은 동위 뷰와 상위 요소 레이아웃의 제약 조건에 따라 각 뷰의 위치를 정의하는 레이아웃입니다. 이러한 방식으로, 플랫 뷰 계층 구조를 사용하여 간단한 레이아웃과 복잡한 레이아웃을 모두 만들 수 있습니다. 이 레이아웃 유형은 중첩된 레이아웃이 필요하지 않습니다. 그림 2에서 보는 바와 같이 레이아웃 내의 레이아웃, 즉 중첩된 레이아웃은 UI를 그리는 데 걸리는 시간이 늘어날 수 있습니다.

그림 4. ConstraintLayout 내부에 배치된 두 개의 뷰 그림

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

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

다음 섹션에서는 그림 4의 레이아웃과 유사한 레이아웃을 만듭니다.

텍스트 상자 추가

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

텍스트 상자를 추가하려면 다음 단계를 따르세요.

1. 먼저, 레이아웃에 이미 있는 항목을 제거해야 합니다. Component Tree 패널에서 TextView를 클릭한 다음 Delete 키를 누릅니다.
2. Palette 패널에서 Text를 클릭하여 사용 가능한 텍스트 컨트롤을 표시합니다.
3. Plain Text를 디자인 편집기로 드래그하여 레이아웃 상단에 드롭합니다. 이것은 일반 텍스트 입력을 허용하는 EditText 위젯입니다.
4. 디자인 편집기에서 뷰를 클릭합니다. 이제 각 모서리의 뷰 크기를 조절하는 정사각형 핸들과 각 면의 원형 제약조건 앵커를 볼 수 있습니다. 더 효율적인 제어를 위해 편집기에서 확대하는 것이 좋습니다. 편집기에서 확대하려면, Layout Editor 툴바의 Zoom 버튼을 사용합니다.
5. 상단의 앵커를 길게 클릭하여 레이아웃의 맨 위에 맞출 때까지 위로 드래그한 다음 놓습니다. 여기에는 설정된 기본 여백 내에서 뷰를 제한한다는 제약 조건이 있습니다. 이 경우 제약 조건을 레이아웃 상단으로부터 16 dp로 설정합니다.
6. 동일한 과정을 사용하여 뷰 왼쪽의 제약 조건을 레이아웃 왼쪽에 만듭니다.

결과는 그림 5와 같이 표시됩니다.

버튼 추가

그림 6. 버튼은 텍스트 상자의 오른쪽과 기준선으로 제한됨

1. Palette 패널에서 Buttons를 클릭합니다.
2. 버튼 위젯을 디자인 편집기로 드래그하여 오른쪽 부근에 드롭합니다.
3. 버튼 왼쪽에서 텍스트 상자의 오른쪽으로 제약 조건을 만듭니다.
4. 가로 정렬에서 뷰를 제한하려면 텍스트 기준선 사이에 제약 조건을 만듭니다. 제약 조건을 만들려면, 버튼을 마우스 오른쪽 버튼으로 클릭한 다음 Show Baseline 을 선택합니다. 기준 앵커가 버튼 안에 표시됩니다. 이 앵커를 길게 클릭한 다음 인접한 텍스트 상자에 표시되는 기준 앵커로 드래그합니다.

결과는 그림 6과 같이 표시됩니다.

참고: 상단 또는 하단 모서리를 사용하여 가로 정렬을 만들 수도 있습니다. 그러나, 버튼 이미지에는 버튼 주변의 패딩이 포함되어 있으므로 이런 방식으로 만든 버튼을 시각적으로 정렬하는 것은 잘못된 것입니다.

UI 문자열 변경

UI를 미리 보려면 툴바에서 (Select Design Surface)를 클릭하고 Design을 선택합니다. 텍스트 입력 및 버튼 라벨은 기본값으로 설정되어 있습니다.

UI 문자열을 변경하려면 다음 단계를 따르세요.

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

   이 파일은 모든 UI 문자열을 지정할 수 있는 문자열 리소스 파일입니다. 이 파일을 사용하면 모든 UI 문자열을 한곳에서 관리할 수 있으므로 문자열을 쉽게 찾고 업데이트하고 현지화할 수 있습니다.

2. 창 상단에서 Open editor를 클릭합니다. 그러면 Translations Editor가 열리며 기본 문자열을 추가하고 수정할 수 있는 간단한 인터페이스가 제공됩니다. 이는 번역된 모든 문자열을 정리하는 데도 도움이 됩니다.

3. (Add Key)를 클릭하여 새로운 문자열을 텍스트 상자의 '힌트 텍스트'로 만듭니다. 이때, 그림 7에 표시된 창이 열립니다.

   

   그림 7. 새 문자열을 추가하는 대화상자

   Add Key 대화상자에서 다음 단계를 완료합니다.

   1. Key 입력란에 'edit_message'를 입력합니다.
   2. Default Value 입력란에 'Enter a message'를 입력합니다.
   3. OK를 클릭합니다.
4. 이름이 'button_send'이고 값이 'Send'인 다른 키를 추가합니다.

이제 각 뷰에 이러한 문자열을 설정할 수 있습니다. 레이아웃 파일로 돌아가려면, 탭바에서 activity_main.xml을 클릭합니다. 그런 다음, 다음과 같이 문자열을 추가합니다.

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

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

다양한 화면 크기에 반응하는 레이아웃을 만들려면 버튼과 여백을 고려한 후 텍스트 상자를 늘려 남은 가로 공간을 채워야 합니다.

계속하기 전에 툴바에서 (Select Design Surface)를 클릭하고 Blueprint를 선택합니다.

텍스트 상자를 유연하게 만들려면 다음 단계를 따르세요.

그림 8. Create Horizontal Chain을 선택한 결과

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

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

1. 두 뷰를 모두 선택합니다. 이렇게 하려면, 한 뷰를 클릭하고 Shift를 누른 채로 나머지 뷰를 클릭한 다음, 둘 중 한 뷰를 마우스 오른쪽 버튼으로 클릭하고 Chains > Create Horizontal Chain을 선택합니다. 그러면 그림 8과 같이 레이아웃이 표시됩니다.

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

2. 버튼을 선택하고 Attributes 창을 엽니다. 그런 다음, Constraint Widget을 사용하여 오른쪽 여백을 16dp로 설정합니다.

3. 속성을 보려면 텍스트 상자를 클릭합니다. 그런 다음, 너비 표시기를 두 번 클릭하면 그림 9의 설명선 1에 표시된 것처럼 삐죽삐죽한 선(Match Constraints)이 설정됩니다.

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

이제 그림 10과 같이 레이아웃이 완료됩니다.

레이아웃이 예상했던 대로 표시되지 않으면 아래의 See the final layout XML을 클릭하여 XML이 어떻게 보이는지 확인하세요. Code 탭에 표시되는 내용과 비교합니다. 속성이 다른 순서로 나타나도 괜찮습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myfirstapp.MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:hint="@string/edit_message"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:text="@string/button_send"
        app:layout_constraintBaseline_toBaselineOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

앱 실행

이전 과정을 통해 앱이 이미 기기에 설치되어 있다면, 툴바에서 간단히 (Apply Changes)를 클릭하여 앱을 새 레이아웃으로 업데이트합니다. 또는 Run 'app'을 클릭하여 앱을 설치하고 실행합니다.

아직 버튼은 아무 동작도 하지 않습니다. 버튼을 탭할 때 시작되는 다른 활동을 빌드하려면 다음 과정으로 진행하세요.