Android support v7 widget RecyclerView 사용하기

Android support v7 widget RecyclerView 사용하기

안녕하세요. 바쁘게 프로젝트 하다보니 새로나온 위젯에 대해 학습을 못한것 같아 포스트 작성 하고 있습니다.

Android ListView 를 대체할 차기 RecyclerView 를 학습해 보려 합니다.

Android 에서 가장 많이 쓰인다 해도 과언이 아닌  ListView에는 단점이 존재 합니다.

1. ViewHolder 지원이 되지 않아 퍼포먼스 관리가 어렵다.

2. ListView 화면을 유연하게 바꿀수 없다.

3. Animation 적용이 어렵다.

이런 단점들을 보완하기 위해서 RecycleView 가 v7 widget 에 추가가 된것 같습니다.

RecycleView 에서가장 큰 변경 사항은

1. LayoutManager

2. ViewHolder

3. Item 

4. Animation

이 추가가 되어 따로 관리 할수 있도록 분리가 되어있습니다.

사용 클래스

1. ViewHolder - 재활용 View 를 관리해주는 Class

2. Adapter - 기존 ListView 와 동일하게 동작하면 Item 을 관리 하는 Class

3. LayoutManager - Item 의 레이아웃 관리 Class

4. ItemDecoration - Item 항목의 Sub View 관리 Class

5. ItemAnimation - Item 항목의 Animation 관리 Class

이 사용됩니다. ListView 보다 조금 복잡해 지긴 했지만 , ListView 를 다루셔 보셨으면 쉽게 학습 할수 있을것 같습니다.

이 옵션을 다 적용하면 덩어리가 큰 코드가 될것 같습니다.

이번코드에서는 설명으로 정리를 하고 기본 RecycleView 를 만들어 보고 다음 포스트에서 하나하나 옵션을 추가 해보는게

좋을것 같습니다.

1. 라이브러리 추가

app 의 build.gradle 에 작성 합니다.

dependencies {
    compile 'com.android.support:recyclerview-v7:21.+'
}

2. Xml 코드 작성

라이브러리를 추가 했으니 화면 구성을 해야 합니다.

기존의 리스트뷰와 거의 동일 합니다.

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <android.support.v7.widget.RecyclerView
 
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
 
</RelativeLayout>
 

위코드를 보면 RecycleView 를 이용한것을 볼수 있습니다.

이제 RecycleView 에 들어갈 row xml 을 작성해야 합니다.

이코드는 화면 출력용이기 때문에 입맛에 따라 작성 하시면 되겠습니다.

 

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:orientation="horizontal">
 
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="10">
 
            <ImageView
                android:id="@+id/img"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true" />
 
        </RelativeLayout>
 
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="40">
 
            <TextView
                android:id="@+id/textTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:textStyle="bold" />
 
            <TextView
                android:id="@+id/textArtist"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textTitle"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:textStyle="bold" />
 
        </RelativeLayout>
 
 
    </LinearLayout>
 
</LinearLayout>
 

3. VO 코드 작성

​ 

화면을 만들었으니 , 이제 화면에 출력할 데이터를 담을 객체를 생성해야 합니다.

저는 화면에 앨범을 만드려합니다. 

 

 
package com.example.woong.vo;
 
/**
 * Created by woong on 2015. 1. 20..
 */
public class Album {
 
    private String title;
    private String artist;
    private int image;
 
    public String getTitle() {
        return title;
    }
 
    public void setTitle(String title) {
        this.title = title;
    }
 
    public String getArtist() {
        return artist;
    }
 
    public void setArtist(String artist) {
        this.artist = artist;
    }
 
    public int getImage() {
        return image;
    }
 
    public void setImage(int image) {
        this.image = image;
    }
}
 

여기까지는 기호에 따라 작성 하시면 됩니다.

4. Adapter 코드 작성

위 작성은 ListView와 거의 흡사 했습니다. 

이제부터 가 RecycleView에서 달라진 점을 볼수 있습니다.

 
package com.example.woong.adapter;
 
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
 
