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

Android Kotlin 기초 03.1: 프래그먼트 만들기

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

이 Codelab에서는 프래그먼트에 대해 알아보고 AndroidTrivia라는 스타터 앱 내에 프래그먼트를 만듭니다. 다음 Codelab에서는 탐색에 관해 자세히 알아보고 AndroidTrivia 앱을 추가로 작업합니다.

기본 요건

Kotlin 기본사항
Kotlin으로 기본 Android 앱을 만드는 방법
레이아웃 작업 방법

학습할 내용

앱에 프래그먼트를 정적으로 추가하는 방법

실습할 내용

활동 내에 프래그먼트를 만듭니다.

이 강의를 구성하는 세 개의 Codelab에서는 AndroidTrivia라는 앱을 사용합니다. 완성된 앱은 사용자가 Android 코딩에 관한 상식 문제 3개에 답하는 게임입니다. 사용자가 세 가지 질문에 모두 올바르게 답하면 게임에서 승리하고 결과를 공유할 수 있습니다.

AndroidTrivia 앱은 탐색 패턴과 컨트롤을 보여줍니다. 앱에는 다음과 같은 여러 구성요소가 있습니다.

위 스크린샷의 왼쪽에 표시된 타이틀 화면에서 사용자가 게임을 시작합니다.
위쪽 중앙에 표시된 질문이 있는 게임 화면에서 사용자는 게임을 플레이하고 답변을 제출합니다.
오른쪽 위에 표시된 탐색 메뉴는 앱 측면에서 슬라이드되어 나오고 헤더가 있는 메뉴를 포함합니다. 창 아이콘 을 클릭하면 탐색 창이 열립니다. 탐색 메뉴에는 '정보' 페이지 링크와 게임 규칙 링크가 포함되어 있습니다.

앱 상단에는 앱 바(작업 모음이라고도 함)라는 색상이 지정된 뷰가 표시됩니다.

이 Codelab에서는 퀴즈 앱을 완성할 때 필요한 템플릿 코드와 프래그먼트 클래스를 제공하는 시작 앱을 사용합니다.

AndroidTrivia-Starter Android 스튜디오 프로젝트를 다운로드합니다.
Android 스튜디오에서 프로젝트를 열고 앱을 실행합니다. 앱이 열리면 앱 이름과 빈 화면만 표시됩니다.
Android 스튜디오 프로젝트 창에서 프로젝트: Android 뷰를 열어 프로젝트 파일을 탐색합니다. app > java 폴더를 열어 MainActivity 클래스와 프래그먼트 클래스를 확인합니다.
res > layout 폴더를 열고 activity_main.xml을 더블클릭합니다. 레이아웃 편집기에 activity_main.xml 파일이 표시됩니다.
디자인 탭을 클릭합니다. activity_main.xml 파일의 Component Tree는 루트 레이아웃을 세로 LinearLayout로 표시합니다.

세로 선형 레이아웃에서 레이아웃의 모든 하위 뷰는 세로로 정렬됩니다.

프래그먼트는 활동에서 동작 또는 사용자 인터페이스 (UI)의 일부를 나타냅니다. 여러 프래그먼트를 하나의 활동에 결합하여 다중 창 UI를 만들고 프래그먼트를 여러 활동에 재사용할 수 있습니다.

프래그먼트는 활동의 모듈식 섹션이라고 생각하면 됩니다. 예를 들어 다른 활동에도 사용할 수 있는 '하위 활동'과 같은 것입니다.

프래그먼트는 자체 수명 주기가 있으며 자체 입력 이벤트를 수신합니다.
활동이 실행 중일 때 프래그먼트를 추가 또는 삭제할 수 있습니다.
프래그먼트는 Kotlin 클래스에서 정의됩니다.
프래그먼트의 UI는 XML 레이아웃 파일에서 정의됩니다.

AndroidTrivia 앱에는 기본 활동과 여러 프래그먼트가 있습니다. 대부분의 프래그먼트와 레이아웃 파일은 이미 정의되어 있습니다. 이 작업에서는 프래그먼트를 만들고 앱의 기본 활동에 프래그먼트를 추가합니다.

1단계: 프래그먼트 클래스 추가

이 단계에서는 빈 TitleFragment 클래스를 만듭니다. 먼저 새 프래그먼트의 Kotlin 클래스를 만듭니다.

