RecyclerView를 사용해보자아(1)

이번글에서는 RecyclerView를 이용해서 Data를 그리는 것 '만' 해보도록하겠다.

아마도 다음 포스팅때는 ItemTouchListener를 달아서 Touch Event를 처리하거나, EndlessRecyclerViewScrollListener를 이용해서

리스트의 끝에 도달했을 때 Data를 Reload 해오는 내용을 다룰 것 같다...

글자 모양과 크기를 한번 바꿔봤는데... 쫌 맘에 든다...호호호

1. RecyclerView 개념

보통 게시판이나, 카톡 프로필 리스트처럼 여러개의 리스트를 띄워주는 내용을 구현 할 때 ListView를 사용해왔다.

하지만 ListView를 사용 할 때 ViewHolder라는 하나의 클래스를 따로 작성해서 ListView의 성능을 높여주는 작업을 따로 해왔지만

RecyclerView에서는 ViewHolder를 강제하고 있어서 번거로운 작업을 피할 수 있다.

또한, RecyclerView에서 setLayoutManager라는 메서드를 지원하는데 ListView형식 뿐만 아니라, 안드로이드 폰의 사진 갤러리처럼 표 모양(?)을 가지고 있는 Grid 방식으로도 구현 할 수 있어서 솔직히 RecyclerView를 이용하면 안드로이드에서 쓰는 거의 대부분의 대량 Data View 처리가 가능하다.

이외에 더 많은 특성이 있지만... 서론이 길면 지루할테니까 구현을 해나가면서 필요하면 그때 그때 설명을 하도록하겠따!!!

자 설명하기 전에 또 Key Point를 알려주지..흐흐...

딱 세가지만 기억하면 된다.

첫번째, RecyclerView에 들어갈 Data Class구현

두번째, RecyclerView에 Data를 그려주는 RecyclerView.Adapter Class구현

세번째, RecyclerView 초기화 및 세팅

2. RecyclerView Gradle 설정

compile 'com.android.support:appcompat-v7:24.2.1' compile 'com.android.support:recyclerview-v7:24.2.1'

여기보세요오 여기요오.. 집중해야대 왜냐면 여기에서도 또 살짝의 꿀팁이 있기때문이지...

'com.android.support:recyclerview-v7:24.2.1' 요렇게 쓸때 v7: 뒤에있는 숫자들이 버전인데 요 버전을

내가 지금 작성한 코드 그대로쓰면 오류납니다.. 왤까요... 예전 포스팅에서도 살짝 말했지만 이렇게 'com.android.support'가 들어가는 라이브러리를 가져다와서 쓸 때, 내 프로젝트의 기본이되는 'com.android.support:appcompat-v7:24.2.1' 요렇게 생긴 녀석의 v7뒤의 버전과 내가 사용 할 라이브러리의 버전을 통일해줘야 하기때문이다...

막 appcompat 버전은 25.2.1인데, recyclerview 버전은 24.2.1 이렇게 해버리면 Gradle Sync 할 때 오류가 난다 이말씀이지...

3. RecyclerView에 들어가는 Data Class 작성

Data Class에는 내가 RecyclerView에 넣고자 하는 데이터를 작성해두는 Class이다.

일단 예제코드를 보는게 좋겠지...

public class Student { private String studentName; private String studentAddress; public void setStudentName(String studentName){ this.studentName = studentName; } public String getStudentName(){ return this.studentName; } public void setStudentAddress(String studentAddress){ this.studentAddress = studentAddress; } public String getStudentAddress(){ return this.studentAddress; } }

요렇게 Class에 Get/Set 메서드를 활용해서 private 변수를 캡슐화 하여 관리하는거는 자바의 기본이기에 이.하.생.략. (궁금하면... 500..만원...)

4. RecyclerView.Adapter Class 구현

정확히 말해서는 RecyclerView.Adapter를 extends해서 커스터 마이징하는 작업이 필요한 것이지...

다 코드를보면 알게됩니다.. 설명도 한다..

