프로젝트: Dogglers 앱

1. 시작하기 전에

이 Codelab에서는 개발자가 직접 빌드할 Dogglers라는 새로운 앱을 소개합니다. 이 Codelab에서는 Android 스튜디오 내에서의 프로젝트 설정 및 테스트를 비롯하여 Dogglers 앱 프로젝트를 완료하는 단계를 안내합니다.

이 Codelab은 이 과정의 다른 Codelab과 다릅니다. 이전 Codelab과 달리 이 Codelab의 목적은 앱을 빌드하는 방법에 관한 단계별 튜토리얼을 제공하는 것이 아닙니다. 대신 이 Codelab은 개발자가 독립적으로 완료할 프로젝트를 설정하기 위한 것으로, 앱을 완성하고 직접 작업을 확인하는 방법에 관한 안내를 제공합니다.

솔루션 코드 대신 Google에서는 다운로드할 앱의 일부로 테스트 모음을 제공합니다. Android 스튜디오에서 이러한 테스트를 실행하고(이 Codelab 뒷부분에서 실행 방법을 설명함) 코드가 통과하는지 확인합니다. 여러 번 시도해야 할 수 있습니다. 전문 개발자도 첫 번째 시도에서 모든 테스트에 통과하는 경우는 거의 없습니다. 코드가 모든 테스트에 통과하면 이 프로젝트를 완료된 것으로 간주할 수 있습니다.

대조하여 확인할 솔루션 코드만 원할 수 있음을 알고 있습니다. Google에서는 의도적으로 솔루션 코드를 제공하지 않습니다. 전문 개발자가 되는 것이 어떤 것인지 실제로 경험하길 바라기 때문입니다. 그러려면 다음과 같이 아직 연습을 많이 하지 않은 다양한 기술을 사용해야 할 수 있습니다.

알 수 없는 앱의 용어와 오류 메시지, 코드를 Google에서 검색합니다.
코드를 테스트하고 오류를 읽은 후 코드를 변경하고 다시 코드를 테스트합니다.
Android 기본사항의 이전 콘텐츠로 돌아가 학습한 내용을 복습합니다.
작동이 보장된 코드(프로젝트에 제공된 코드나 2단원에 있는 다른 앱의 이전 솔루션 코드 등)를 작성하고 있는 코드와 비교합니다.

처음에는 이 작업이 어렵게 보일 수도 있지만 2단원을 완료했다면 이 프로젝트도 완수할 수 있을 것입니다. 천천히 진행하면서 끝까지 포기하지 마세요. 할 수 있습니다.

기본 요건

이 프로젝트는 Kotlin으로 배우는 Android 기본사항 과정의 2단원을 완료한 사용자를 대상으로 합니다.

빌드할 항목

2단원에서 배운 기술을 사용하여 RecyclerView에 정보를 표시하는 Dogglers라는 앱을 빌드합니다.

필요한 항목

Android 스튜디오가 설치된 컴퓨터

2. 앱 개요

프로젝트: Dogglers 앱에 오신 것을 환영합니다.

Google에서는 동료 직원을 'Googler'라고 애정을 담아 부릅니다. 개를 반려동물로 키우는 Google 직원이 많아 Google에서는 반려견을 위한 앱인 Dogglers를 만들면 재밌을 거라고 생각했습니다. 해야 할 작업은 Google 직원의 반려견에 관한 스크롤 목록을 표시하는 Dogglers를 구현하는 것으로, 목록에는 이름, 나이, 취미, 사진 등 각 반려견의 정보가 포함됩니다. 이 프로젝트에서는 Dogglers 앱에서 RecyclerView 항목의 레이아웃을 빌드하고 어댑터를 구현하여 반려견 목록이 가로 스크롤, 세로 스크롤, 세로 스크롤 그리드 레이아웃의 세 가지 방식으로 표시될 수 있도록 합니다.

앱을 실행하면 가로, 세로, 그리드 레이아웃 옵션이 제공됩니다.

첫 번째 옵션은 화면의 전체 너비를 차지하는 항목이 있는 세로 스크롤 recycler 뷰입니다.

두 번째 옵션은 가로 스크롤 recycler 뷰에 반려견 목록을 표시합니다.

세 번째 옵션은 반려견 두 마리가 각 행에 표시되는 세로 스크롤 그리드 스타일 레이아웃으로 반려견을 표시합니다.

이러한 모든 레이아웃은 같은 어댑터 클래스에 기반합니다. recycler 뷰 카드의 레이아웃을 빌드하고 각 항목이 각 반려견에 관한 정보로 채워지도록 어댑터를 구현해야 합니다.