Android 스튜디오에서 프로젝트 창 내부를 아무 곳이나 클릭하여 포커스를 프로젝트 파일로 다시 가져옵니다. 예를 들어 com.example.android.navigation 폴더를 클릭합니다.
File > New > Fragment > Fragment (Blank)를 선택합니다.
프래그먼트 이름에는 TitleFragment를 사용합니다. 레이아웃 XML 생성, 프래그먼트 팩토리 메서드 포함, 인터페이스 콜백 포함 등 모든 체크박스를 선택 해제합니다.
마침을 클릭합니다.
TitleFragment.kt 프래그먼트 파일을 엽니다(아직 열려 있지 않은 경우). 여기에는 프래그먼트의 수명 주기 중에 호출되는 메서드 중 하나인 onCreateView() 메서드가 포함되어 있습니다.
onCreateView()에서 setText로 시작하는 줄을 포함한 return TextView(activity).apply 섹션을 삭제합니다. onCreateView() 함수에는 다음 코드만 남습니다.

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

바인딩 객체 만들기

이제 이 프래그먼트는 컴파일되지 않습니다. 프래그먼트를 컴파일하려면 바인딩 객체를 만들고 프래그먼트의 뷰를 확장해야 합니다 (활동에 setContentView()를 사용하는 것과 동일).

TitleFragment.kt의 onCreateView() 메서드에서 binding 변수 (val binding)를 만듭니다.
프래그먼트의 뷰를 확장하려면 프래그먼트의 Binding 객체(FragmentTitleBinding)에서 DataBindingUtil.inflate() 메서드를 호출합니다.

메서드에 네 개의 매개변수를 전달합니다.

inflater: 바인딩 레이아웃을 확장하는 데 사용되는 LayoutInflater입니다.
확장할 레이아웃의 XML 레이아웃 리소스입니다. 이미 정의된 레이아웃 중 하나인 R.layout.fragment_title를 사용합니다.
상위 ViewGroup의 container (이 매개변수는 선택사항입니다.)
attachToParent 값으로 false을 사용합니다.

DataBindingUtil.inflate가 반환하는 바인딩을 binding 변수에 할당합니다.
확장된 뷰가 포함된 메서드에서 binding.root를 반환합니다. 이제 onCreateView() 메서드가 다음 코드와 같이 표시됩니다.

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

2단계: 새 프래그먼트를 기본 레이아웃 파일에 추가

이 단계에서는 TitleFragment를 앱의 activity_main.xml 레이아웃 파일에 추가합니다.

res > layout > activity_main.xml을 열고 Text 탭을 클릭하여 레이아웃 XML 코드를 확인합니다.
기존 LinearLayout 요소 내에 fragment 요소를 추가합니다.
프래그먼트의 ID를 titleFragment로 설정합니다.
프래그먼트의 이름을 프래그먼트 클래스의 전체 경로로 설정합니다. 이 경우 com.example.android.navigation.TitleFragment입니다.
레이아웃 너비와 높이를 match_parent로 설정합니다.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>

앱을 실행합니다. 프래그먼트가 기본 화면에 추가되었습니다.

Android 스튜디오 프로젝트: AndroidTriviaFragment

이 Codelab에서는 AndroidTrivia 앱에 프래그먼트를 추가했습니다. 이 앱은 이 강의의 다음 두 Codelab에서 계속 사용합니다.

프래그먼트는 활동의 모듈식 섹션입니다.
프래그먼트는 자체 수명 주기가 있으며 자체 입력 이벤트를 수신합니다.
<fragment> 태그를 사용하여 XML 레이아웃 파일에서 프래그먼트의 레이아웃을 정의합니다.
onCreateView()에서 프래그먼트의 레이아웃을 확장합니다.
활동이 실행 중일 때 프래그먼트를 추가 또는 삭제할 수 있습니다.

Udacity 과정:

Kotlin을 사용하여 Android 앱 개발

Android 개발자 문서:

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

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

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

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

질문에 답하세요

질문 1

프래그먼트와 활동의 차이점은 무엇인가요? 참인 문장을 모두 선택하세요.

프래그먼트를 만들 때 onCreateView() 메서드에서 레이아웃을 확장합니다. 활동을 만들 때 onCreate()에서 레이아웃을 확장합니다.
활동에는 자체 레이아웃이 있지만 프래그먼트에는 자체 레이아웃이 있을 수 없습니다.
활동에는 자체 수명 주기가 있지만 프래그먼트에는 없습니다.
프래그먼트 또는 활동의 레이아웃을 확장할 때 레이아웃을 R.layout.layoutname로 참조할 수 있습니다.

질문 2

프래그먼트에 관한 다음 설명 중 참인 것은 무엇인가요? 해당하는 항목을 모두 선택해 주세요.

둘 이상의 활동에서 프래그먼트를 사용할 수 있습니다.
하나의 활동에 여러 프래그먼트가 있을 수 있습니다.
Kotlin 클래스에서 프래그먼트를 정의하면 프래그먼트가 activity_main.xml 레이아웃 파일에 자동으로 추가됩니다.
<fragment> 태그를 사용하여 프래그먼트를 삽입할 레이아웃 파일의 위치를 정의합니다.

다음 강의 시작: 3.2 탐색 경로 정의

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

Android Kotlin 기초 03.1: 프래그먼트 만들기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.