public class RecyclerDataAdapter extends RecyclerView.Adapter<ViewHolder> { private ArrayList<Student> arrayListOfStudent; //Adapter 초기화 및 생성자로 받은 데이터기반으로 Adapter 내 데이터 세팅 public RecyclerDataAdapter(ArrayList<Student> arrayListOfStudent){ this.arrayListOfStudent = arrayListOfStudent; } //ViewHolder가 초기화 될 때 혹은 ViewHolder를 초기화 할 때 실행되는 메서드 @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { //Context를 부모로 부터 받아와서 Context context = parent.getContext() ; //받은 Context를 기반으로 LayoutInflater를 생성 LayoutInflater layoutInflater = LayoutInflater.from(context); //생성된 LayoutInflater로 어떤 Layout을 가져와서 어떻게 View를 그릴지 결정 View studentView = layoutInflater.inflate(R.layout.list_recyclerview_layout, parent, false); //View 생성 후, 이 View를 관리하기위한 ViewHolder를 생성 ViewHolder viewHolder = new ViewHolder(studentView); //생성된 ViewHolder를 OnBindViewHolder로 넘겨줌 return viewHolder; } //RecyclerView의 Row 하나하나를 구현하기위해 Bind(묶이다) 될 때 @Override public void onBindViewHolder(ViewHolder holder, int position) { //RecyclerView에 들어갈 Data(Student로 이루어진 ArrayList 배열인 arrayListOfStudent)를 기반으로 Row를 생성할 때 //해당 row의 위치에 해당하는 Student를 가져와서 Student student = arrayListOfStudent.get(position); //넘겨받은 ViewHolder의 Layout에 있는 View들을 어떻게 다룰지 설정 //ex. TextView의 text를 어떻게 설정할지, Button을 어떻게 설정할지 등등... TextView txtName = holder.txtName; txtName.setText(student.getStudentName()); TextView txtAddress = holder.txtAddress; txtAddress.setText(student.getStudentAddress()); } //요 메서드가 arrayListOfStudent에 들어있는 Student 개수만큼 카운트해줌 //요녀석이 있어야 arrayListOfStudent에 넣어준 Student의 데이터를 모두 그릴수 있음 @Override public int getItemCount() { return arrayListOfStudent.size(); } } class ViewHolder extends RecyclerView.ViewHolder{ public TextView txtName; public TextView txtAddress; //ViewHolder 생성 public ViewHolder(View itemView) { super(itemView); //View를 넘겨받아서 ViewHolder를 완성 txtName = (TextView) itemView.findViewById(R.id.txtName); txtAddress = (TextView) itemView.findViewById(R.id.txtAddress); } }

우와 정말 설명이 잘되어있다~!!!!!! 와.. 어떻게 이렇게 잘해놓을수가 있지????.. 설명안하고 넘어가면 뭔가 찝찝하니까.. 해야지 그렇지 성실해야해

Adapter의 역할은 원하는 Data를 RecyclerView에 실제로 그려주는 역할을 하는 아이다.

요녀석이 초기화되고 생성이 되어서 RecyclerView에 set되는 순간 그림이 빠바방 하고 딱!!! 나오는 것이지.. 효과음 적절했다고 생각한다...

5. RecyclerView 초기화 및 세팅

일단 RecyclerView를 xml에다가 불러와서 View를 먼저 얹어놔야겠지? 그러니 찬찬히 따라와보시게나

1) RecyclerView layout xml

<android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="wrap_content"/>

내가 RecyclerView를 띄우고싶은 Activity의 layout에다가 저렇게에 xml코드를 작성해준다

2) RecyclerView의 list에 존재하는 item 하나하나를 구성 할 layout 작성

요녀석은 item 하나하나를 구성하는 layout을 담당한다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/txtName" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentLeft="true" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:textSize="15sp" android:textColor="#000000"/> <TextView android:id="@+id/txtAddress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/txtName" android:layout_marginTop="5dp" android:layout_alignLeft="@+id/txtName" android:layout_marginBottom="10dp" android:textSize="15sp" android:textColor="#000000"/> </RelativeLayout>

어떤것인지 감이 안오는 사람을 위해 사진을 첨부하도록하겠다.

위에 보믄 화살표로 표시된 것들 하나하나가 다 item이라고 칭하는 것들인데 저것을 구성하는 layout을 짜주는것이다.

위의 xml과는 다른 layout이지만 참고용으로 하나 받아왔다.(출처 : 기분이꿀꿀해)

3) Activity의 java코드에서 RecyclerView, RecyclerView.adapter, LayoutManager 초기화 및 세팅

RecyclerDataAdapter recyclerDataAdapter = new RecyclerDataAdapter(arrayListOfStudent); RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.setAdapter(recyclerDataAdapter); recyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this));

첫번째 줄 : 작성해둔 Adapter에 ArrayList<Student> 형태로 저장해둔 ArrayList를 넘겨준다.

두번째 줄 : layout xml에 작성해둔 RecyclerView를 java로 가져와서 초기화

세번째 줄 : RecyclerView에 Adapter 세팅

네번째 줄 : LayoutManager를 통해서 List 형식으로 띄울지, 안드로이드 갤러리처럼 grid 형식으로 띄울지 결정해줌.

자 이제 모두 끝났따...

생각해보자 Data, Adapter, RecyclerView 구현 요 세가지만 하믄 RecylcerView에 내가 원하는 그림을 그릴 수 있는 것 이다. 

어렵게 생각하는 사람들이 많은데, 세가지를 기억하고 구현하다보면 언젠간 손에 익어서 아주 그냥 술술 짤수있게된다잉!!! 힘내자요...