[Android/Kotlin] RecyclerView를 사용해서 ListView와 GridView 만들기

안녕하세요 골드입니다.

 오늘은 Android에서 RecyclerView를 사용해서 ListView와 GridView를 만드는 방법에 대해서 글을 쓰도록 하겠습니다. 

 Android Studio 3.1을 기준으로 안드로이드에서 정말 많이 사용되었던 ListView와 GridView가 레거시 코드가 되었습니다. 레거시 코드는 이전 버전과의 호환성을 위해 남겨두지만 다른 코드로 사용할 것을 권장한다는 뜻입니다. 레거시 카테고리에 포함된 두 코드를 대신해서 RecyclerView가 생겼습니다. 코드의 양이 조금 늘어났다고 볼 수도 있지만 다른 두 코드보다 효율적으로 설계되었습니다. 

 한 가지 예를 들자면 기존 ListView같은 경우 리스트가 100개 있다면 100개를 모두 불러왔지만, RecyclerView는 100개가 있더라도 화면에 10개만 보인다면 10개만 불러옵니다. 이후에 스크롤을 내리는 경우에 기존에 사용한 리스트에 데이터만 바꿔서 보여줍니다.

 

이 글은 Kotlin으로 작성하였습니다. 

java는 이 글을 참고해주세요. (저도 Kotlin으로 바꾸기 위해 많이 참고했습니다.)

https://kumgo1d.tistory.com/25

[Android/java] RecyclerView를 활용하여 ListView 만들기

 

1. Layout 구성

우선 activity_main.xml에 RecyclerView를 추가하도록 하겠습니다.

 

 Palette에 Containers 탭으로 들어가면 RecyclerView 위젯이 보입니다. 만약 옆에 다운을 받으라는 표시가 있다면 다운로드해주세요. 그리고 RecyclerView를 드래그 앤 드랍해서 컴포넌트 트리에 추가해주세요.

(현재 예제의 레이아웃은 Constraint Layout입니다.)

 

만약 RecyclerView가 안보이거나 진행이 되지 않는다면 Project 창에 뷰방식을 Android로 지정한 후 build.gradle(Module: app) 파일에서 dependencies { } 안에

해당 코드를 삽입해주세요.

 

 

이런 모습이 보인다면 제대로 추가가 완료된 것입니다.

 

 만약 리스트에 한 줄의 text만 담긴 아이템들을 보여줄 것이라면 지금 상태에서 데이터만 RecyclerView에 추가해주면 됩니다. 그런데 리스트에 TextView를 좀 더 추가하고 배치도 다양하게 만들고 싶다면 리스트에 item을 위한 layout파일을 하나 만들어야 합니다. 그러기 위해서 res -> layout 폴더에 list_item.xml 파일을 하나 생성합니다. layout 폴더에서 우클릭 한 후 New -> Layout Resources File을 클릭하고 이름을 작성하고 저장하면 됩니다.

 

 

 list_item.xml 파일에 최상위 레이아웃을 LinearLayout으로 하고 orientation은 Horizontal로 하겠습니다. Gravity속성은 center_vertical로 설정합니다. 그리고 TextView 두 개를 생성해서 하나는 id값을 id_number로 저장하고 다른 하나는 id를 text_title이라고 저장하겠습니다. 

list_item.xml의 전체 코드입니다. (</LinearLayout> 태그가 마지막줄에 있는데 이미지 안에는 짤렸습니다.)

layout_weight 속성을 부여해서 id_number와 text_title의 넓이를 다르게 보이게 했습니다.

 

 

2. data class 생성

 layout파일에 데이터를 넣어줘야 합니다. 그러기 위해 class를 하나 정의하겠습니다. MainActivity.kt가 있는 위치에 ListData라는 코틀린 클래스 파일을 하나 생성합니다. new -> Kotlin File/Class를 선택하고 이름을 지은 뒤 Class를 선택하고 생성합니다.

data class

 생성한 클래스 파일을 data class로 선언합니다. data 클래스는 괄호 안에 값을 인자로 받는 생성자처럼 사용할 수 있습니다. id_number와 text_title에 맞춰 두 개의 변수를 넣었습니다. java에서 사용하듯이 get set을 하지않아도 되는 점이 아주 편리합니다. 

 

 

3. Adapter 생성

