안드로이드 리사이클러뷰(RecyclerView)를 이해해보자!!

RecyclerView 란??

- 공식 문서 버전 

RecyclerView 위젯은 ListView의 더욱 향상되고 유연해진 버전입니다. 이 위젯은 한정된 수의 뷰를 유지함으로써 매우 효율적으로 스크롤할 수 있는 큰 데이터 집합을 표시하기 위한 컨테이너입니다. 사용자 작업 또는 네트워크 이벤트에 따라 런타임에 요소가 변경되는 데이터 컬렉션이 있는 경우 RecyclerView 위젯을 사용하세요.

- 쉬운 이해 버전

RecyclerView 위젯은 ListView의 더욱 향상되고 유연해진 버전입니다. 이 위젯은 화면에 표시할 만한 갯수의 리스트 아이템을 만들고 이 갯수를 유지함과 동시에 스크롤의 이벤트에 따라 올리면 상단 뷰가 다시 하단으로 이동하여 안의 컨텐츠만 바뀌고 재사용 되도록 설계된 위젯 입니다.

아래 그림을 보도록 하죠

(사진 출저 : 직접 제작)

위의 이미지 보는바와 같이 기본적으로 화면사이즈에 맞게 6개를 자동적으로 생성하고 스크롤을 올릴때 6다음 7,8,9 식으로 계속해서 뷰를 생성하는것이 아닌 1,2 를 6밑으로 다시 재활용(Recycle)음 함으로써 최적의 스크롤을 지원해주는 View입니다. 스크롤을 내릴때도 1위로 다시 6이 올라가는 형태로 진행되지요.

전체적으로 설명드린 RecyclerView는 ViewHolder패턴 즉 위에서 정리한대로 뷰를 재사용하는 패턴을 이용하는 리스트 뷰입니다. 

-그래서 어떻게 쓰는건데?? 

리사이클러뷰를 사용하기 위해선 리사이클러뷰가 어떤식으로 이루어지는지 한번 알아볼 필요가 있지요.

(사진 출저 : 구글 공식 문서)

리사이클러뷰는 크게 Adapter클래스, LayoutManager클래스,데이터로 이루어져 있습니다. 데이터는 우리가 리스트로 나타내고 싶은 데이터를 지칭하고 레이아웃 매니저는 데이터를 세로로 스크롤형태로 뿌려줄 것인지,가로 스크롤 형태로 뿌려줄것인지, 그리드 형태로 뿌려줄 것인지를 결정하는 클래스 입니다. 앞의 두가지는 상대적으로 코드도 간단하고 이해도 쉬우나 가장 아주 가장 

이해하기 어려운 어댑터 클래스를 좀더 심층적으로 알아보겠습니다.

아래는 어댑터 클래스와 xml 레이아웃의 기본 구조입니다.

(사진 출저 : 직접 제작)

어댑터 클래스는 쉽게 설명하자면 데이터를 리스트로 보여주기위한 준비작업을 하는 아이입니다. 이 준비작업에는 

첫째

우리가 만든 리스트 아이템의 Xml Layout을 뷰홀더로서 세팅하는것!! ------ onCreateViewHolder

둘째

뷰홀더 패턴 방식 즉 뷰의 재활용을 할때 데이터를 알맞게 새로 세팅해주는 역할을 하는것!!! ----- onBindViewHolder

이렇게 두가지 일을 진행합니다. 더 많이 있습니다만 이 두가지만 이해하면 나머지는 쉽게 접근이 가능하니 생략하겠습니다.

-서두가 길다!!! 코드로 보자!!!!!!

xml 액티비티 코드부터 시작해봅시다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.edge.arraylistapplication.MainActivity">


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

위에 처럼 간단하게 액티비티 레이아웃에 리사이클러뷰를 만들어 줍시다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_height="wrap_content">
        <TextView
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:id="@+id/song"
            android:layout_marginStart="30dp"
            tools:text="Autumn Leaves"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/darker_gray"
            android:layout_marginTop="5dp"
            android:id="@+id/singer"
            android:layout_marginStart="30dp"
            android:layout_marginBottom="10dp"
            tools:text="Eric Clapton"/>
    </LinearLayout>
    <View
        android:layout_width="0dp"
        android:layout_height="10dp"
        android:layout_weight="1"/>
    <ImageView
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:tint="@color/colorPrimary"
        android:layout_gravity="center_vertical"
        android:layout_marginEnd="20dp"
        android:src="@drawable/three_dot"/>
