이 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에서는 RecyclerView을 fragment_sleep_tracker.xml에 추가할 때 맞춤설정 없이 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)- 이 줄 아래에서 이
GridLayoutManager를 사용하도록RecyclerView에 알립니다.RecyclerView는 결합 객체에 있으며sleepList이라고 합니다.fragment_sleep_tracker.xml을 참고하세요.
binding.sleepList.layoutManager = manager2단계: 레이아웃 변경하기
현재 list_item_sleep_night.xml 레이아웃에서는 1박당 전체 행을 사용하여 데이터를 표시합니다. 이 단계에서는 그리드에 대한 더 작은 정사각형 항목 레이아웃을 정의합니다.
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}" />- Design 뷰에서
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가 만든 그리드의 크기
▢ 그리드의 열 너비
▢ 그리드의 항목 크기입니다.
▢ 세로 방향의 그리드가 있는 열 수입니다.
다음 강의: