[부스트코스] 안드로이드 프로그래밍 25 - RecyclerView

리사이클러뷰는 화면을 세로로 스크롤하는 방법입니다.

뷰페이저를 이용해서도 세로로 스크롤할 수 있는 화면을 만들 수 있지만 리사이클러뷰를 활용하면 더 쉽게 만들 수 있습니다. 또한 리사이클러뷰는 상하 스크롤도 지원합니다. 

 

리사이클러뷰는 뷰가 캐시될 수 있는 방법으로, 리스트뷰 대신 뷰홀더를 사용합니다.

뷰홀더란 뷰를 담고 있는 것으로, 뷰홀더 안의 뷰는 각각의 아이템을 보여주기 위한 객체로 사용됩니다.

 

리사이클러뷰도 선택 위젯이기 때문에 어댑터가 필요합니다.

뷰를 인플레이션하면서 뷰홀더에 바로 넣어줄 수 있기 때문에
레이아웃 xml파일만 하나 정의를 하고 그것을 가지고 어댑터를 만들면서 바로 인플레이션 하는 방법으로 만들 수 있습니다.

 

그렇게 하기 위해서는 데이터를 담아놓을 객체와 xml파일이 필요합니다.

데이터를 담을 객체로 SingerItem.java, xml 레이아웃으로 singer_item.xml를 정의했습니다.

public class SingerItem {

    String name;
    String mobile;

    public SingerItem(String name, String mobile) {
        this.name = name;
        this.mobile = mobile;
    }

    public String getName() {
        return name;
    }

    public String getMobile() {
        return mobile;
    }

}

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="이름"
        android:textColor="#0000FF"
        android:textSize="30dp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="전화번호"
        android:textColor="#00FFFF"
        android:textSize="20dp" />
</LinearLayout>

그리고 어댑터를 구성해야 하는데요,

 

public class SingerAdapter extends RecyclerView.Adapter<SingerAdapter.ViewHolder> {

어댑터로 사용될 SingerAdapter는 RecyclerView.Adapter<SingerAdapter.ViewHolder>를 상속합니다.

그러려면 ViewHolder도 이 소스 파일 안에서 정의해주어야겠죠?

 

static class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;
        TextView textView2;

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

            textView = (TextView) itemView.findViewById(R.id.textView);
            textView2 = (TextView) itemView.findViewById(R.id.textView2);
        }

        public void setItem(SingerItem item) {
            textView.setText(item.getName());
            textView2.setText(item.getMobile());
        }

    }

ViewHolder를 static class로 정의했습니다.

 

뷰홀더는 각각의 아이템을 위한 뷰를 담을 수 있습다.

코드를 보시면 뷰가 ViewHolder의 생성자에 전달되는데요, 두 개의 아이템이, ViewHolder의 생성자에 인자로 전달된 뷰에 들어가 있기 때문에(이 앱에서 하나의 뷰는 두 개의 아이템을 갖고, 그 뷰들로 뷰홀더를 구성하기 때문에)
두 개의 아이템을 가지고 데이터를 설정하는 등의 작업을 생성자 안에서 할 수 있습니다.

 

데이터 설정을 위해서는 리스트뷰를 만들 때 화면 레이아웃과 각각의 아이템을 위한 데이터와 매칭을 시켜주는 것처럼뷰와 실제 데이터를 매칭할 필요가 있습니다.  
그래서텍스트뷰의 내용을 아이템에서 불러와 설정할 수 있는 setItem 메소드를 정의했습니다. 이 안에서 setText메소드를 호출하여 텍스트뷰의 내용을 설정합니다.

 

어댑터에서는 세 개의 메소드를 반드시 구현해야 하는데, 각각 getItemCount, onCreateViewHolder, onBindViewHolder입니다. Generate - implement methods에서 쉽게 찾을 수 있습니다.

 

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

getItemCount는 말 그대로 아이템의 개수를 반환하는 메소드입니다. items.size를 리턴합니다.

    ArrayList<SingerItem> items = new ArrayList<SingerItem>();

items는 SingerItem을 담는 ArrayList입니다.

 

    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       LayoutInflater inflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
       View itemView = inflater.inflate(R.layout.singer_item, parent, false);

       return new ViewHolder(itemView);
    }

onCreateViewHolder는 뷰홀더가 만들어지는 시점에 자동으로 호출되는 메소드입니다.
뷰홀더가 재사용될 수 있는 상태라면 이 메소드가 호출되지 않기 때문에, 이 메소드에서 인플레이션으로 뷰홀더 객체를 새로 생성해줍니다.

두번째 라인의 inflate 메소드에 들어간 parent는 각각의 아이템을 위해서 정의한 xml 레이아웃의 최상위 레이아웃입니다.

뷰(itemView)를 담고 있는 뷰홀더 객체를 만들어서 리턴합니다.

 

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

onBindViewHolder는 뷰홀더가 바인딩될 시점에 호출되는 메소드입니다.

바인딩은 각각의 아이템을 위한 뷰의 xml레이아웃과 뷰의 데이터가 서로 결합되는 경우를 의미합니다.

items.get(position)은 리싸이클러뷰에서 몇번째 뷰가 보여야 되는 시점인지를 알려주는 메소드입니다. 
SingerItem 객체 item에 그것을 저장한 다음 홀더에 넣어주면 이 뷰홀더가 데이터를 알 수 있습니다.
그러면 뷰 홀더에 들어가 있는 뷰에 데이터를 설정해줄 수 있게 됩니다.

 

이제 어댑터 설정을 마쳤으니 메인 액티비티에서 그것을 사용해보겠습니다.

 

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;

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

        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        recyclerView.setLayoutManager(layoutManager);

        SingerAdapter adapter = new SingerAdapter(getApplicationContext());

        adapter.addItem(new SingerItem("레드벨벳", "010-1111-2222"));
        adapter.addItem(new SingerItem("우주소녀", "010-1111-2333"));
        adapter.addItem(new SingerItem("로켓펀치", "010-1111-2444"));

        recyclerView.setAdapter(adapter);


    }
}

RecyclerView 객체를 선언하고 onCreate 안에서 findViewById로 연결해줍니다.

LayoutManager에 context, 방향을 인자로 전달하고, 마지막 인자로는 아이템이 보이는 방향에 대한 인자를 넣습니다.

true로 설정하면 새로운 아이템이 앞에 추가됩니다. false는 반대의 경우가 되겠죠.

예를 들어 채팅 앱의 경우, 아래쪽으로 대화가 추가되며 스크롤이 올라가는 경우가 있습니다. 바로 이런 경우가 false가 되는 것입니다.

그리고 어댑터 정의 후 아이템을 세 가지를 넣었습니다.

activity_main이 위와 같이 한 개의 버튼, RecyclerView로 이루어진 레이아웃일 때, 빌드된 앱에서 좌우 스크롤이 정상 작동하면 올바르게 만들어진 것입니다.