</LinearLayout>

위에 처럼 리사이클러뷰의 아이템 레이아웃을 만들어 줍시다. @three_dot는 메뉴 보통 점세개짜리 아무거나 넣으시면되요.

전 에릭 클랩튼의 Autumn Leaves라는 노래를 참좋아합니다 허허허. 위와 같은 아이템을 30개 정도 똑같이 만들고 세로 리스트로 뿌려주는 코드를 작성해 볼게요!!

Adapter코드를 작성해보자!!!!

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
    Context context;
    ArrayList<SingModel> singModels = new ArrayList<>();

    public Adapter(Context context, ArrayList<SingModel> singModels) {
        this.context = context;
        this.singModels = singModels;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.recycler_item,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        SingModel singModel = singModels.get(position);
        holder.song.setText(singModel.getSong());
        holder.singer.setText(singModel.getSinger());
    }

    @Override
    public int getItemCount() {
        return singModels.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder{
        TextView song,singer;
        public ViewHolder(View itemView) {
            super(itemView);
            song = itemView.findViewById(R.id.song);
            singer = itemView.findViewById(R.id.singer);
        }
    }
}

위와 같이 어댑터 클래스를 만들어줍니다. SingModel클래스는 아래 다시 첨부하도록 하겠습니다.

위 코드를 보면 onCreateViewHolder 에서 뷰클래스를 생성하는데 이때 아이템 레이아웃의 xml코드를 가져와서 세팅해줍니다. 그리고  뷰홀더 클래스에 만들어준 뷰를 넘겨주고 뷰의 각각의 텍스트뷰를 초기화를 해줍니다 (dataBinding을 배우면 이작업이 간소화 되지만 개념 이해상 어려우므로 패스하겠습니다.) 

그리고 나서 onBindViewHolder에서 데이터에서 가수이름과 노래제목을 가져와서 각각 텍스트뷰의 세팅해주는 작업을 하지요. 앞서 설명드린 개념이 살짝 이해가실겁니다.  이렇게 어댑터 클래스를 만들어준뒤

대망의 Activity의 리사이클러뷰에 어댑터를 세팅해보자!!!!

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    Adapter adapter;
    ArrayList<SingModel> singModels = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recycler);
        setData();
        setRecyclerView();
    }
    void setRecyclerView(){
        LinearLayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        adapter = new Adapter(getApplicationContext(),singModels);
        recyclerView.setAdapter(adapter);
    }
    void setData(){
        SingModel AA = new SingModel("Eric Clapton","Autumn Leaves");
        singModels.add(AA);
        singModels.add(AA);
        singModels.add(AA);
        singModels.add(AA);
    }

}

액티비티에서 리스트에 뿌려줄 데이터를 세팅하고 리사이클러뷰의 레이아웃 매니저, 어댑터를 세팅해줍니다.

설명을 생략했던 레이아웃 매니저를 보면 리니어레이이아웃 매니저 즉 순차적 배열을 가진 레이아웃인데 setOrientation에서 세로형으로 세팅을합니다. 즉 세로형 순차적 배열을 가진 일반적인 세로형 리스트를 세팅해주는것이지요. 

레이아웃 매니저 세팅을 마치면 어댑터 클래스를 초기화하고 리사이클러뷰의 setAdapter 메소드를 이용해서 세팅해주면 끝!!!!

이상으로 리사이클러뷰의 설명을 마치겠습니다만 이 내용은 리사이클러뷰에 대해서 처음 개념을 잡으신 분들을 위한 포스팅 입니다. 더 깊고 좋은 내용들이 있습니다만은 여기서는 잠시 생략하고 추후에 기회가 되면 설명드리도록 하겠습니다. 

ps.

비전공자 안드로이드 질문방을 운영중입니다. 톡방링크 를 통해 들어오시면 못다 설명드린내용들 자세히 설명드릴게요!!! 

이깟 블로그보다 직접만나서 배워보고 싶으시면 말리지 않습니다. 어서오세요 

마지막으로....제가 만든 앱 입니다. 리뷰... 하나가 생명을 살립니다. 감사합니다.