3. 시작하기

프로젝트 코드 다운로드

폴더 이름은 android-basics-kotlin-dogglers-app입니다. Android 스튜디오에서 프로젝트를 열 때 이 폴더를 선택하세요.

프로젝트에 제공된 GitHub 저장소 페이지로 이동합니다.
브랜치 이름이 Codelab에 지정된 브랜치 이름과 일치하는지 확인합니다. 예를 들어 다음 스크린샷에서 브랜치 이름은 main입니다.

프로젝트의 GitHub 페이지에서 Code 버튼을 클릭하여 팝업을 엽니다.

팝업에서 Download ZIP 버튼을 클릭하여 컴퓨터에 프로젝트를 저장합니다. 다운로드가 완료될 때까지 기다립니다.
컴퓨터에서 파일을 찾습니다(예: Downloads 폴더).
ZIP 파일을 더블클릭하여 압축을 해제합니다. 프로젝트 파일이 포함된 새 폴더가 만들어집니다.

Android 스튜디오에서 프로젝트 열기

Android 스튜디오를 시작합니다.
Welcome to Android Studio 창에서 Open을 클릭합니다.

참고: Android 스튜디오가 이미 열려 있는 경우 File > Open 메뉴 옵션을 대신 선택합니다.

파일 브라우저에서 압축 해제된 프로젝트 폴더가 있는 위치로 이동합니다(예: Downloads 폴더).
프로젝트 폴더를 더블클릭합니다.
Android 스튜디오가 프로젝트를 열 때까지 기다립니다.
Run 버튼 을 클릭하여 앱을 빌드하고 실행합니다. 예상대로 작동하는지 확인합니다.

프로젝트는 별도의 패키지로 구성됩니다. 기능은 대부분 이미 구현되어 있지만 DogCardAdapter는 구현해야 합니다. 수정해야 하는 레이아웃 파일도 두 개 있습니다. 다른 파일은 필요에 따라 다음 안내에서 설명합니다.

레이아웃 구현

세로 레이아웃과 가로 레이아웃은 모두 같으므로 두 경우에 모두 단일 레이아웃 파일만 구현하면 됩니다. 그리드 레이아웃에는 모두 같은 정보가 표시되지만 반려견의 이름과 나이, 취미는 세로로 스택되어 있으므로 이 경우에는 별도의 레이아웃이 필요합니다. 두 레이아웃에는 모두 각 반려견에 관한 정보를 표시하는 뷰가 4개 필요합니다.

반려견 사진이 포함된 ImageView
반려견 이름이 포함된 TextView
반려견 나이가 포함된 TextView
반려견 취미가 포함된 TextView

테두리와 그림자를 표시하는 각 카드의 스타일 지정도 확인할 수 있습니다. 이 작업은 이미 시작 프로젝트의 레이아웃 파일에 추가된 MaterialCardView로 처리됩니다. 각 MaterialCardView 내에는 나머지 뷰를 추가해야 하는 ConstraintLayout이 있습니다.

레이아웃을 구현하려면 사용해야 하는 XML 파일이 두 개 있습니다. 가로 및 세로 레이아웃용 vertical_horizontal_list_item.xml과 그리드 레이아웃용 grid_list_item.xml입니다.

세로 및 가로 목록의 레이아웃을 빌드합니다.

vertical_horizontal_list_item.xml을 열고 내부 ConstraintLayout에서 이미지와 일치하도록 레이아웃을 빌드합니다.

그리드 레이아웃을 빌드합니다.

grid_list_item.xml을 열고 내부 ConstraintLayout에서 이미지와 일치하도록 레이아웃을 빌드합니다.

어댑터 구현

레이아웃을 정의했다면 다음 작업은 RecyclerView 어댑터를 구현하는 것입니다. 어댑터 패키지에서 DogCardAdapter.kt를 엽니다. 구현해야 하는 내용을 설명하는 TODO 주석이 많은 것을 확인할 수 있습니다.

어댑터를 구현하려면 다섯 단계가 필요합니다.

반려견 데이터 목록의 변수나 상수를 정의합니다. 이 목록은 DataSource라는 객체의 data 패키지에서 확인할 수 있고 다음과 같이 표시됩니다.

object DataSource {

