RecyclerView #7 - ViewType 동적변경
RecyclerView #1- 구조및 기본 사용법
RecyclerView #2 - 구분선 추가, 아이템간 간격 조절
RecyclerView #3 - 컨텍스트 메뉴 처리
RecyclerView #4 - 아이템 클릭 처리
RecyclerView #5 - 아이템 선택 처리하기
RecyclerView #6 - ItemView를 클래스화 하기
RecyclerView #7 - ViewType 동적변경
아마도 RecyclerView에 대한 마지막 포스트.
#6까지 작성한 샘플을 기반으로 RecyclerView의 레이아웃을 동적으로 변경하는 방법을 알아보겠습니다.
마지막 샘플이니만큼 이번에는 구색을 좀 맞춰보겠습니다.
1. RecyclerView는 도서 목록을 표시합니다.
2. 각각의 아이템은 도서 제목과 저자, 출판사, 그리고 도서의 이미지를 포함합니다.
3. ItemView를 표시하는 방식은 normal과 detail 두가지 방식이 존재합니다
( 이미지 배치와 크기 정도만 다르게 처리하겠습니다.)
4. 구색을 맞추기 위해 자잘한 처리를 보완합니다.
( 아이템 테두리라든가 ... ItemView에 세팅되는 데이터의 class 처리라든가 )
구현 화면을 첨부하는 것이 나머지 내용을 이해하는데 도움이 될듯하여 화면을 첨부하고 시작합니다.
레이아웃 구성하기
normal viewType과 detail viewType을 표시하기 위한 레이아웃을 각각 구성합니다.
list_layout_normal.xml
<LinearLayout 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"
android:background="@drawable/item_selector">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="18dp"
android:text="title" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textStyle="bold"
android:text="저자" />
<TextView
android:id="@+id/author"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6"
android:text="" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textStyle="bold"
android:text="출판사" />
<TextView
android:id="@+id/publisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6" />
</TableRow>
</TableLayout>
</LinearLayout>
<ImageView
android:id="@+id/image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:adjustViewBounds="true"
android:padding="5dp"
tools:srcCompat="@drawable/ic_image" />
</LinearLayout>
list_layout_detail.xml
<LinearLayout 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"
android:background="@drawable/item_selector"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="18dp"
android:text="title" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textStyle="bold"
android:text="저자" />
<TextView
android:id="@+id/author"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:text="" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textStyle="bold"
android:text="출판사" />
<TextView
android:id="@+id/publisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4" />
</TableRow>
</TableLayout>
</LinearLayout>
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="5dp"
tools:srcCompat="@drawable/ic_image" />
</LinearLayout>
ItemView에 바인딩될 데이터 필드를 가지는 클래스를 작성합니다.
Book.java
import android.graphics.Bitmap;
public class Book {
private String title;
private String author;
private String publisher;
private Bitmap bitmap;
public Book(String title, String author, String publisher, Bitmap bitmap) {
this.title = title;
this.author = author;
this.publisher = publisher;
this.bitmap = bitmap;
}
public String getTitle() {
return title;
}
public String getAuthor() {
return author;
}
public String getPublisher() {
return publisher;
}
public Bitmap getBitmap() {
return bitmap;
}
}
하나의 ItemView Class로 두가지 레이아웃 처리하기
기존에 작성했던 ItemView Class는 아래와 같이 ItemView Class 내부에 Inflate할 Layout 리소스가 하드 코딩된 상태입니다.
public class ItemView extends LinearLayout {
TextView textView;
public ItemView(Context context) {
super(context);
LayoutInflater inflate = LayoutInflater.from(context);
View v = inflate.inflate(R.layout.list_item, this, true);
// bind widget
textView = v.findViewById(R.id.textView);
v.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
}
}
이번 예제에서는 사용되는 두 가지 타입의 레이아웃은 위젯의 배치나 크기 외에는 다른 처리가 없으므로
Inflate할 Layout의 리소스를 ItemView의 생성자를 통해 전달하는 형태로 수정하고
동일한 ItemView Class를 통해 두가지 레이아웃을 공통으로 처리하는 방향으로 구현하겠습니다.
대략 아래와 같은 코드로 작성됩니다.
public StdViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
ItemView view = null;
view = new ItemView(mContext, R.layout.list_layout_normal);
StdViewHolder vh = new StdViewHolder(view);
return vh;
}
public class ItemView extends LinearLayout {
public ItemView(Context context, @LayoutRes int resource) {
super(context);
LayoutInflater inflate = LayoutInflater.from(context);
View v = inflate.inflate(resource, this, true);
}사족을 붙이자면,
ViewHolder에 Hold된(?) 레이아웃을 컨트롤하는 구조는 다음과 같은 방법들을 생각해 볼수 있을 것 같습니다.
1) Adapter에서 Inflate하고 Adapter에서 직접 처리하는 방법 (RecyclerView #1)
2) Layout별로 클래스를 구현하여 각각 처리하는 방법 ( RecyclerView #6 )
3) 클래스는 공통으로 사용하되 Layout만 별도로 받는 방법 ( RecyclerView #7)
4) Layout별 공통 처리를 위한 Base Class를 생성하고, 처리상의 차이가 있는 부분만 상속받아 추가하는 방법
등등..
어떤 방법이 '정석'이라고 할수는 없을 듯하고 서로 다른 두가지(혹은 이상의) 레이아웃의 동작을
공통 코드로 처리할 수 있는지의 여부에 따라 결정하면 될것 같습니다.
이제 ViewType에 따라 레이아웃을 적용하는 코드를 구현해 보겠습니다.
우선 두가지 뷰타입에 대한 상수를 정의하고,
public class StdRecyclerAdapter extends RecyclerView.Adapter<StdRecyclerAdapter.StdViewHolder> {
public static final int VIEWTYPE_NORMAL = 0;
public static final int VIEWTYPE_DETAIL = 1;
int mItemViewType;외부에서 뷰타입을 설정할 수 있도록, setItemViewType 메소드를 작성합니다.
public void setItemViewType(int viewType){
mItemViewType = viewType;
}
그리고, 설정된 뷰타입에 따라 해당하는 레이아웃을 inflate한 ItemView를 생성하도록 CreateViewHolder를 변경합니다.
public StdViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
ItemView view = null;
if ( mItemViewType == VIEWTYPE_NORMAL ){
view = new ItemView(mContext, R.layout.list_layout_normal);
Log.d("TEST", "normal view created");
} else {
view = new ItemView(mContext, R.layout.list_layout_detail);
Log.d("TEST", "detail view created");
}
StdViewHolder vh = new StdViewHolder(view);
return vh;
}마지막으로 버튼을 두개 추가한 후, 각 버튼을 클릭했을때 뷰타입을 변경하도록 코드를 작성했습니다.
Button btnNormal = (Button) findViewById(R.id.btnNormal);
btnNormal.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mAdapter.setItemViewType(StdRecyclerAdapter.VIEWTYPE_NORMAL);
}
});
Button btnDetail = (Button) findViewById(R.id.btnDetail);
btnDetail.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mAdapter.setItemViewType(StdRecyclerAdapter.VIEWTYPE_DETAIL);
}
});
동작화면 입니다.
NORMAL VIEW Type 으로 초기 항목들이 표시된 상태에서
[DETAIL VIEW] 버튼을 눌러 detail view로 뷰타입 변경후,
아래로 스크롤 한 화면 입니다.
몇가지 문제점
첫째, VIEWTYPE_NORMAL로 생성된 기존의 뷰가 갱신되지 않는다.
둘째, RecyclerView를 스크롤시, 새로 생성되는 ViewHolder는 VIEWTYPE_DETAIL로 생성되지만
VIEWTYPE_NORMAL타입의 기존 ViewHolder가 여전히 재사용 된다.
해결하려면?
1) 기존에 VIEWTYPE_NORMAL로 생성된 ViewHolder를 제거(remove) 하거나 재사용되지 않도록 하고,
2) 새로 생성되는 ViewHolder를 VIEWTYPE_DETAIL 로 재 생성하도록 해야 한다.
3) ViewType을 설정하는 즉시 화면에 표시된 아이템을 갱신해야 한다.
1)2) 기존에 생성된 ViewHolder를 제거하거나 재사용되지 않도록 처리하기
결론을 먼저 기술하자면, 다시 혹은 신규로 표시될 아이템의 ViewType이 기존의 ViewType과 다름을 알려줌으로써
기존의 ViewHolder를 재사용 하지 않도록 처리하면 됩니다.
뷰타입을 Adapter에게 알려주기
사실 RecyclerView.Adater는 뷰타입을 처리하는 방법을 이미 제공하고 있습니다.
public StdViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
그렇다면 RecyclerView.Adapter는 표시될 아이템의 뷰타입을 어디에서 얻어 오는 것일까요?
해답은 Adapter의 getItemViewType() 메소드 입니다.
@Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}
RecyclerView.Adapter의 getItemViewType() 메소드를 오버라이드 하게 되면 위와 같은 템플릿 코드가 작성됩니다.
코드에서 유추할 수 있듯, 각 아이템별 뷰타입을 요청하고(Adapter 입장에서) 리턴받는 형태로 되어 있습니다.
의도치 않은 동작의 예시로 제공한 위의 이미지에서 보았듯이, RecyclerView는 각기 다른 Layout을 가진 아이템을
표시할 수 있고, 이러한 처리를 위해서는 각 아이템별 뷰타입을 관리해야 할 필요성이 있다는 것입니다.
이번 예제에서는 아이템별이 아니라, 전체 아이템을 특정 뷰타입으로 변경하는 것이므로
더 간단하게 다음과 같이 처리가 가능합니다.
@Override
public int getItemViewType(int position) {
return mItemViewType;
}
그리고 onCreateViewHolder에서는 파라미터로 넘어온 뷰타입을 비교하도록 수정하면 되겠습니다.
public StdViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
ItemView view = null;
// if ( mItemViewType == VIEWTYPE_NORMAL ){
if ( viewType == VIEWTYPE_NORMAL ){
view = new ItemView(mContext, R.layout.list_layout_normal);
} else {
view = new ItemView(mContext, R.layout.list_layout_detail);
}
StdViewHolder vh = new StdViewHolder(view);
return vh;
}여기서 조금 더 정확하게 이해해야 하는 것은 ViewHolder는 뷰타입별로 관리 되며,
뷰타입에 따라 onCreateViewHolder()가 호출될지 onBindViewHolder ()가 달라 질수 있다는 점입니다..
즉, getItemViewType()을 override 하여 기존과 다른 뷰타입을 리턴 함으로써,
기존에 생성된 NORMAL 타입의 ViewHolder가 재사용 되지 않고
새로운 ViewHolder를 생성할 수 있게 된다는 의미 입니다..
(설명이 장황한 이유는 내가 헤깔렸던 부분이기 때문에 어쩔수 없음....)
3) ViewType을 설정하는 즉시 화면에 표시된 아이템을 갱신.
(별것 아닌데 설명하는 이유는 역시나 내가 방황했던 부분이기 때문이다..)
뷰타입을 변경후, 데이터 셋이 변경되었다고 Adapter에게 통지 해주면 됩니다.
#5 에서도 유사한 트릭으로 배경화면의 색상을 변경한 적이 있습니다.
public void setItemViewType(int viewType){
mItemViewType = viewType;
notifyDataSetChanged();
}
뷰타입 변경시, 아이템의 선택 상태 유지는 기존에 작업했던 코드를 통해 그대로 적용됩니다.
스크롤 위치 복원이라던가 하는 부분들이 추가 코드가 필요하겠습니다.
RecyclerView를 사용하면서 궁금했던 부분이 많았던 터라
하나 하나 찾아가며 습득한 내용들을 간단히 정리하고자 했는데,
어쩌다보니 RecyclerView 관련하여 7개의 포스트를 쓰게 되었네요.
(보는 사람은 없지만....)
생각보다 시간이 많이 들어가는 일입니다만,
포스트를 쓰다보면 "구현에 급급해 미쳐 알지 못했던 부분",
"일단 동작하니 원리는 나중에 보자"하고 미루어놨던 부분들을
좀 더 찾아 보고 정리하게 되네요.
소스는 아래 링크에
https://github.com/thirteenrains/stdRecyclerView
