RecyclerView 사용해보기!( 1부 )

2020. 4. 17. 15:05android

1. RecyclerView란? 


RecyclerView는 단어대로 보면 view들을 재사용하여 activity 나 fragment에 표시하는 방법이다. 

 

예를들어 위의 사진들처럼 리스트를 만들려고한다면 하나하나 view들을 만들어가며 만들어야하는 것일까? 

 

당연히 아니다. 리사이클러뷰는 몇가지 방법에 따라 작동하는데 

 

첫째, 리스트의 개별 요소값이 들어갈 수 있는 list container를 미리 만들어 놓는다.

두번째, 각 리스트에 요소값에 들어갈 view들을 생성하고 집어넣는다.

세번째, 생성한 view를 재활용하여 두번째 요소값을 컨테이너에 할당한다. 

 

이렇게 세개의 사이클을 반복하여 만든다. 이렇게 view를 재활용하여 아이템들을 채워 넣는 형식이기 때문에, 

기존에 사용하던 view와 다른 값을 갖는 view를 사용하지않고 공통된 여러값들을 리스트 형식으로 만들때 주로 사용된다.

 

그럼 처음 처음부터 언급해온 재활용이 도대체 어떻게 이루어 지는지에서 작동방식까지 배워보겠다. 

 

먼저 리사이클러뷰를 사용하기 위해서는 gradle에 리사이클러뷰를 사용하기 위한 라이브러리(?)를 불러와야한다.

recyclerView gradle

뒤에 1.1.0이 버전이다. 따라서 안드로이드 공식 사이트에 들어가서 수시로 업데이트 해주면 된다.

 

라이브러리를 불러오게 되면 먼저, list를 사용할 container를 만들어보자.

 

activity_main.xml에서 RecyclerView 사용

위의 사진처럼 선언하게되면 preview 화면으로 리스트가 만들어지는 것을 볼 수 있다. 

 

recyclerView 리스트

이렇게 리스트가 형성되면 item0, 1, 2 ,3.. item9까지의 리스트가 형성된다. 물론 우리가 할당하고자 하는 데이터가 많은데 딱 아홉개만 넣을 수 있는 것은 아니다. 이는 차차 배워가겠다.

 

이렇게 container를 만들었다면 이제 아이템 view를 만들고 할당하고 재활용하는 것을 반복하면 된다. 

 

먼저 리스트에 들어갈 데이터를 만든다.

 

ActivityMain.java

ArrayList로 리스트에 들어갈 아이템을 만든다. 그 다음 이 아이템이 list container에 들어가게 끔 해주는 매개체가 필요하다. 이때 사용되는 패턴이 Adaptor이다. 

 

갑자기 뜬금없는 디자인 패턴이 나와서 당황할 수 있으나, 그러지 않아도 된다. 일상 생활을 비유해보면 노트북 어댑터 같은거라 생각하면 된다. 어떤 데이터가 container에 담기는 것은 아니지만 전기라는 값을 노트북에서 사용되는 배터리로 바꿔 사용가능하게 만들어주는 것처럼, recyclerView의 adaptor도 데이터를 list container에 사용할 수 있는 값으로 바꿔서 넣어주는 것이다.

 

따라서 RecyclerView의 어댑터를 만들어보자. 추가적으로 여기서 재활용에 대한 기법도 한꺼번에 알아본다.

 

Adaptor를 위한 새 java 파일 생성

 코드의 효율적 관리를 위해서 별도로 자바 파일을 만들어서 어댑터를 관리할 것이다. 이후,

 

RecyclerView.Adaptor<> 상속

RecyclerViewAdaptor는 RecyclerView.Adaptor<>를 상속받는다. 그러면 override해야하는 method들이 3개가 존재하기 때문에 빨간줄로 그어질 것이다. 그럴 땐 빨간줄에 커서를 가져다대고 alt + enter를 눌러서 override해야하는 method들을 모두 가져오면 빨간줄이 사라진다.

 

그럼 inner class로 선언된 MyViewHolder class는 무슨 용도일까?

 

바로 view들을 재사용하기 위한 inner class이다. 여기서부터 변수와 xml의 id들을 findViewId()함수를 통해서 연결해 주면 된다. 그럼 어떤 값을 연결해주면 될까?

 

그것은 바로 데이터의 값 구성물들이다. 현재 난 String이란 글로 이루어진 Text뿐이기 때문에 TextView 변수를 하나 만들고 연결해 주면 되겠다. 따라서 list_item.xml 파일을 하나 더 만든다.

 

이렇게 list_item.xml의 구성을 data의 구성 값에 따라서 만들어주면 된다.  그럼 데이터 구성말고 부모 ViewGroup에 내가 별표를 쳐놨다. 이는 절대적으로 중요하기 때문인데, 기본적으로 recyclerView의 item들은 모두 LinearLayout으로 구성되어야한다!!! 이를 놓치지 반드시 기억하자 (후에 작동은 되는데 어댑터에 연결할 데이터가 없다면서 화면에 표시 안되는 에러가 생긴다...)

 

다시 어댑터로 돌아가서 TextView 변수를 선언하여 xml의 TextView와 binding 시킨다.

 

xml에 있는 textView와 class 내 변수를 binding

이렇게 변수와 xml의 id와 연결은 시켰다. 그럼 이것을 가지고서 바로 container에 할당하는 것일까? 

 

그렇지않다. 기본적으로 우리는 adaptor 패턴을 사용하고있다. 따라서 container가 원하는 값으로 변경해서 할당을 해야한다. 

 

list_items.xml을 view로 객체화

