이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Android Kotlin 기초 01.2: 기본 앱 구조

이 Codelab은 Android Kotlin 기초 과정의 일부입니다. Codelab을 순서대로 진행하면 이 과정의 학습 효과를 극대화할 수 있습니다. 모든 과정 Codelab은 Android Kotlin 기본사항 Codelab 방문 페이지에 나열되어 있습니다.

소개

지금까지 모든 것을 설정했으며 Android 스튜디오에서 많은 코드를 생성했습니다. 이 코드를 모두 수정하기 전에 방금 만든 항목과 Android 앱의 소스 파일을 탐색하는 방법을 알아야 합니다.

이 Codelab에서는 Android 앱의 주요 구성요소를 자세히 알아보고 버튼을 사용하여 앱에 간단한 상호작용을 추가합니다.

기본 요건

Android 스튜디오를 설치하고 여는 방법
새 앱 프로젝트를 만드는 방법
에뮬레이터 또는 실제 기기에서 앱을 실행하는 방법

학습할 내용

앱의 레이아웃 파일을 수정하는 방법
대화형 동작이 있는 앱을 만드는 방법
새로운 용어가 많이 있습니다. 어휘 용어집에서 용어와 개념에 대한 쉬운 설명을 확인하세요.

수행할 작업

MainActivity Kotlin 파일과 활동의 레이아웃 파일을 살펴봅니다.
XML에서 활동의 레이아웃을 수정합니다.
활동의 레이아웃에 Button 요소를 추가합니다.
하드코딩된 문자열을 문자열 리소스 파일로 추출합니다.
사용자가 Button을 탭할 때 화면에 메시지를 표시하는 클릭 핸들러 메서드를 구현합니다.

이 Codelab에서는 DiceRoller라는 새 앱 프로젝트를 만들고 버튼으로 기본적인 상호작용을 추가합니다. 버튼을 클릭할 때마다 표시된 텍스트의 값이 변경됩니다. 이 Codelab의 최종 DiceRoller 앱은 다음과 같습니다.

이전 Codelab에서는 java 및 res 디렉터리를 비롯한 앱 프로젝트의 주요 부분에 관해 알아봤습니다. 이 작업에서는 앱을 구성하는 가장 중요한 두 파일인 MainActivity Kotlin 파일과 activity_main.xml 레이아웃 파일에 집중합니다.

1단계: MainActivity 검토

MainActivity은 Activity의 예입니다. Activity은 Android 앱 사용자 인터페이스 (UI)를 그리고 입력 이벤트를 수신하는 핵심 Android 클래스입니다. 앱이 실행되면 AndroidManifest.xml 파일에 지정된 활동이 실행됩니다.

많은 프로그래밍 언어에서 프로그램을 시작하는 main 메서드를 정의합니다. Android 앱에는 main 메서드가 없습니다. 대신 AndroidManifest.xml 파일은 사용자가 앱의 런처 아이콘을 탭할 때 MainActivity이 실행되어야 함을 나타냅니다. 활동을 실행하기 위해 Android OS는 매니페스트의 정보를 사용하여 앱의 환경을 설정하고 MainActivity를 구성합니다. 그러면 MainActivity가 차례로 설정을 진행합니다.

각 활동에는 연결된 레이아웃 파일이 있습니다. 활동과 레이아웃은 레이아웃 확장이라는 프로세스를 통해 연결됩니다. 활동이 시작되면 XML 레이아웃 파일에 정의된 뷰가 메모리에서 Kotlin 뷰 객체로 변환됩니다('팽창'). 이렇게 되면 활동에서 이러한 객체를 화면에 그리고 동적으로 수정할 수 있습니다.

Android 스튜디오에서 File > New > New Project를 선택하여 새 프로젝트를 만듭니다. 빈 활동을 사용하고 Next를 클릭합니다.
프로젝트 이름을 DiceRoller로 지정하고 프로젝트 이름과 프로젝트 위치의 다른 값을 모두 확인합니다. 'AndroidX 아티팩트 사용'이 선택되어 있는지 확인합니다. 마침을 클릭합니다.
Project > Android 창에서 java > com.example.android.diceroller를 펼칩니다. MainActivity를 더블클릭합니다. 코드 편집기에 MainActivity의 코드가 표시됩니다.
패키지 이름과 import 문 아래에 MainActivity의 클래스 선언이 있습니다. MainActivity 클래스는 AppCompatActivity을 확장합니다.

