[Example] RecyclerView를 이용한 목록성 데이터 표시

RecyclerView를 이용한 목록성 데이터 표시

 

INDEX

  1. RecyclerView가 표시될 영역에 컴포넌트 배치

  2. RecyclerView에 반복될 Layout 생성( layout.xml )

  3. 한 Row의 데이터를 관리할 객체 생성( Item.java )

  4. 데이터를 매핑할 Adapter 생성( Adapter.java )

 

 

RecyclerView 컴포넌트는 목록성 데이터를 표시하기 위해 사용합니다.

[ReferenceBook]에서 사용하는 Argument 영역을 예시로 만들어 보겠습니다.

 

 

[그림] ReferenceBook - Argument

 

[그림]에서 표의 데이터가 표시되는 영역이 RecyclerView로 구성되어야 하는 부분입니다.

 

1. 화면에서 RecyclerView 표시될 부분에 RecyclerView 컴포넌트를 배치합니다.

Component Tree	XML source-coding

 

2. RecyclerView 컴포넌트를 사용하기 위해서는 XML(UI)와 Adapter-class를 생성해야 합니다.

  - Layout(UI) Design

  - Adapter(Class) 

  - 항목 구조체(Class)

 

Component Tree	XML source-coding

[XML(UI) 생성하기]

 

XML은 여느 화면과 동일하게 구성하면 됩니다.

XML로 구성된 화면이 반복해서 표현된다고 생각하시면 됩니다.

Argument 화면에서는 그리드의 데이터부 3개 컬럼의 정보를 반복해서 표시할 것이기 때문에 위와 같이 3개 컬럼의 데이터 정보로 화면을 구성하였습니다.

 

package com.example.referencebook.Adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.referencebook.Item.InfoArgItem;
import com.example.referencebook.R;

import java.util.ArrayList;

public class InfoArgAdapter extends RecyclerView.Adapter<InfoArgAdapter.ViewHolder> {
    ArrayList<InfoArgItem> items = new ArrayList<InfoArgItem>();

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());

        // 인플레이션을 통해 뷰 객체 만들기
        View itemView = inflater.inflate(R.layout.info_recv_arg, parent, false);

        // 뷰홀더 객체를 생성하면서 뷰 객체를 전달하고 그 뷰홀더 객체를 반환한다.
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        InfoArgItem item = items.get(position);
        holder.setItem(item);
    }

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

    static class ViewHolder extends RecyclerView.ViewHolder {
        TextView txtIArgument;
        TextView txtIDatatype;
        TextView txtIDescription;

        public ViewHolder(View itemView) {
            super(itemView);

            txtIArgument = itemView.findViewById(R.id.txtArg);
            txtIDatatype = itemView.findViewById(R.id.txtArgDatatype);
            txtIDescription = itemView.findViewById(R.id.txtArgDescription);
        }

        public void setItem(InfoArgItem item) {
            txtIArgument.setText(item.getStrIArgument());
            txtIDatatype.setText(item.getStrIDatatype());
            txtIDescription.setText(item.getStrIDescription());
        }
    }

    public void addItem(InfoArgItem item) {
        items.add(item);
    }

    public void setItems(ArrayList<InfoArgItem> items) {
        this.items = items;
    }

    public InfoArgItem getItem(int position) {
        return items.get(position);
    }

    public void setItem(int position, InfoArgItem item) {
        items.set(position, item);
    }
}

[Adapter Calss 생성하기]

 

Adapter는 RecyclerView의 데이터를 관리하는 클래스입니다.

Adapter의 세부정보는 참고자료를 확인하세요.

※ Do it! 안드로이드 앱 프로그래밍 : 리싸이클뷰 만들기  410page

 

package com.example.referencebook.Item;

public class InfoArgItem {
    String strIArgument;
    String strIDatatype;
    String strIDescription;

    public InfoArgItem(String strIArgument, String strIDatatype, String strIDescription) {
        this.strIArgument = strIArgument;
        this.strIDatatype = strIDatatype;
        this.strIDescription = strIDescription;
    }

    public String getStrIArgument() {
        return strIArgument;
    }

    public void setStrIArgument(String strIArgument) {
        this.strIArgument = strIArgument;
    }

    public String getStrIDatatype() {
        return strIDatatype;
    }

    public void setStrIDatatype(String strIDatatype) {
        this.strIDatatype = strIDatatype;
    }

    public String getStrIDescription() {
        return strIDescription;
    }

    public void setStrIDescription(String strIDescription) {
        this.strIDescription = strIDescription;
    }
}

[Row-Data를 구성하는 항목의 구조체]

 

반복할 데이터 영역의 Row-data를 구성하는 항목을 클래스로 생성합니다.

클래스의 생성자와 각 항목의 값을 처리하기 위해 getter와 setter를 생성합니다.

 

3. Activity에서 로드하기

    private void setRecvArg() {
        RecyclerView recyclerView = findViewById(R.id.recvArg);

        // 리싸이클러뷰에 레이아웃 매니저 설정하기
        LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        recyclerView.setLayoutManager(layoutManager);

        InfoArgAdapter infoArgAdapter = new InfoArgAdapter();
        infoArgAdapter.addItem(new InfoArgItem("A", "B", "C"));
        infoArgAdapter.addItem(new InfoArgItem("D", "E", "F"));
        recyclerView.setAdapter(infoArgAdapter);
    }

[Activity에서 RecyclerView에 데이터 세팅]

 

구조체 클래스를 생성하고 Adapter에 매핑된 XML에 데이터를 전달합니다.

실제 프로그램에서는 DB를 조회하고, 조회된 결과를 전달하는 형태가 될 것입니다.

 

 

※ 참고자료

  - https://sgpassion.tistory.com/522

[Android] RecyclerView - <작업중-이미지>

 

The End.