[안드로이드/Android] RecyclerView 사용하기(1)

기존의 ListView는 구조적인 문제로 커스터마이징 하기에 많은 제약이 따랐고 성능 관리에도 어려움이 많았습니다. 이런 ListView의 고질적인 문제들을 해결하기 위해 탄생한 것이 바로 RecyclerView입니다. RecyclerView는 개발자가 더 다양한 형태로 커스터마이징 할 수 있도록 유연하고 성능에 더 중점을 두어 만들어졌습니다.

좋은 것이 나왔으니 한번 써봐야겠죠? 간단한 예제를 통해서 RecyclerView의 사용 방법에 대해 알아보겠습니다.

1. 라이브러리 추가

먼저 gradle에 라이브러리를 추가해줍니다.

dependencies {
    implementation 'com.android.support:recyclerview-v7:27.1.1'
}

2. activity_main.xml

ReyclerView를 출력한 메인 레이아웃을 작성합니다.

<?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:background="@color/white"
    android:orientation="vertical">

    <include
        android:id="@+id/toolbar"
        layout="@layout/layout_toolbar_main" />

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

</LinearLayout>

3. item_main.xml

RecyclerView를 구성할 아이템 레이아웃을 작성합니다.

<?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="wrap_content"
    android:background="@color/white"
    android:orientation="vertical"
    android:padding="@dimen/padding_20">

    <TextView
        android:id="@+id/textTitle1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/recycler_view_example1"
        android:textColor="@color/text_black"
        android:textSize="@dimen/text_medium_18"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textTitle2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_5"
        android:text="@string/recycler_view_example2"
        android:textColor="@color/text_black"
        android:textSize="@dimen/text_small_14" />
</LinearLayout>

4. MainItem.java

RecyclerView를 구성할 아이템의 데이터를 담을 객체를 생성합니다.

public class MainItem {
    private String title1;
    private String title2;

    public MainItem(String title1, String title2) {
        this.setTitle1(title1);
        this.setTitle2(title2);
    }

    public String getTitle1() {
        return title1;
    }

    public void setTitle1(String title1) {
        this.title1 = title1;
    }

    public String getTitle2() {
        return title2;
    }

    public void setTitle2(String title2) {
        this.title2 = title2;
    }
}

5. MainAdapter.java

아이템 데이터를 RecyclerView와 연결해 줄 Adapter를 생성합니다.

public class MainAdapter extends RecyclerView.Adapter<MainAdapter.ItemViewHolder> {
    private ArrayList<MainItem> mItems;

    public MainAdapter(ArrayList<MainItem> items) {
        mItems = items;
    }

    // 뷰 홀더 생성해 아이템 레이아웃을 저장합니다.
    @Override
    public ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_main, 
                parent, false);
        return new ItemViewHolder(v);
    }

    // ListView의 getView와 비슷합니다.
    // 데이터를 각각 해당하는 뷰 홀더와 포지션에 넘겨주는 역할을 합니다.
    @Override
    public void onBindViewHolder(ItemViewHolder holder, int position) {
        holder.textTitle1.setText(mItems.get(position).getTitle1());
        holder.textTitle2.setText(mItems.get(position).getTitle2());
    }

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

    // 뷰 재활용을 위한 뷰 홀더
    class ItemViewHolder extends RecyclerView.ViewHolder {
        private TextView textTitle1;
        private TextView textTitle2;

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

            textTitle1 = (TextView) itemView.findViewById(R.id.textTitle1);
            textTitle2 = (TextView) itemView.findViewById(R.id.textTitle2);
        }
    }
}

6. MainActivity.java

이제 마지막으로 RecyclerView를 이용해 화면에 리스트를 출력할 Activity를 작성합니다.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);

        // RecyclerView를 구성할 데이터를 생성합니다.
        ArrayList<MainItem> mainItems = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            MainItem mainItem = new MainItem("Title", "Subtitle");
            mainItems.add(mainItem);
        }

        // 각 Item 들이 RecyclerView 의 전체 크기를 변경하지 않는 다면
        // setHasFixedSize() 함수를 사용해서 성능을 개선할 수 있습니다.
        // 변경될 가능성이 있다면 false 로 , 없다면 true를 설정해주세요.
        recyclerView.setHasFixedSize(true);

        // RecyclerView에 Adapter를 설정해줍니다.
        MainAdapter mainAdapter = new MainAdapter(mainItems);
        recyclerView.setAdapter(mainAdapter);

        // 다양한 LayoutManager 가 있습니다. 원하시는 방법을 선택해주세요.
        // 지그재그형의 그리드 형식
        //mainBinding.recyclerView.setLayoutManager(
        // new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
        // 그리드 형식
        //mainBinding.recyclerView.setLayoutManager(new GridLayoutManager(this,4));
        // 가로 또는 세로 스크롤 목록 형식
        recyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this));
    }
}

7. 결과

다음 관련 글

[안드로이드/Android] RecyclerView 사용하기(2) - Add dividers to RecyclerView

[안드로이드/Android] RecyclerView 사용하기(3) - Add left and right margin to dividers

[안드로이드/Android] RecyclerView 사용하기(4) - Add header and footer layouts