RecyclerView는 Adapter를 사용해서 각각의 데이터를 연결합니다. Adapter는 ViewHolder라는 객체를 이용해서 리스트의 아이템들과 대응합니다.

이런 느낌

 CustomAdapter.kt 클래스를 작성합니다. 먼저 밑에 Holder 클래스입니다.

 RecyclerView.ViewHolder를 사용하기 위해 상속을 받습니다. Holder가 가지는 매개변수와 ViewHolder가 가지는 매개변수명은 동일해야 합니다. 여기서 View는 하나의 레이아웃 객체를 의미합니다. 이 레이아웃 객체를 하나의 리스트 아이템 데이터를 나타낼때 사용합니다. 하나의 리스트 아이템은 ViewHolder에서 대응합니다. 하나의 리스트 아이템에 저장된 데이터를 삽입하기 위한 함수 setListData()를 작성합니다.(setListData는 임의로 지은 이름입니다.) listdata라는 매개변수에 저장된 값을 class의 매개변수로 전달받은 itemView(이 코드에서는 아까 작성한 list_item.xml)에 있는 TextView의 값에 저장합니다.

 

 CustomAdapter 클래스는 RecyclerView.Adapter를 사용하기 위해 상속을 받습니다. Adapter에서 사용할 제네릭 ViewHolder를 밑에 작성한 Holder로 사용하겠다고 선언합니다.

변수 listData는 RecyclerView List에 보여줄 데이터들을 List형식으로 받기 위한 변수입니다. 

세 개의 override 함수를 구현하지 않으면 빨간 줄이 나타납니다. Ctrl + I를 누르면 작성하지 않고 바로 생성할 수 있습니다.

 onCreateViewHolder로 레이아웃을 생성합니다. LayoutInflater를 사용하여 list_item.xml을 inflate()합니다. inflate() 메서드를 사용하면 xml파일이 코드로 변환됩니다. 변환된 layout을 Holder에 전달해줍니다.

 onBindViewHolder는 스크롤되거나 할 경우 레이아웃에 데이터를 갱신해줍니다. 

 

 

4. MainActivity.kt 작성

마지막으로 MainActivity.kt에 코드를 작성해서 생성한 Adapter를 사용합니다.

MainActivity 전체 코드

 MainActivity.kt에 setData()라는 함수를 생성하고 ListData형식의 리스트를 반환합니다. 반환하기 위한 변수 data를 생성하고 값을 초기화 하지 않고 for문으로 생성하기 때문에 mutableListOf()로 선언했습니다. 이후 for문으로 데이터를 생성하고 list에 add메서드로 저장하도록 합니다.

 

 최종적으로 onCreate 함수에서 setData()를 통해 만든 데이터를 받는 변수와 CustomAdapter()를 저장하기 위한 변수를 선언합니다. CustomAdapter.kt에서 선언한 변수 listData에 값을 할당해줍니다.

 

recyclerView는 맨 처음 생성한 RecyclerView의 id값입니다. 만약 존재하지 않다면 id를 확인해주시고 id가 맞는데 빨간줄이 뜬다면 해당 layout파일을 import하기 위해 Alt + Enter를 눌러주세요.

 

마지막으로 작성한 Adapter를 RecyclerView.Adapter에 넣어주고 플레이하면 리스트가 생성된 모습을 볼 수 있습니다.

 

5. GridView 형식으로 만들기

RecyclerView는 GridView 형식으로도 만들 수 있습니다.

위에 작성한 코드에서 recyclerView의 LayoutManager부분을 GridLayoutManger로 수정하면 됩니다.

spanCount 변수가 2로 되어 있습니다. 이 변수는 한 줄에 몇 개의 데이터를 보여줄지 알려줍니다.

 

list_item.xml 파일에서 최상위 레이아웃의 높이값을 조금 수정한 후 플레이한 모습입니다.

 

여기까지 골드였습니다.

감사합니다.

 

RecyclerView item click에 대한 글은 여기를 참고하세요.

https://kumgo1d.tistory.com/44

[Android/Kotlin] RecyclerView 아이템 클릭과 인텐트, 액티비티로 데이터 전송(item click, intent and pass data t

 

 

 

참고자료 : https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.Adapter

RecyclerView.Adapter  |  Android 개발자  |  Android Developers

https://developer.android.com/guide/topics/ui/layout/recyclerview

RecyclerView로 목록 만들기  |  Android 개발자  |  Android Developers