class MainActivity : AppCompatActivity() { ...

onCreate() 메서드를 확인하세요. 활동은 생성자를 사용하여 객체를 초기화하지 않습니다. 대신 활동 설정의 일부로 미리 정의된 메서드('수명 주기 메서드'라고 함)가 호출됩니다. 이러한 수명 주기 메서드 중 하나는 onCreate()이며, 항상 자체 앱에서 재정의합니다. 수명 주기 메서드에 관한 자세한 내용은 이후 Codelab에서 알아봅니다.

onCreate()에서는 활동과 연결된 레이아웃을 지정하고 레이아웃을 확장합니다. setContentView() 메서드는 이 두 가지 작업을 모두 실행합니다.

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

setContentView() 메서드는 실제로 정수 참조인 R.layout.activity_main를 사용하여 레이아웃을 참조합니다. R 클래스는 앱을 빌드할 때 생성됩니다. R 클래스에는 res 디렉터리의 콘텐츠를 비롯한 모든 앱의 애셋이 포함됩니다.

이 경우 R.layout.activity_main은 생성된 R 클래스, layout 폴더, activity_main.xml 레이아웃 파일을 참조합니다. (리소스에는 파일 확장자가 포함되지 않습니다.) R 클래스에서 유사한 참조를 사용하여 앱의 여러 리소스 (이미지, 문자열, 레이아웃 파일 내 요소 포함)를 참조합니다.

2단계: 앱 레이아웃 파일 검사 및 탐색

앱의 모든 활동에는 앱의 res/layout 디렉터리에 연결된 레이아웃 파일이 있습니다. 레이아웃 파일은 활동의 실제 모습을 표현하는 XML 파일입니다. 레이아웃 파일은 뷰를 정의하고 뷰가 화면에 표시되는 위치를 정의하여 이를 실행합니다.

뷰는 View 클래스를 확장하는 텍스트, 이미지, 버튼과 같은 것입니다. TextView, Button, ImageView, CheckBox 등 다양한 유형의 뷰가 있습니다.

이 작업에서는 앱 레이아웃 파일을 검사하고 수정합니다.

Project > Android 창에서 res > layout을 펼치고 activity_main.xml을 더블클릭합니다. 레이아웃 디자인 편집기가 열립니다. Android 스튜디오에는 앱의 레이아웃을 시각적으로 빌드하고 레이아웃 디자인을 미리 볼 수 있는 편집기가 포함되어 있습니다. 디자인 편집기에 관해서는 이후 Codelab에서 자세히 알아봅니다.
레이아웃 파일을 XML로 보려면 창 하단에 있는 Text 탭을 클릭합니다.
레이아웃 편집기에서 기존 XML 코드를 모두 삭제합니다. 새 프로젝트에서 제공되는 기본 레이아웃은 Android 스튜디오 디자인 편집기로 작업하는 경우 좋은 시작점이 됩니다. 이 과정에서는 기본 XML을 사용하여 처음부터 새 레이아웃을 빌드합니다.
이 코드를 복사하여 레이아웃에 붙여넣습니다.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

이제 코드를 검사합니다.

레이아웃의 최상위 또는 루트 요소는 <LinearLayout> 요소입니다. LinearLayout 뷰는 ViewGroup입니다. 뷰 그룹은 다른 뷰를 보유하고 화면에서 뷰의 위치를 지정하는 데 도움이 되는 컨테이너입니다.

레이아웃에 추가하는 모든 뷰와 뷰 그룹은 뷰 계층 구조로 구성되며, 최상위 XML 요소가 계층 구조의 루트가 됩니다. 루트 뷰는 다른 뷰와 뷰 그룹을 포함할 수 있으며 포함된 뷰 그룹은 다른 뷰와 뷰 그룹을 포함할 수 있습니다. 앱이 실행되면 XML 레이아웃 파일의 뷰 계층 구조는 레이아웃이 확장될 때 객체의 계층 구조가 됩니다. 이 경우 루트 뷰 그룹은 선형 레이아웃으로, 하위 뷰를 선형으로 하나씩 (세로 또는 가로) 정리합니다.

새 Android 프로젝트에 제공되는 기본 루트는 ConstraintLayout이며 디자인 편집기와 함께 잘 작동합니다. 이 앱에서는 제약 조건 레이아웃보다 간단한 LinearLayout 뷰 그룹을 사용합니다. 다음 강의에서 뷰 그룹과 제약 조건 레이아웃에 대해 자세히 알아봅니다.
LinearLayout 태그 내에서 android:layout_width 속성을 확인합니다. 이 LinearLayout의 너비는 match parent로 설정되어 상위 요소와 너비가 같습니다. 이 뷰는 루트 뷰이므로 레이아웃이 화면의 전체 너비로 확장됩니다.
wrap_content로 설정된 android:layout_height 속성을 확인합니다. 이 속성은 LinearLayout의 높이를 그 속에 포함된 모든 뷰의 높이 총합과 일치시킵니다. 현재는 TextView만 포함됩니다.
<TextView> 요소를 검사합니다. 텍스트를 표시하는 이 TextView는 DiceRoller 앱의 유일한 시각적 요소입니다. android:text 속성은 표시할 실제 문자열(이 경우 문자열 "Hello World!")을 보유합니다.
<TextView> 요소의 android:layout_width 및 android:layout_height 속성은 모두 wrap_content로 설정되어 있습니다. 텍스트 뷰의 콘텐츠는 텍스트 자체이므로 뷰는 텍스트에 필요한 공간만 차지합니다.

사용자가 주사위를 굴리고 굴린 결과를 볼 수 있는 방법이 없다면 주사위 굴리기 앱은 그다지 유용하지 않습니다. 먼저 레이아웃에 주사위를 굴리는 버튼을 추가하고 사용자가 굴린 주사위 값을 표시하는 텍스트를 추가합니다.

1단계: 레이아웃에 버튼 추가하기

<Button을 입력한 다음 Return 키를 눌러 텍스트 뷰 아래의 레이아웃에 Button 요소를 추가합니다. />로 끝나고 layout_width 및 layout_height 속성이 포함된 Button 블록이 표시됩니다.

<Button
   android:layout_width=""
   android:layout_height="" />

layout_width 및 layout_height 속성을 모두 "wrap_content"로 설정합니다. 이러한 값을 사용하면 버튼의 너비와 높이가 포함된 텍스트 라벨과 동일해집니다.
android:text 속성을 버튼에 추가하고 'Roll' 값을 지정합니다. 이제 버튼 요소는 다음과 같이 표시됩니다.

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

Button 뷰의 경우 text 속성은 버튼의 라벨입니다. 레이아웃 편집기에서 속성은 노란색으로 강조 표시되며 이는 팁이나 경고를 나타냅니다. 이 경우 노란색 강조 표시는 문자열 "Roll"이 버튼 라벨에 하드코딩되어 있지만 문자열은 리소스여야 하기 때문입니다. 문자열 리소스에 관해서는 다음 섹션에서 알아봅니다.

2단계: 문자열 리소스 추출

레이아웃 또는 코드 파일에 문자열을 하드코딩하는 대신 모든 앱 문자열을 별도의 파일에 넣는 것이 좋습니다. 이 파일은 strings.xml라고 하며 앱의 리소스 중 res/values/ 디렉터리에 있습니다.

문자열을 별도의 파일에 저장하면 특히 이러한 문자열을 두 번 이상 사용하는 경우 관리하기가 더 쉬워집니다. 또한 각 언어에 대해 문자열 리소스 파일을 만들어야 하므로 앱을 번역하고 현지화하는 데 문자열 리소스가 필수입니다.

Android 스튜디오는 힌트와 경고를 통해 문자열을 리소스 파일에 넣도록 알려줍니다.

<Button> 태그의 android:text 속성에서 'Roll' 문자열을 한 번 클릭합니다.
Alt+Enter(macOS에서는 Option+Enter)를 누르고 팝업 메뉴에서 Extract string resource(문자열 리소스 추출)를 선택합니다.
리소스 이름에 roll_label를 입력합니다.
확인을 클릭합니다. 문자열 리소스가 res/values/string.xml 파일에 생성되고 버튼 요소의 문자열이 해당 리소스에 대한 참조로 대체됩니다.
android:text="@string/roll_label"
Project > Android 창에서 res > values를 펼친 다음 strings.xml을 더블클릭하여 strings.xml 파일에서 문자열 리소스를 확인합니다.

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

3단계: 뷰 스타일 지정 및 배치

이제 레이아웃에 TextView 뷰 하나와 Button 뷰 하나가 포함됩니다. 이 작업에서는 뷰 그룹 내의 뷰를 정렬하여 더 매력적으로 보이도록 합니다.

디자인 탭을 클릭하여 레이아웃을 미리 봅니다. 현재 두 뷰가 서로 옆에 있고 화면 상단으로 밀려 있습니다.
Text 탭을 클릭하여 XML 편집기로 돌아갑니다. android:orientation 속성을 LinearLayout 태그에 추가하고 그 항목에 "vertical"의 값을 지정합니다. 이제 <LinearLayout> 요소가 다음과 같이 표시됩니다.

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

LinearLayout 뷰 그룹은 포함된 뷰를 한 줄로, 가로로 행에 또는 세로로 스택에 차례로 배치합니다. 기본값은 가로입니다. TextView가 Button 위에 쌓이도록 하려면 방향을 세로로 설정합니다. 이제 디자인은 다음과 같이 텍스트 아래에 버튼이 표시됩니다.

android:layout_gravity 속성을 TextView과 Button에 모두 추가하고 "center_horizontal" 값을 지정합니다. 이렇게 하면 두 뷰가 가로축의 중앙을 따라 정렬됩니다. 이제 TextView 및 Button 요소가 다음과 같이 표시됩니다.

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

android:layout_gravity 속성을 선형 레이아웃에 추가하고 "center_vertical" 값을 지정합니다. 이제 LinearLayout 요소가 다음과 같이 표시됩니다.

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

텍스트 뷰의 텍스트 크기를 늘리려면 android:textSize 속성을 <TextView> 요소에 추가하고 값은 "30sp"로 설정합니다. sp 약어는 확장 가능한 픽셀을 나타내며, 이는 기기의 디스플레이 품질과 관계없이 텍스트 크기를 측정하는 단위입니다. 이제 TextView 요소가 다음과 같이 표시됩니다.

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

앱을 컴파일하고 실행합니다.

이제 텍스트와 버튼이 모두 적절하게 배치되고 텍스트 뷰에 더 큰 텍스트가 표시됩니다. 버튼에 아직 기능이 없으므로 클릭해도 아무 일도 일어나지 않습니다. 다음으로 이 작업을 진행합니다.

4단계: 코드에서 버튼 참조 가져오기

MainActivity의 Kotlin 코드는 버튼을 탭할 때 발생하는 상황과 같은 앱의 대화형 부분을 정의합니다. 버튼을 클릭할 때 실행되는 함수를 작성하려면 MainActivity에서 확장된 레이아웃의 Button 객체에 대한 참조를 가져와야 합니다. 버튼 참조를 가져오려면 다음을 실행하세요.

XML 파일에서 Button에 ID를 할당합니다.
코드에서 findViewById() 메서드를 사용하여 특정 ID가 있는 View의 참조를 가져옵니다.

Button 뷰를 참조하면 앱이 실행될 때 해당 뷰에서 메서드를 호출하여 동적으로 변경할 수 있습니다. 예를 들어 버튼을 탭할 때 코드를 실행하는 클릭 핸들러를 추가할 수 있습니다.

activity_main.xml 레이아웃 파일이 열려 있지 않으면 파일을 열고 Text 탭을 클릭합니다.
버튼에 android:id 속성을 추가하고 이름을 지정합니다 (이 경우 '@+id/roll_button"'). 이제 <Button> 요소는 다음과 같습니다.

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

XML 레이아웃 파일에서 뷰의 ID를 만들면 Android 스튜디오는 생성된 R 클래스에 해당 ID의 이름으로 정수 상수를 만듭니다. 따라서 뷰 이름을 roll_button로 지정하면 Android 스튜디오는 R 클래스에서 roll_button라는 정수 상수를 생성하고 만듭니다. ID 이름의 "@+id" 접두사는 컴파일러에 해당 ID 상수를 R 클래스에 추가하도록 지시합니다. XML 파일의 모든 뷰 ID에는 이 접두사가 있어야 합니다.

MainActivity Kotlin 파일을 엽니다. onCreate() 내에서 setContentView() 뒤에 다음 줄을 추가합니다.

val rollButton: Button = findViewById(R.id.roll_button)

findViewById() 메서드를 사용하여 XML 클래스에서 정의한 뷰의 View 참조를 가져옵니다. 이 경우 R 클래스와 ID roll_button에서 Button 참조를 가져와 rollButton 변수에 할당합니다.

Android 스튜디오에서 Button 클래스를 빨간색으로 강조 표시하고 밑줄을 그어 해결되지 않은 참조임을 나타내며 이 클래스를 사용하려면 먼저 가져와야 함을 나타냅니다. 정규화된 클래스 이름을 나타내는 도움말도 표시될 수 있습니다.
Alt+Enter (Mac의 경우 Option+Enter) 키를 눌러 정규화된 클래스 이름을 수락합니다.

5단계: 클릭 핸들러를 추가하여 토스트 표시

클릭 핸들러는 사용자가 클릭 가능한 UI 요소(예: 버튼)를 클릭하거나 탭할 때마다 호출되는 메서드입니다. 클릭 핸들러를 만들려면 다음이 필요합니다.

일부 작업을 실행하는 메서드입니다.
Button을 핸들러 메서드에 연결하는 setOnClickHandler() 메서드

이 작업에서는 Toast를 표시하는 클릭 핸들러 메서드를 만듭니다. 토스트는 화면에 잠시 표시되는 메시지입니다. 클릭 핸들러 메서드를 Button에 연결합니다.

MainActivity 클래스에서 onCreate() 뒤에 rollDice()라는 비공개 함수를 만듭니다.

private fun rollDice() {
  
}

rollDice()가 호출될 때 Toast을 표시하려면 rollDice() 메서드에 다음 줄을 추가하세요.

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

토스트를 만들려면 Toast.makeText() 메서드를 호출합니다. 이 메서드에는 다음 세 가지가 필요합니다.

Context 객체 Context 객체를 사용하면 Android OS의 현재 상태에 관해 통신하고 정보를 가져올 수 있습니다. 여기에는 Toast 객체가 OS에 토스트를 표시하도록 지시할 수 있도록 Context가 필요합니다. AppCompatActivity은 Context의 서브클래스이므로 컨텍스트에 키워드 this를 사용하면 됩니다.
표시할 메시지입니다(여기서는 "button clicked").
메시지를 표시할 기간입니다. 마지막의 show() 메서드는 토스트를 표시합니다.

onCreate()에서 findViewById() 호출 후 다음 줄을 추가하여 rollDice()를 rollButton 객체의 클릭 핸들러로 할당합니다.

rollButton.setOnClickListener { rollDice() }

이제 MainActivity 클래스의 전체 정의는 다음과 같습니다.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

앱을 컴파일하고 실행합니다. 버튼을 탭할 때마다 토스트가 표시됩니다.

이 작업에서는 rollDice() 메서드를 수정하여 TextView의 텍스트를 변경합니다. 첫 번째 단계에서는 텍스트를 "Hello World!"에서 "Dice Rolled!" 문자열로 변경합니다. 두 번째 단계에서는 1에서 6 사이의 난수를 표시합니다.

1단계: 문자열 표시하기

activity_main.xml를 열고 TextView에 ID를 추가합니다.

android:id="@+id/result_text"

MainActivity를 엽니다. rollDice() 메서드에서 Toast을 표시하는 줄을 주석 처리합니다.
findViewById() 메서드를 사용하여 ID로 TextView의 참조를 가져옵니다. 참조를 resultText 변수에 할당합니다.

val resultText: TextView = findViewById(R.id.result_text)

resultText.text 속성에 새 문자열을 할당하여 표시된 텍스트를 변경합니다. 이 문자열을 리소스로 추출하라는 힌트는 무시해도 됩니다. 이는 임시 문자열일 뿐입니다.

resultText.text = "Dice Rolled!"

앱을 컴파일하고 실행합니다. 이제 Roll 버튼을 탭하면 TextView가 업데이트됩니다.

2단계: 난수 표시하기

마지막으로 이 작업에서는 주사위 굴리기를 시뮬레이션하기 위해 버튼 클릭에 무작위성을 추가합니다. 버튼을 클릭하거나 탭할 때마다 코드는 1~6 사이의 난수를 선택하고 TextView를 업데이트합니다. 난수 생성 작업은 Android에 국한되지 않으며 Random 클래스를 사용하여 실행합니다.

rollDice() 메서드 상단에서 Random.nextInt() 메서드를 사용하여 1~6 사이의 난수를 가져옵니다.

val randomInt = Random().nextInt(6) + 1

text 속성을 무작위 정수 값으로 설정합니다(문자열로).

resultText.text = randomInt.toString()

앱을 컴파일하고 실행합니다. Roll 버튼을 탭할 때마다 텍스트 뷰의 숫자가 변경됩니다.

Android 스튜디오 프로젝트: DiceRoller

도전 과제: Roll 버튼 바로 아래에 표시되는 'Count Up'이라는 두 번째 버튼을 앱에 추가합니다. 탭하면 Count Up 버튼이 결과 텍스트 뷰의 현재 값을 가져와서 1을 더하고 텍스트 뷰를 업데이트해야 합니다. 다음과 같은 특수한 사례를 처리해야 합니다.

결과 텍스트 뷰에 아직 숫자가 포함되어 있지 않은 경우 (즉, 텍스트 뷰에 여전히 기본 'Hello World' 문자열이 있는 경우) 결과 텍스트를 1로 설정합니다.
숫자가 이미 6인 경우 아무 작업도 하지 않습니다.

코딩 챌린지 솔루션 코드

Android 스튜디오 프로젝트: DiceRoller-challenge

활동

MainActivity은 AppCompatActivity의 서브클래스이고 AppCompatActivity은 Activity의 서브클래스입니다. Activity는 Android 앱 UI를 그리고 입력 이벤트를 수신하는 핵심 Android 클래스입니다.
모든 활동에는 연결된 레이아웃 파일이 있습니다. 이 파일은 앱 리소스의 XML 파일입니다. 레이아웃 파일의 이름은 활동의 이름입니다(예: activity_main.xml).
MainActivity의 setContentView() 메서드는 레이아웃을 활동과 연결하고 활동이 생성될 때 레이아웃을 확장합니다.
레이아웃 확장 (inflation)은 XML 레이아웃 파일에 정의된 뷰가 메모리에서 Kotlin 뷰 객체로 변환되는 프로세스입니다. 레이아웃이 확장되면 Activity가 이러한 객체를 화면에 그리고 동적으로 수정할 수 있습니다.

뷰

앱 레이아웃의 모든 UI 요소는 View 클래스의 서브클래스이며 뷰라고 합니다. TextView 및 Button은 뷰의 예입니다.
View 요소는 ViewGroup 내에서 그룹화할 수 있습니다. 뷰 그룹은 뷰 또는 다른 뷰 그룹의 컨테이너 역할을 합니다. LinearLayout은 뷰를 선형으로 정렬하는 뷰 그룹의 예입니다.

속성 보기

android:layout_width 및 android:layout_height 속성은 뷰의 가중치와 높이를 나타냅니다. match_parent 값은 뷰를 상위 요소의 너비나 높이로 늘립니다. wrap_content 값은 뷰의 콘텐츠에 맞게 뷰를 축소합니다.
android:text 속성은 뷰가 표시해야 하는 텍스트를 나타냅니다 (해당 뷰가 텍스트를 표시하는 경우). 버튼의 경우 android:text은 버튼 라벨입니다.
LinearLayout 뷰 그룹의 android:orientation 속성은 포함된 뷰 요소를 정렬합니다. horizontal 값은 뷰를 왼쪽에서 오른쪽으로 정렬합니다. vertical 값은 뷰를 위에서 아래로 정렬합니다.
android:layout_gravity 속성은 뷰와 해당 뷰의 모든 하위 요소의 배치를 결정합니다.
android:textSize 속성은 텍스트 뷰의 텍스트 크기를 정의합니다. 텍스트 크기는 sp 단위 (확장 가능한 픽셀)로 지정됩니다. sp 단위를 사용하면 기기의 디스플레이 품질과 관계없이 텍스트 크기를 조정할 수 있습니다.

문자열

레이아웃에서 문자열을 하드코딩하는 대신 문자열 리소스를 사용하는 것이 좋습니다.
문자열 리소스는 values/res/string.xml 파일에 포함되어 있습니다.
문자열을 추출하려면 Alt+Enter (Mac의 경우 Option+Enter)를 사용합니다. 팝업 메뉴에서 Extract string resources(문자열 리소스 추출)를 선택합니다.

뷰 사용

Kotlin 코드를 레이아웃에 정의된 뷰에 연결하려면 뷰가 확장된 후 뷰 객체에 대한 참조를 가져와야 합니다. 레이아웃에서 뷰에 ID (android:id)를 할당한 다음 findViewById() 메서드를 사용하여 연결된 뷰 객체를 가져옵니다.
XML 레이아웃 파일에서 뷰의 ID를 만들면 Android 스튜디오는 생성된 R 클래스에 해당 ID의 이름으로 정수 상수를 만듭니다. 그런 다음 findViewById() 메서드에서 해당 R.id 참조를 사용할 수 있습니다.
Kotlin 코드에서 속성 이름으로 직접 뷰 객체의 속성을 설정할 수 있습니다. 예를 들어 텍스트 뷰의 텍스트는 XML의 android:text 속성으로 정의되고 Kotlin에서는 text 속성으로 정의됩니다.
클릭 핸들러는 사용자가 UI 요소를 클릭하거나 탭할 때 호출되는 메서드입니다. 클릭 핸들러 메서드를 버튼과 같은 뷰에 연결하려면 setOnClickListener() 메서드를 사용합니다.

토스트 사용

토스트 메시지는 작은 팝업 창에 사용자에게 간단한 메시지를 표시하는 뷰입니다.

토스트를 만들려면 다음 세 가지 인수를 사용하여 Toast 클래스에서 makeText() 팩토리 메서드를 호출합니다.

앱 Activity의 컨텍스트
표시할 메시지입니다(예: 문자열 리소스).
기간(예: Toast.LENGTH_SHORT)

토스트 메시지를 표시하려면 show()을 호출합니다.

Udacity 과정:

Kotlin을 사용하여 Android 앱 개발

Android 개발자 문서:

기타:

어휘 단어 및 개념 용어집

이 섹션에는 강사가 진행하는 과정의 일부로 이 Codelab을 진행하는 학생에게 출제할 수 있는 과제가 나열되어 있습니다. 다음 작업은 강사가 결정합니다.

필요한 경우 과제를 할당합니다.
과제 제출 방법을 학생에게 알립니다.
과제를 채점합니다.

강사는 이러한 추천을 원하는 만큼 사용할 수 있으며 적절하다고 생각되는 다른 과제를 출제해도 됩니다.

이 Codelab을 직접 진행하는 경우 이러한 과제를 자유롭게 사용하여 배운 내용을 테스트해 보세요.

앱 변경하기

DiceRoller 앱을 엽니다. Roll 버튼 바로 아래에 표시되는 'Reset'이라는 라벨이 지정된 버튼을 앱에 추가합니다. 이 버튼을 누르면 결과 텍스트 뷰가 0으로 재설정되도록 합니다.

질문에 답하세요

질문 1

앱의 레이아웃을 확장하고 뷰를 객체로 사용할 수 있게 해주는 Activity의 메서드는 무엇인가요?

onCreate()
setClickListener()
setContentView()
show()

질문 2

콘텐츠에 맞게 조정되도록 뷰의 너비를 설정하는 데 사용하는 뷰 속성은 무엇인가요?

android:view_width="wrap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_width="match_parent"

채점을 위해 앱 제출

앱에 다음이 있는지 확인합니다.

앱 레이아웃에는 텍스트 뷰 하나와 버튼 두 개가 포함되어야 합니다.
앱의 코드는 각 버튼에 대해 클릭 핸들러를 두 개 설정해야 합니다.
텍스트 뷰를 재설정하는 클릭 핸들러는 텍스트 속성을 0으로 설정해야 합니다.

다음 강의 시작: 1.3 이미지 리소스 및 호환성

이 과정의 다른 Codelab 링크는 Android Kotlin 기초 Codelab 방문 페이지를 참고하세요.