이 Codelab은 Android Kotlin 기초 과정의 일부입니다. Codelab을 순서대로 진행하면 이 과정의 학습 효과를 극대화할 수 있습니다. 모든 과정 Codelab은 Android Kotlin 기본사항 Codelab 방문 페이지에 나열되어 있습니다.
소개
RecyclerView의 주요 강점 중 하나는 레이아웃 관리자를 사용하여 레이아웃 전략을 제어하고 수정할 수 있다는 것입니다. LayoutManager는 RecyclerView의 항목이 정렬되는 방식을 관리합니다.
RecyclerView에는 일반적인 사용 사례를 위한 기본 레이아웃 관리자가 함께 제공됩니다. 예를 들어 가로 및 세로 목록에는 LinearLayout를 사용하고 그리드에는 GridLayout를 사용할 수 있습니다. 더 복잡한 사용 사례의 경우 맞춤 LayoutManager를 구현해야 합니다.
이 Codelab에서는 이전 Codelab의 수면 추적기 앱을 기반으로 목록 대신 그리드 레이아웃을 사용하여 데이터를 표시하는 방법을 알아봅니다. (이전 Codelab의 앱이 없는 경우 이 Codelab의 시작 코드를 다운로드하면 됩니다.)
기본 요건
다음을 잘 알고 있어야 합니다.
Activity,Fragments,Views를 사용하여 기본 사용자 인터페이스 빌드- 프래그먼트 간 탐색 및
safeArgs을 사용하여 프래그먼트 간 데이터 전달 - 모델, 모델 팩토리, 변환 보기
LiveData및 관찰자Room데이터베이스를 만들고, DAO를 만들고, 항목을 정의하는 방법- 데이터베이스 작업 및 기타 장기 실행 작업에 코루틴을 사용하는 방법
Adapter,ViewHolder, 항목 레이아웃으로 기본RecyclerView를 구현하는 방법RecyclerView의 데이터 바인딩을 구현하는 방법- 결합 어댑터를 만들어 데이터를 변환하는 방법
학습할 내용
- 다른
LayoutManager를 사용하여RecyclerView에 데이터가 표시되는 방식을 변경하는 방법 - 수면 데이터의 그리드 레이아웃을 만드는 방법
실습할 내용
- 이 시리즈의 이전 Codelab에서 만든 수면 추적기 앱을 기반으로 빌드합니다.
- 앱에서
RecyclerView로 표시된 수면 데이터 목록을 수면 데이터의 그리드로 바꿉니다.
수면 추적기 앱에는 아래 그림과 같이 프래그먼트로 표시되는 두 개의 화면이 있습니다.
|
|
왼쪽에 표시된 첫 번째 화면에는 추적을 시작하고 중지하는 버튼이 있습니다. 화면에는 사용자의 수면 데이터가 일부 표시됩니다. 지우기 버튼은 앱이 사용자를 위해 수집한 모든 데이터를 완전히 삭제합니다. 오른쪽에 표시된 두 번째 화면은 수면의 질 평가를 선택하는 화면입니다.
이 앱은 UI 컨트롤러, 뷰 모델, LiveData, Room 데이터베이스를 사용하여 수면 데이터를 유지하는 간소화된 아키텍처를 사용합니다.
수면 데이터가 RecyclerView에 표시됩니다. 이 Codelab에서는 GridLayout을 사용하도록 앱을 변경합니다. 최종 화면은 아래 스크린샷과 같습니다.
이전 Codelab에서 fragment_sleep_tracker.xml에 RecyclerView를 추가할 때 맞춤설정 없이 LinearLayoutManager를 추가했습니다. 이 코드는 데이터를 세로 목록으로 표시합니다.
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"LinearLayoutManager은 RecyclerView의 가장 일반적이고 간단한 레이아웃 관리자이며 하위 뷰의 가로 및 세로 배치를 모두 지원합니다. 예를 들어 LinearLayoutManager를 사용하여 사용자가 가로로 스크롤하는 이미지 캐러셀을 만들 수 있습니다.
GridLayout
또 다른 일반적인 사용 사례는 사용자에게 많은 데이터를 표시해야 하는 경우로, GridLayout를 사용하여 이를 수행할 수 있습니다. RecyclerView의 GridLayoutManager는 아래와 같이 데이터를 스크롤 가능한 그리드로 배치합니다.
디자인 관점에서 볼 때 GridLayout는 아이콘이나 이미지로 표현할 수 있는 목록(예: 사진 탐색 앱 내의 목록)에 가장 적합합니다. 수면 추적기 앱에서는 매일 밤의 수면을 큰 아이콘의 그리드로 표시할 수 있습니다. 이 디자인을 사용하면 사용자가 수면의 질을 한눈에 파악할 수 있습니다.
GridLayout에 항목을 배치하는 방법
GridLayout는 항목을 행과 열의 그리드로 정렬합니다. 세로 스크롤을 사용하는 경우 기본적으로 행의 각 항목은 '스팬' 하나를 차지합니다. (이 경우 한 스팬은 한 열의 너비와 동일합니다.)
아래의 처음 두 예에서 각 행은 스팬 세 개로 구성됩니다. 기본적으로 GridLayoutManager는 개발자가 지정한 스팬 수까지 각 항목을 한 스팬에 배치합니다. 스팬 수에 도달하면 다음 줄로 넘어갑니다.
기본적으로 각 항목은 하나의 스팬을 차지하지만 항목이 차지할 스팬 수를 지정하여 항목을 더 넓게 만들 수 있습니다. 예를 들어 아래에 표시된 가장 오른쪽 화면의 상단 항목은 3개의 스팬을 차지합니다.
|
|
|
이 작업에서는 이전 연습에서 완료한 RecyclerView를 가져와 GridLayoutManager를 사용하여 데이터를 표시하도록 업데이트합니다. 이전 Codelab의 수면 추적기 앱을 계속 사용하거나 GitHub에서 RecyclerViewGridLayout-Starter 앱을 다운로드할 수 있습니다.
1단계: LayoutManager 변경
- 필요한 경우 GitHub에서 이 Codelab의 RecyclerViewGridLayout-Starter 앱을 다운로드하고 Android 스튜디오에서 프로젝트를 엽니다.
fragment_sleep_tracker.xml레이아웃 파일을 엽니다.sleep_listRecyclerView정의에서 레이아웃 관리자를 삭제합니다.
삭제할 코드:
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManagerSleepTrackerFragment.kt를 엽니다.OnCreateView()에서return문 바로 앞에 3개의 스팬이 있는 새로운 세로 방향GridLayoutManager를 만듭니다.GridLayoutManager생성자는 최대 4개의 인수를 사용합니다. 컨텍스트(activity), 스팬 수(기본 세로 레이아웃의 열), 방향(기본값은 세로), 역 레이아웃 여부(기본값은false)입니다.
val manager = GridLayoutManager(activity, 3)- 이 줄 아래에서
RecyclerView에게 이GridLayoutManager을 사용하라고 지시합니다.RecyclerView은 바인딩 객체에 있으며sleepList이라고 합니다. (fragment_sleep_tracker.xml참고)
binding.sleepList.layoutManager = manager2단계: 레이아웃 변경하기
list_item_sleep_night.xml의 현재 레이아웃은 밤마다 전체 행을 사용하여 데이터를 표시합니다. 이 단계에서는 그리드의 더 간결한 정사각형 항목 레이아웃을 정의합니다.
list_item_sleep_night.xml를 엽니다.- 새 디자인에는
sleep_lengthTextView이 필요하지 않으므로 삭제합니다. quality_stringTextView가ImageView아래에 표시되도록 이동합니다. 이렇게 하려면 여러 항목을 업데이트해야 합니다.quality_stringTextView의 최종 레이아웃은 다음과 같습니다.
<TextView
android:id="@+id/quality_string"
android:layout_width="0dp"
android:layout_height="20dp"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/quality_image"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/quality_image"
app:layout_constraintTop_toBottomOf="@+id/quality_image"
tools:text="Excellent!!!"
app:sleepQualityString="@{sleep}" />- 디자인 뷰에서
quality_stringTextView이ImageView아래에 배치되어 있는지 확인합니다.
데이터 바인딩을 사용했으므로 Adapter에서 아무것도 변경할 필요가 없습니다. 코드가 작동하고 목록이 그리드로 표시됩니다.
- 앱을 실행하고 수면 데이터가 그리드에 표시되는 방식을 관찰합니다.
ConstraintLayout은 여전히 전체 너비를 차지합니다.GridLayoutManager는 범위에 따라 뷰에 고정 너비를 부여합니다.GridLayoutManager는 그리드를 배치하고, 공백을 추가하고, 항목을 클리핑할 때 모든 제약 조건을 충족하기 위해 최선을 다합니다.
SleepTrackerFragment에서GridLayoutManager을 만드는 코드에서GridLayoutManger의 스팬 수를 1로 변경합니다. 앱을 실행하면 목록이 표시됩니다.
val manager = GridLayoutManager(activity, 1)GridLayoutManager의 스팬 수를 10으로 변경하고 앱을 실행합니다.GridLayoutManager에 항목이 한 행에 10개씩 표시되지만 항목이 잘립니다.- 스팬 개수를 5로, 방향을
GridLayoutManager.VERTICAL로 변경합니다. 앱을 실행하고 가로로 스크롤할 수 있는지 확인합니다. 이 경우 다른 레이아웃이 필요합니다.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)- 스팬 수를 3으로, 방향을 세로로 다시 설정하는 것을 잊지 마세요.
Android 스튜디오 프로젝트: RecyclerViewGridLayout
- 레이아웃 관리자는
RecyclerView의 항목이 정렬되는 방식을 관리합니다. RecyclerView에는 가로 및 세로 목록의LinearLayout, 그리드의GridLayout등 일반적인 사용 사례를 위한 기본 레이아웃 관리자가 함께 제공됩니다.- 더 복잡한 사용 사례의 경우 맞춤
LayoutManager를 구현하세요. - 디자인 관점에서 볼 때
GridLayout는 아이콘이나 이미지로 표현할 수 있는 항목 목록에 가장 적합합니다. GridLayout는 항목을 행과 열의 그리드로 정렬합니다. 세로 스크롤을 사용하는 경우 행의 각 항목은 '스팬' 하나를 차지합니다.- 항목이 차지하는 스팬 수를 맞춤설정하여 맞춤 레이아웃 관리자 없이도 더 흥미로운 그리드를 만들 수 있습니다.
- 그리드의 한 항목에 대한 항목 레이아웃을 만들면 레이아웃 관리자가 항목을 정렬합니다.
<RecyclerView>요소를 포함하는 XML 레이아웃 파일에서 또는 프로그래매틱 방식으로RecyclerView의LayoutManager를 설정할 수 있습니다.
Udacity 과정:
Android 개발자 문서:
이 섹션에는 강사가 진행하는 과정의 일부로 이 Codelab을 진행하는 학생에게 출제할 수 있는 과제가 나열되어 있습니다. 다음 작업은 강사가 결정합니다.
- 필요한 경우 과제를 할당합니다.
- 과제 제출 방법을 학생에게 알립니다.
- 과제를 채점합니다.
강사는 이러한 추천을 원하는 만큼 사용할 수 있으며 적절하다고 생각되는 다른 과제를 출제해도 됩니다.
이 Codelab을 직접 진행하는 경우 이러한 과제를 자유롭게 사용하여 배운 내용을 테스트해 보세요.
질문에 답하세요
질문 1
다음 중 Android에서 제공되는 레이아웃 관리자는 무엇인가요? 해당하는 항목을 모두 선택해 주세요.
▢ LinearLayouManager
▢ GridLayoutManager
▢ CircularLayoutManager
▢ StaggeredGridLayoutManager
질문 2
'스팬'이란 무엇인가요?
▢ GridLayoutManager로 만들어진 그리드의 크기입니다.
▢ 그리드에 있는 열의 너비입니다.
▢ 그리드에 있는 항목의 크기입니다.
▢ 그리드에서 세로 방향인 열의 개수입니다.
다음 강의 시작: