RecyclerView 로 listview 정복

안드로이드, 아니 모바일 UI의 작업의 핵심은 역시 ListView인것 같습니다.

앱을 만들면서 ListView를 만들지 않은 적은 없었는데요.

오늘은, 이 RecyclerView를 한번 정리해볼려고 합니다~.

최종적으로 만들려고 하는 형태는 다음과 같습니다.

1. 라이브러리 설정

역시나 Library부터 설정하고 가겠습니다.

Dependencies에서 recyclerview로 검색하셔서 파란색 하이라이트된 라이브러리를 선택해 추가하시면 됩니다.

Gradle파일에 직접 추가하시려면

하단에 compile 'compile 'com.android.support:recyclerview-v7:24.2.0'' 를 추가해주세요~

2. 리사이클뷰에 뿌릴 데이터 모델 클래스 생성

데이터를 뿌리기 위해서는 그 데이터들의 모델클래스를 먼저 생성해줍니다.

짐작하시겠지만, 이 모델클래스는 차후에 우리가 사용할 객체의

설계도이구요. 이 클래스안에 있는 getter와 setter를 통해서

데이터를 넣고 빼고 할 생각입니다.

(음.. 리사이클러뷰 작업할 때, UI를 먼저 만드시는 분들도 있던데요.

전 모델클래스부터 잡고가는게 머리속에서 정리가 되더라구요)

3. 데이터를 그려낼 UI생성

데이터모델을 유아이로 그릴 예정이고요.

(여기서 그려낼 유아이는 리스트의 1줄 부분입니다.)

이 때, 물론 리스트에 텍스트하나만 넣을수 있겠지만,

실제 작업할 때는 그렇지 않은 경우가 대부분이지요.

프로필도 들어가기도 하구요.

저는 그냥 위아래로 텍스트 두개가 들어가는 형태로 하겠습니다.

(그런데 UI작업을 했다고 하기에는 너무;;;ㅎㅎㅎㅎ)

4. ViewHolder 생성

뷰홀더는 말그대로 뷰를 홀딩하고 있는 건데요. 

위에서 UI를 반복시킨다고 했었는데요,

, 반복되는 리스트에서 매번 FindViewById하는것은 리소스를 많이 잡아 먹으므로,

뷰들을 홀딩하고 있다가, 계속 재활용해서 써먹을 수 있도록 viewHolder클래스를 상속하는

클래스를 만들어서 사용하는 겁니다.

viewHolder클래스를 생성할 때 RecyclerView.ViewHolder 를 상속받습니다.

ViewHolder를 상속받으면 생성자를 만들라고, AndroidStudio가 애기를 해주구요, 저희는 따르면 됩니다.

그러면 TestViewHolder라는 생성자가 자동으로 나오구요.

이 생성자에 저희가 반복해서 사용할 텍스트뷰들을 찾아오면 됩니다.

여기서는 text_student_name과 text_score가 되겠네요.

5.  Adapter 생성

개인적으로 리사이클러뷰를 구현하는데 있어서 가장 중요한 부분이라고 생각하는데요.

먼저, UI와 데이터를 연결시켜 주는 Adapter클래스를 생성합니다.

생성한 TestAdpater는 Adapter<VH>를 상속받도록 하는데요.

이 때 제네릭인 VH부분에 위에서 작성했던 TestViewHolder를 넣어주면 됩니다.

(참고로 RecyclerView.Adapter만 extends받게되면, 다른 view를 받을 수도 있는데요,

리스트안에서도 중간에 광고를 넣는다든지, 다른 레이아웃을 넣을 때 사용합니다.)

생성을 하게되면 위 그림과 같이 Implement해야한다고 나오는 데요. implement해주면 됩니다.

그럼 저희가 구현해야 할 것들이 나옵니다.

onCreateViewHolder부터 보겠습니다.

뷰홀더를 어떻게 생성할 것이냐고 하는 부분입니다.

여기서 뷰홀더 객체를 생성해서 return해주면 됩니다.

이 뷰홀더 객체 생성자가 인자로 View를 받기 때문에 이를 생성하기 위해서, LayoutInflater를 사용했습니다.

다음은 onBindViewHolder입니다.

뷰홀더를 데이터와 바인딩시킬때 어떻게 할것이냐는 것이죠.

그런데, 여기서 저희는 데이터들을 추가하고, 추가한 데이터들을 컨트롤하기 위해서, ArrayList를 만들고,

add라는 아이템을 추가할 수 있는 메소드를 만들겠습니다.

왜냐하면, 데이터가 어딘가에 쌓여있어야, 네트워크에서 불러오든 로컬디비에서 불러오든 할때,

그것들을 리스트로 뿌려줄수 있기 때문입니다.

저희가 받을 데이터 타입의 ArrayList를 만들고 여기에 add메소드로 자료들을 더할 수 있도록 한다음,

notifyDataSetChanged라는 메소드를 씁니다.

이 메소드는, 어댑터에서 데이터가 변화할 때 알려주는 역할을 하는데요.

어댑터는 이 정보를 받아서, 뷰에 반영해 줍니다.

다시 onBindViewHolder로 돌아오겠습니다.

뷰홀더와 데이터가 결합할 때 각 줄의(리스트에서의 한 칸) 데이터는 주어진 position으로 얻어올 수 있습니다.

데이터들을 어레이리스트에 추가했기 때문에, get메소드에 position을 주면 되지요.

이렇게 한줄한줄의 아이템에 holder를 통해 ui에 접근해서 의 데이터를 그려주는 것이 onBindViewHolder의 역할입니다.

마지막으로, 아이템 갯수를 구하는 부분을 구현하라는 것인데요.

이것도 역시 위에서 만든 어레이리스트가 있으므로, size메소드로 쉽게 구할 수 있습니다.

6. RecyclerView를 UI에 배치

드디어 실체적인 UI뷰를 그릴려고 합니다.

위에서, 라이브러리를 정상적으로 추가하셨다면, 

XML파일에서 recycler라고만 하셔도, recyclerView가 검색되실 겁니다.

이걸 얹혀 놓겠습니다. item0으로 시작 껍데기 리스트가 보이실 겁니다.

7. JAVA파일에서 코딩

위에서 배치한 리사이클러뷰를 자바파일에 배치하구요.

findById로 찾아서 연결시켜주는 작업을 하겠습니다.

이 리사이클러 뷰는 레이아웃 매니저를 필요로 하므로 

생성한다음 setLayoutManager라는 메소드를 통해서 세팅해줍니다.

(이 레이아웃 매니저를 사용하는 것에 따라서 여러가지 레이아웃을 가질 수 있는데요.

이 부분은 차후에 정리해보려고 합니다.)

그리고, 위에서 만들었던 어댑터 클래스에 따라서 어댑터도 생성해주신다음에

리사이클러뷰에서 setAdatper메소들를 통해서 셋해주시면 됩니다.

이후에 addTestData()라는 메소드는 

리스트에 데이터를 initialize 해주는 것인데요.

예제 코드이므로, for문 돌려서 한 50개정도 넣어주시면 될것 같습니다.

만들어놓은 student모델 클래스를 객체화해서 셋한다음 

어댑터에서 만든 add메소드를 이용하면 됩니다.

이렇게해서 기본 형태의 리사이클러뷰를 정리해보았습니다.

리스트뷰 각줄의 아이템을 클릭하면 토스트 팝업을 띄울 수 있도록 하는 것에 관해

part2에서 다루었는데요. 아래 링크를 눌러서 바로 가실 수 있습니다.

>>> RecyclerView 로 listview 정복 Part.2 <<<