Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

이 페이지는 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 코딩에 대한 세 가지 상식 문제에 답하는 게임입니다. 사용자가 세 가지 질문에 모두 올바르게 맞히면 게임에서 승리하고 결과를 공유할 수 있습니다.

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

위 스크린샷의 왼쪽에 표시된 제목 화면에서 사용자가 게임을 시작합니다.
위 가운데에 표시된 질문이 있는 게임 화면에서 사용자가 게임을 플레이하고 답을 제출합니다.
오른쪽 상단에 표시되는 탐색 창은 앱 측면으로부터 슬라이드되며 헤더가 있는 메뉴를 포함하고 있습니다. 창 아이콘 이 탐색 창을 엽니다. 탐색 창 메뉴에는 정보 페이지 링크와 게임 규칙 링크가 포함되어 있습니다.

앱 상단에는 앱 바라고 하는 색상 보기(작업 모음이라고도 함)가 표시됩니다.

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

AndroidTrivia-Starter Android 스튜디오 프로젝트를 다운로드합니다.
Android 스튜디오에서 프로젝트를 열고 앱을 실행합니다. 앱이 열리면 앱 이름과 빈 화면이 표시되는 것 외에는 다른 작업이 실행되지 않습니다.
Android 스튜디오 프로젝트 창에서 프로젝트: Android 뷰를 열어 프로젝트 파일을 살펴봅니다. app > java 폴더를 열어 MainActivity 클래스와 프래그먼트 클래스를 확인합니다.
res > layout 폴더를 열고 activity_main.xml을 더블클릭합니다. activity_main.xml 파일이 Layout Editor에 표시됩니다.
Design 탭을 클릭합니다. activity_main.xml 파일의 Component Tree는 루트 레이아웃을 수직 LinearLayout으로 표시합니다.

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

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

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

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

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

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

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

Android 스튜디오에서 Project 창 안의 아무 곳이나 클릭하여 포커스를 프로젝트 파일로 다시 가져옵니다. 예를 들어 com.example.android.navigation 폴더를 클릭합니다.
File > New > Fragment > Fragment (Blank)를 선택합니다.
프래그먼트 이름으로 TitleFragment를 사용합니다. Layout XML 만들기, 프래그먼트 팩토리 메서드 포함, 인터페이스 콜백 포함을 비롯한 모든 체크박스를 선택 해제합니다.
Finish를 클릭합니다.
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() 메서드를 호출합니다.

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

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 방문 페이지를 참고하세요.