import com.example.woong.recyclerview.R;
import com.example.woong.vo.Album;
 
import java.util.List;
 
/**
 * Created by woong on 2015. 1. 20..
 */
public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.ViewHolder> {
 
    private List<Album> albumList;
    private int itemLayout;
 
    /**
     * 생성자
     * @param items
     * @param itemLayout
     */
    public MyRecyclerAdapter(List<Album> items , int itemLayout){
 
        this.albumList = items;
        this.itemLayout = itemLayout;
    }
 
    /**
     * 레이아웃을 만들어서 Holer에 저장
     * @param viewGroup
     * @param viewType
     * @return
     */
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
 
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(itemLayout,viewGroup,false);
        return new ViewHolder(view);
    }
 
    /**
     * listView getView 를 대체
     * 넘겨 받은 데이터를 화면에 출력하는 역할
     * 
     * @param viewHolder
     * @param position
     */
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int position) {
 
       Album item = albumList.get(position);
       viewHolder.textTitle.setText(item.getTitle());
       viewHolder.img.setBackgroundResource(item.getImage());
       viewHolder.itemView.setTag(item);
 
    }
 
    @Override
    public int getItemCount() {
        return albumList.size();
    }
 
    /**
     * 뷰 재활용을 위한 viewHolder
     */
    public static class ViewHolder extends RecyclerView.ViewHolder{
 
        public ImageView img;
        public TextView textTitle;
 
        public ViewHolder(View itemView){
            super(itemView);
 
            img = (ImageView) itemView.findViewById(R.id.imgProfile);
            textTitle = (TextView) itemView.findViewById(R.id.textTitle);
        }
 
    }
}
 

평소에 viewHolder 를 사용하셨으면 눈에 금방 들어 올것 같습니다. 

ViewHolder 를 작성 하고 , 레이아웃 생성후 holder에 저장 , 데이터를 출력 , 이렇게 3부분으로 나뉘어 있습니다.

onBindViewHolder 가 기존의 ListView getView 를 대체 하는것 같습니다. 

여기까지는 이렇게 코드가 분리가 되었고 , ViewHolder 를 강제적으로 사용하게 하여 , 퍼포먼스 상향에 기여 한것 같습니다.

5. Activity 코드 작성

 

package com.example.woong.recyclerview;
 
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
 
import android.support.v7.widget.StaggeredGridLayoutManager;
 
import com.example.woong.adapter.MyRecyclerAdapter;
import com.example.woong.vo.Album;
 
import java.util.ArrayList;
import java.util.List;
 
 
public class MainActivity extends Activity {
 
    private RecyclerView lecyclerView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        initLayout();
        initData();
    }
 
    /**
     * 레이아웃 초기화
     */
    private void initLayout(){
 
        lecyclerView = (RecyclerView)findViewById(R.id.recyclerView);
    }
 
    /**
    * 데이터 초기화
     */
    private void initData(){
 
        List<Album> albumList = new ArrayList<Album>();
 
        for (int i =0; i<20; i ++){
 
            Album album = new Album();
            album.setTitle("어느 멋진 날");
            album.setArtist("정용");
            album.setImage(R.drawable.ic_launcher);
            albumList.add(album);
        }
        
        lecyclerView.setAdapter(new MyRecyclerAdapter(albumList,R.layout.row_album));
        lecyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
        lecyclerView.setItemAnimator(new DefaultItemAnimator());
 
    }
 
}
 

이와 같이 코드를 작성하면 리스트뷰와 같은 화면을 볼수 있습니다.

이렇게 봐서는 리스트뷰와 다를게 하나 없습니다.

하지만 성능상 퍼포먼스가 향상 했고 유연성이 좋아 졌다고 했습니다.

위에서 설명한 옵션을 사용하면 유연성 좋은 액티비티를 만들수 있습니다.

두번째 포스트를 통해서 여러가지 옵션을 사용해 보려 합니다.