이를 위해서 아까 override한 함수들 중 onCreateViewHolder method를 이용하게 된다. 간단하게 설명하자면 container의 각 요소들은 view 객체가 들어가기 때문에 list_items xml 파일을 View로 객체화시켜야한다. 따라서 xml파일을 view로 객체화 시키기 위해 LayoutInflater를 사용하게된다. 

이후 inflate를 하는데 단어 뜻처럼 "부풀리다" 라는 뜻이다. 단지 여기서 "어떤것을 어디에?" 라고 값과 장소를 지정할 수 있게 되는데 위의 그림처럼 값은 R.layout.list_items.xml 파일이 되고 장소가 parent(container)이 된다. 

 

이렇게 container 요소에 들어가기위한 view 값으로 바꿔주기도 했다. 하지만 현재 상태는 실제 데이터가 비어있는 껍데기를 만든 것일 뿐이다. 따라서 실제 데이터를 껍데기에 할당해야한다.

 

 

아차, 그런데 현재 실제 데이터를 갖고있는 곳은 ActivityMain.java다. 따라서 데이터를 갖고있는 list를 Adaptor로 가져와야한다. 어차피 ActvityMain에 Adaptor 변수를 객체화 할 것이기 때문에 constructor를 활용하여 list값을 가져오겠다.

 

RecyclerViewAdaptor의 constructor를 사용하여 list값 가져오기

이렇게 adaptor의 field로 ArrayList를 선언하여 ActvityMain에 있는 데이터를 받아오게 되면 문제가 해결 될 것이다.

 

view에 데이터 값 할당

그런데 position의 값을 통해서 데이터가 담긴 리스트 요소에 접근을 한다. 이때 postiion은 container의 담길 view의 위치 값이 된다. 좀 더 쉽게 말해서 데이터 list의 개수가 10개라면 0부터 하나하나 view를 만들어 container에 넣으니까 개수가 하나씩 카운트 된다고 보면 쉬울 것 같다.

 

마지막으로 가져온 데이터 리스트를 adaptor에서 미리 알고있어야 한다. 따라서 override로 선언했던 

데이터의 개수 확인

getItemCount() method를 통해서 가지고온다. 이는 기본적으로 0 으로 return하는데 모든 method 및 초기화를 진행하고 이 값을 바꾸지 않게되면 안드로이드는 데이터의 개수가 없다고 판단해서 container에 view는 만들지만 view의 내부 값의 할당을 진행하지 않기때문에 화면에서 아무것도 볼 수 없다.

 

이제 다 Adaptor는 전부 끝났다. 다시 Main으로 넘어가서 이제 Adaptor를 객체화하고 이를 container에 꽂기만하면 된다.

 

Main에서 adaptor 객체화 및 container와 연결

먼저 setHasFixedSize를 true로 할당해 주는 것이 안전하다. 이유는 item 요소의 삽입과 삭제에 있어서 각 요소들의 가로 세로 폭이 변경되거나 하는 문제가 발생하기 때문에 이런 불필요한 작업을 배제시켜주는 역할을 한다.

 

두번째로 setLayoutManager다. 위에서 빨간줄로 언급한 말을 기억한다면 조금 더 이해가 쉽다. LayoutManager는 view들을 관리해주는 것인데 우리가 관리받아야 하는 viewGroup은 LinearLayout이기 때문에 LinearLayourManager 객체를 할당하여 사용하게 된다.

 

마지막으론 지금 껏 만들었던 adaptor를 container에 할당하면 끝이다.

 

실행화면

끝인줄 알았는데 하나 간과한 것이 있다. 강아지 빼고 다른 내용값들이 안보이는 것이다. 하지만 이것은 하나의 값만 할당한 것이 아니라 실제로 모든 데이터값들을 할당한 값이다.

 

그럼 왜 하나만 표시되는가??? 

그 이유는 바로 우리가 각 개별 요소에 데이터 요소를 집어넣기 위해 view를 inflate 시켰다. 여기까지 문제는 없다. 

문제는 item.xml에서 존재한다. 

 

높이가 화면의 모든 영역을 차지하고있는 데이터 요소들

이렇게 각 개별 요소값들의 높이가 전체화면을 잡아먹고 있기 때문이다. 따라서 화면에는 강아지 데이터만 보이는 것이다. 그러므로

 

아이템 사이즈에 맞게 높이 설정

아이템 사이즈에 맞게 설정을 해줘야한다. 

 

실행 결과

그럼 우리가 원하던 실행결과를 볼 수 있을 것이다. 

 

이렇게 리사이클러 뷰의 기본을 배워봤다. 실제로 리사이클러뷰는 어느 앱에서든 볼 수 있다. 카카오톡이든.. 뭐든간에 말이다. 왜냐하면 리사이클러 뷰를 사용함으로써 기존의 메모리를 계속 할당하여 사용했던 기존의 방식과 달리 효율적으로 메모리를 사용하고 성능 또한 훨씬 더 좋기 때문이다.

 

또 여러 응용이 가능하다. 예를들어 강아지를 요소를 누르게 되면 강아지에 대한 설명이 자세히 나와있는 화면으로 이동할 수도 있다. 

 

이는 2부에서 마저 배워보겠다.

'android' 카테고리의 다른 글

newInstance()로 Fragment 생성해야하는 이유  (0) 2020.08.12
RecyclerView 2탄! item 클릭 시, 화면전환하기  (0) 2020.04.22
Fragment LifeCycle  (4) 2020.03.03
Android Context  (6) 2020.02.24
Activity Lifecycle  (6) 2020.02.23