   val dogs: List<Dog> = listOf( ...

}

dogs 속성은 List<Dog> 유형입니다. Dog 클래스는 model 패키지에서 확인할 수 있으며, 1개의 이미지(리소스 ID로 표시됨)와 3개의 String 속성 등 4개의 속성을 정의합니다.

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

DogCardAdapter에서 정의한 변수를 DataSource 객체의 dogs 목록으로 설정합니다.

DogCardViewHolder를 구현합니다. 뷰 홀더는 각 recycler 뷰 카드에 설정해야 하는 뷰 네 개를 바인딩해야 합니다. 같은 뷰 홀더가 grid_list_item 및 vertical_horizontal_list_item 레이아웃에 모두 공유됩니다. 모든 뷰가 두 레이아웃 사이에 공유되기 때문입니다. DogCardViewHolder에는 dog_image, dog_name, dog_age, 및 dog_hobbies 뷰 ID의 속성을 포함해야 합니다.
onCreateViewHolder()에서 grid_list_item 또는 vertical_horizontal_list_item 레이아웃을 확장하려고 합니다. 사용할 레이아웃을 어떻게 알 수 있나요? 어댑터의 정의에서 어댑터 인스턴스를 만들 때 Int 유형의 레이아웃이라는 값이 전달되는 것을 확인할 수 있습니다.

class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

이는 const 패키지에 있는 Layout 객체에 정의된 값에 상응합니다.

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

레이아웃 값은 1이나 2, 3이지만 Layout 객체에서 VERTICAL, HORIZONTAL, GRID 식별자와 비교하여 확인할 수 있습니다.

GRID 레이아웃의 경우 grid_list_item 레이아웃을 확장하고 HORIZONTAL 및 VERTICAL 레이아웃의 경우 vertical_horizontal_list_item 레이아웃을 확장합니다. 이 메서드는 확장된 레이아웃을 나타내는 DogCardViewHolder 인스턴스를 반환해야 합니다.

getItemCount()를 구현하여 반려견 목록의 길이를 반환합니다.
마지막으로 onBindViewHolder()를 구현하여 각 recycler 뷰 카드에서 데이터를 설정해야 합니다. position을 사용하여 목록에서 올바른 반려견 데이터에 액세스하고 이미지와 반려견 이름을 설정합니다. 문자열 리소스 dog_age와 dog_hobbies를 사용하여 나이와 취미의 형식을 적절하게 지정합니다.

어댑터 구현을 완료했으면 에뮬레이터에서 앱을 실행하여 모든 것이 올바르게 구현되었는지 확인합니다.

4. 앱 테스트

Dogglers 프로젝트에는 여러 테스트 사례가 있는 'androidTest' 타겟이 포함되어 있습니다.

테스트 실행

테스트를 실행하려면 다음 중 하나를 실행하면 됩니다.

단일 테스트 사례의 경우 테스트 사례 클래스를 열고 클래스 선언 왼쪽의 녹색 화살표를 클릭합니다. 그런 다음 메뉴에서 실행 옵션을 선택하면 됩니다. 그러면 테스트 사례의 테스트가 모두 실행됩니다.

예를 들어 실패한 테스트는 하나뿐이고 나머지 테스트는 통과된 경우와 같이 단일 테스트만 실행하려는 때가 많습니다. 전체 테스트 사례와 마찬가지로 단일 테스트를 실행할 수 있습니다. 녹색 화살표를 사용하여 실행 옵션을 선택합니다.

테스트 사례가 여러 개라면 전체 테스트 모음을 실행할 수도 있습니다. 앱을 실행하는 것과 마찬가지로 Run 메뉴에서 이 옵션을 찾을 수 있습니다.

Android 스튜디오는 마지막으로 실행한 타겟(앱, 테스트 타겟 등)을 기본값으로 설정하므로 메뉴에 여전히 Run > Run 'app'이라고 표시되면 Run > Run을 선택하여 테스트 타겟을 실행할 수 있습니다.

그런 다음 팝업 메뉴에서 테스트 타겟을 선택합니다.

테스트 실행 결과는 Run 탭에 표시됩니다. 왼쪽 창에서 실패한 테스트 목록을 확인할 수 있습니다(있는 경우). 실패한 테스트는 함수 이름 옆에 빨간색 느낌표가 표시됩니다. 통과한 테스트는 녹색 체크표시가 표시됩니다.

테스트에 실패하면 텍스트 출력을 통해 테스트 실패를 야기한 문제를 해결할 수 있는 정보가 제공됩니다.

예를 들어 위 오류 메시지의 경우 테스트에서 'Nox'라는 단어가 포함된 문자열이 표시되는지 확인합니다. 그러나 테스트에 실패합니다. 해당하는 텍스트를 찾을 수 없습니다. 즉, 아직 표시되지 않았을 수 있습니다.