프로젝트: Dogglers 앱

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

기본 요건

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

빌드할 항목

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

필요한 항목

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

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

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

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

adf6ec8cce8cc655.png

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

51045288de047217.png

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

ce534bc07ecba432.png

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

6dac0c59577f6fbb.png

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

프로젝트 코드 다운로드

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

이 Codelab의 코드를 가져와서 Android 스튜디오에서 열려면 다음을 실행합니다.

코드 가져오기

  1. 제공된 URL을 클릭합니다. 브라우저에서 프로젝트의 GitHub 페이지가 열립니다.
  2. 프로젝트의 GitHub 페이지에서 Code 버튼을 클릭하여 대화상자를 엽니다.

5b0a76c50478a73f.png

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

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

  1. Android 스튜디오를 시작합니다.
  2. Welcome to Android Studio 창에서 Open an existing Android Studio project를 클릭합니다.

36cc44fcf0f89a1d.png

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

21f3eec988dcfbe9.png

  1. Import Project 대화상자에서 압축 해제된 프로젝트 폴더가 있는 위치로 이동합니다(예: Downloads 폴더).
  2. 프로젝트 폴더를 더블클릭합니다.
  3. Android 스튜디오가 프로젝트를 열 때까지 기다립니다.
  4. Run 버튼 11c34fc5e516fb1c.png을 클릭하여 앱을 빌드하고 실행합니다. 예상대로 작동하는지 확인합니다.
  5. Project 도구 창에서 프로젝트 파일을 살펴보고 앱이 설정된 방식을 확인합니다.

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

93c2c1fee50a493b.png

레이아웃 구현

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

  1. 반려견 사진이 포함된 ImageView
  2. 반려견 이름이 포함된 TextView
  3. 반려견 나이가 포함된 TextView
  4. 반려견 취미가 포함된 TextView

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

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

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

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

73a663ae61811a4b.png

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

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

50dd020683b63b1a.png

어댑터 구현

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

3192d25f55b403bc.png

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

  1. 반려견 데이터 목록의 변수나 상수를 정의합니다. 이 목록은 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 목록으로 설정합니다.

  1. DogCardViewHolder를 구현합니다. 뷰 홀더는 각 recycler 뷰 카드에 설정해야 하는 뷰 네 개를 바인딩해야 합니다. 같은 뷰 홀더가 grid_list_itemvertical_horizontal_list_item 레이아웃에 모두 공유됩니다. 모든 뷰가 두 레이아웃 사이에 공유되기 때문입니다. DogCardViewHolder에는 dog_image, dog_name, dog_age, 및 dog_hobbies 뷰 ID의 속성을 포함해야 합니다.
  2. 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 레이아웃을 확장하고 HORIZONTALVERTICAL 레이아웃의 경우 horizontal_vertical_list_item 레이아웃을 확장합니다. 이 메서드는 확장된 레이아웃을 나타내는 DogCardViewHolder 인스턴스를 반환해야 합니다.

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

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

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

583b42ccd1e5b22.png

테스트 실행

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

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

a32317d35c77142b.png

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

ac6244434cfafb60.png

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

7a925c5e196725bb.png

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

ee1e227446c536fe.png

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

d570c947769db65c.png

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

6d68f2bf589501ae.png

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

63f37b6428781c02.png

예를 들어 위 오류 메시지에서 테스트는 TextView가 특정 문자열 리소스를 사용하고 있는지 확인합니다. 그러나 테스트에 실패합니다. 'Expected'와 'Got' 다음에 있는 텍스트가 일치하지 않습니다. 즉, 테스트에서 예상한 값이 실행되는 앱의 값과 일치하지 않습니다.

이 프로젝트에 관한 의견을 기다리고 있습니다. 간단한 설문조사에 참여하여 의견을 들려주세요. 여러분의 의견은 이 과정의 향후 프로젝트에 도움이 됩니다.