Skip to content

Most visited

Recently visited

navigation

간단한 사용자 인터페이스 구축

이 과정에서는 Android Studio Layout Editor를 사용하여 텍스트 상자와 버튼이 포함된 레이아웃을 만듭니다. 그 다음 과정에서는 텍스트 상자의 콘텐츠를 다른 activity로 전송하여 버튼 누름에 앱이 반응하도록 만듭니다.

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

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

그림 2. ViewGroup 객체가 어떻게 레이아웃 안에서 분기를 형성하고 View 객체를 포함하는지 보여줍니다.

Android는 ViewGroupView 클래스에 대한 XML 용어를 제공하므로, 여러분의 UI 대부분이 XML 파일에 정의됩니다. 그러나 이 과정에서는 XML 작성 방법을 가르치는 대신, Android Studio의 Layout Editor를 사용하여 레이아웃을 만드는 방법을 보여줍니다. 이렇게 하면 뷰를 드래그 앤 드롭하여 쉽게 레이아웃을 빌드할 수 있습니다.

Layout Editor 열기

참고: 이 과정에서는 여러분이 Android Studio 3.0을 사용 중이고 이전 과정에 따라 Android 프로젝트를 생성했다고 예상합니다.

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

  1. Android Studio의 Project 창에서 app > res > layout > activity_main.xml을 엽니다.
  2. Layout Editor에 더 많은 공간을 만들려면, View > Tool Windows > Project를 선택하여 Project 창을 숨깁니다(또는 Android Studio 왼쪽에서 Project 클릭합니다).
  3. 편집기에 XML 소스가 표시되면 창 하단에서 Design 탭을 클릭합니다.
  4. Select Design Surface를 클릭하고 Blueprint를 선택합니다.
  5. 툴바에서 Show를 클릭하고 Show Constraints가 선택되었는지 확인합니다.
  6. Autoconnect가 꺼져있는지 확인하세요. 툴바의 도움말에 Turn On Autoconnect가 나타나야 합니다 (현재 비활성화된 상태이므로).
  7. 툴바에서 Default Margins를 클릭하고 16을 선택합니다(각 뷰의 여백은 나중에 조정할 수 있습니다).
  8. 툴바에서 Device in Editor를 클릭하고 Pixel XL을 선택합니다.

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

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

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

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

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

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

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

텍스트 상자 추가

그림 5. 텍스트 상자는 부모 레이아웃의 왼쪽 상단으로 제한됩니다.

  1. 먼저, 레이아웃에 이미 있는 것들을 제거해야 합니다. 이렇게 하려면 Component Tree 창에서 TextView를 클릭한 다음 Delete를 누릅니다.
  2. 왼쪽의 Palette 창에서 왼쪽 창의 Text를 클릭한 다음, Plain Text를 디자인 편집기로 드래그하여 레이아웃 상단 부근에 놓습니다. 이것은 일반 텍스트 입력을 허용하는 EditText 위젯입니다.
  3. 디자인 편집기에서 뷰를 클릭합니다. 이제 각 모서리에 크기 변경 핸들(사각형)이 나타나고 각 측면에 제약 조건 앵커(원)가 나타납니다.

    더 나은 제어를 위해서는 편집기에서 툴바의 버튼을 사용하여 확대하는 것이 좋습니다.

  4. 상단쪽의 앵커를 클릭하고 누른 채 레이아웃 상단에 스냅될 때까지 위로 드래그한 다음 누름을 해제합니다. 이것이 바로 제약 조건입니다. 제약 조건은 레이아웃 상단으로부터 16dp에 뷰가 있어야 함을 지정합니다(기본 여백이 16dp로 설정되었기 때문입니다).
  5. 마찬가지로, 뷰 왼쪽에서 레이아웃 왼쪽으로 제약 조건을 만듭니다.

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

버튼 추가

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

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

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

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

UI 문자열 변경

UI를 미리 보려면 툴바에서 Select Design Surface를 클릭하고 Design을 선택합니다. 참고로, 텍스트 입력이 "Name"으로 미리 채워지고 버튼에는 "Button"이라는 레이블이 붙습니다. 그럼 이제 이 문자열을 변경해 보겠습니다.

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

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

  2. 편집기 창 상단에서 Open editor를 클릭합니다. 그러면 Translations Editor가 열립니다. 이 편집기는 기본 문자열을 추가하고 편집하기 위한 간단한 인터페이스이며, 번역된 모든 문자열을 체계적으로 구성할 수 있습니다.
  3. 그림 7. 새 문자열을 추가할 수 있는 대화상자

    Add Key를 클릭하여 텍스트 상자에 "힌트 텍스트"로 새 문자열을 만듭니다.
    1. 키 이름에 "edit_message"를 입력합니다.
    2. 값에 "Enter a message"를 입력합니다.
    3. OK를 클릭합니다.
  4. "Send"라는 값을 가진 "button_send"라는 또 다른 키를 추가합니다.

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

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

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

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

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

그림 8. Center Horizontally를 클릭한 결과

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

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

  1. 두 뷰를 선택한 다음(뷰 하나를 클릭한 다음 Shift를 누른 채 다른 뷰를 클릭), 두 뷰 중 하나를 마우스 오른쪽 버튼으로 클릭하고 Chain > Create Horizontal Chain을 선택합니다.

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

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

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

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

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

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

앱 실행

이전 과정에서 앱을 기기에 이미 설치한 경우, 툴바에서 Apply Changes 클릭하여 앱을 새 레이아웃으로 업데이트하면 됩니다. 또는 Run을 클릭하여 앱을 설치하고 실행합니다.

아직 버튼은 아무 동작도 수행하지 않습니다. 버튼이 눌릴 때 또 다른 activity를 시작하려면 다음 과정으로 계속 진행하세요.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)