안드로이드 리사이클러뷰 사용 예제. (Android RecyclerView Example)
1. 안드로이드 리사이클러뷰(RecyclerView) 예제.
[안드로이드 리사이클러뷰 기본 사용법. (Android RecyclerView)]에서 설명한 리사이클러뷰의 기본 사용법에 이어, 여기서는 아주 조금 더 복잡한 예제를 통해 리사이클러뷰를 사용하는 방법에 대해 살펴보겠습니다.
예제에서 표시할 화면은 [안드로이드 커스텀 리스트뷰 만드는 방법. (Android Custom ListView)]에서 만든 화면과 유사합니다.
본문의 내용과 [안드로이드 커스텀 리스트뷰 만드는 방법. (Android Custom ListView)]의 내용을 같이 살펴보시면, 리사이클러뷰와 리스트뷰의 구현 과정을 비교해보실 수 있습니다.
2. 리사이클러뷰를 사용하기 위한 기본 절차.
리사이클러뷰를 어떤 용도로 사용할지, 어떤 형태로 표시할지에 따라 그 구현 과정의 세부적인 내용와 코드의 복잡도는 달라지겠지만, 일반적으로 아래와 같은 절차를 통해 리사이클러뷰를 사용할 수 있습니다. (참고로, 아래 순서는 리사이클러뷰 사용 과정을 쉽게 설명하기 위해 정리한 것 일 뿐, 반드시 그대로 따를 필요는 없습니다. 각 단계는 경우에 따라 변경 또는 생략해도 무방합니다.)
3. 리사이클러뷰 사용 예제 앱 작성하기.
그럼 지금부터, 리사이클러뷰 사용 예제를 통해 앞서 구성한 아이템뷰를 표시하는 앱을 작성해보도록 하겠습니다.
참고로 아래의 예제는, 안드로이드 스튜디오 프로젝트 생성 단계에서 "Basic Activity"를 선택하여 생성된 코드를 기반으로 작성되었습니다.
3.1 리사이클러뷰가 표시될 위치 결정.
가장 먼저 할 일은, 리사이클러뷰가 표시될 위치를 결정하는 것인데요, 예제에서는 리사이클러뷰를 메인액티비티에 표시합니다.
[STEP-1] "content_main.xml" - 메인액티비티 레이아웃 리소스 XML에 리사이클러뷰 추가.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/activity_main">
<android.support.v7.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/recycler1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>3.2 리사이클러뷰 아이템 배치 형태 결정.
리사이클러뷰에 표시될 아이템을 어떤 형태로 배치할 것인지 결정해야 하는데요, 여기서 선택된 결과에 따라 어떤 레이아웃매니저(LayoutManager)를 사용할지가 결정됩니다.
그런데 사실 이 단계는, 보통 앱 설계 과정에서 리사이클러뷰를 사용하기로 결정하는 시점에 이미 결정됩니다. 아이템 뷰가 어떻게 배치될 것인지, 어떤 요소를 사용할 것인지는 UI 화면 설계 과정에서 미리 고려되는게 일반적입니다.
예제에서는 세로 방향으로 아이템을 나열하므로, 리니어레이아웃매니저(LinearLayoutManager)를 사용합니다.
[STEP-2] 레이아웃매니저(LayoutManager) 결정.
3.3 아이템 뷰 레이아웃 구성.
다음 단계는 리사이클러뷰 각 아이템에 표시될 아이템 뷰의 레이아웃을 작성하는 단계입니다.
[STEP-3] "res/layout/recycler_item.xml" - 아이템 뷰 레이아웃 구성.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/icon"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" /> />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/title"
android:textSize="24dp"
android:textColor="#000000"
app:layout_constraintLeft_toRightOf="@id/icon"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/desc"
android:textSize="16dp"
android:textColor="#666666"
app:layout_constraintLeft_toRightOf="@id/icon"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/title" />
</android.support.constraint.ConstraintLayout>3.4 아이템 데이터 클래스 정의.
아이템 뷰 레이아웃을 구성했으니, 아이템뷰에 표시될 데이터를 저장할 클래스를 정의합니다.
아이템 뷰는 하나의 이미지뷰와 두 개의 텍스트뷰로 구성됩니다. 그래서 아이템 데이터 클래스에는 이미지뷰를 위한 하나의 Drawable 변수와 텍스트뷰에 표시될 문자열을 저장하는 두 개의 String 변수를 정의합니다.
[STEP-4] "RecyclerItem.java" - 리사이클러뷰 아이템 데이터 클래스 정의.
import android.graphics.drawable.Drawable;
public class ListViewItem {
private Drawable iconDrawable ;
private String titleStr ;
private String descStr ;
public void setIcon(Drawable icon) {
iconDrawable = icon ;
}
public void setTitle(String title) {
titleStr = title ;
}
public void setDesc(String desc) {
descStr = desc ;
}
public Drawable getIcon() {
return this.iconDrawable ;
}
public String getTitle() {
return this.titleStr ;
}
public String getDesc() {
return this.descStr ;
}
}3.5 어댑터 상속 및 구현.
이제 리사이클러뷰 어댑터(RecyclerView.Adapter)를 상속받은 클래스를 추가하고, 필수 구현 메서드를 오버라이드합니다.
[안드로이드 리사이클러뷰 기본 사용법 - 3.4 리사이클러뷰 어댑터 구현]에서 설명했듯이, 리사이클러뷰 어댑터를 구현할 때는 아래 세 개의 메서드를 오버라이드 해야 합니다.
- onCreateViewHolder() : 뷰홀더 객체 생성.
- onBindViewHolder() : 데이터를 뷰홀더에 바인딩.
- getItemCount() : 전체 아이템 갯수 리턴.
[STEP-5] "RecyclerImageTextAdapter.java" - 어댑터 상속 및 구현.
public class RecyclerImageTextAdapter extends RecyclerView.Adapter<RecyclerImageTextAdapter.ViewHolder> {
private ArrayList<RecyclerItem> mData = null ;
// 생성자에서 데이터 리스트 객체를 전달받음.
RecyclerImageTextAdapter(ArrayList<RecyclerItem> list) {
mData = list ;
}
// onCreateViewHolder() - 아이템 뷰를 위한 뷰홀더 객체 생성하여 리턴.
@Override
public RecyclerImageTextAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
Context context = parent.getContext() ;
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) ;
View view = inflater.inflate(R.layout.recycler_item, parent, false) ;
RecyclerImageTextAdapter.ViewHolder vh = new RecyclerImageTextAdapter.ViewHolder(view) ;
return vh ;
}
// onBindViewHolder() - position에 해당하는 데이터를 뷰홀더의 아이템뷰에 표시.
@Override
public void onBindViewHolder(RecyclerImageTextAdapter.ViewHolder holder, int position) {
RecyclerItem item = mData.get(position) ;
holder.icon.setImageDrawable(item.getIcon()) ;
holder.title.setText(item.getTitle()) ;
holder.desc.setText(item.getDesc()) ;
}
// getItemCount() - 전체 데이터 갯수 리턴.
@Override
public int getItemCount() {
return mData.size() ;
}
}3.6 뷰홀더 상속 및 구현.
앞선 단계에서 어댑터를 구현할 때, 각 오버라이드 메서드에서 참조한 뷰홀더(RecyclerImageTextAdapter.ViewHolder) 클래스를 작성합니다.
[STEP-6] "RecyclerImageTextAdapter.java" - 뷰홀더 상속 및 구현.
public class RecyclerImageTextAdapter extends RecyclerView.Adapter<RecyclerImageTextAdapter.ViewHolder> {
// ... 코드 계속
// 아이템 뷰를 저장하는 뷰홀더 클래스.
public class ViewHolder extends RecyclerView.ViewHolder {
ImageView icon ;
TextView title ;
TextView desc ;
ViewHolder(View itemView) {
super(itemView) ;
// 뷰 객체에 대한 참조. (hold strong reference)
icon = itemView.findViewById(R.id.icon) ;
title = itemView.findViewById(R.id.title) ;
desc = itemView.findViewById(R.id.desc) ;
}
}
}3.7 어댑터 생성 및 지정.
자, 이제 어댑터와 뷰홀더 작성을 완료했으니, 어댑터 인스턴스를 하나 만든 다음, 리사이클러뷰 참조를 통해 생성된 인스턴스를 지정하겠습니다.
[STEP-7] "MainActivity.java" - 어댑터 생성 및 지정.
public class MainActivity extends AppCompatActivity {
RecyclerView mRecyclerView = null ;
RecyclerImageTextAdapter mAdapter = null ;
ArrayList<RecyclerItem> mList = new ArrayList<RecyclerItem>();
@Override
protected void onCreate(Bundle savedInstanceState) {
/// 코드 계속 ...
mRecyclerView = findViewById(R.id.recycler1) ;
// 리사이클러뷰에 SimpleTextAdapter 객체 지정.
mAdapter = new RecyclerImageTextAdapter(mList) ;
mRecyclerView.setAdapter(mAdapter) ;
/// ... 코드 계속.
}
}3.8 레이아웃매니저 생성 및 지정.
앞서 "3.2 리사이클러뷰 아이템 배치 형태 결정." 단계에서 결정한대로, 리사이클러뷰 아이템들을 세로 방향으로 배치하기 위해 LinearLayoutManager을 사용합니다. [안드로이드 리사이클러뷰 기본 사용법 - 3.5 리사이클러뷰에 어댑터와 레이아웃매니저 지정하기.]에서 설명했듯이, LinearLayoutManager 인스턴스를 만들 때 orientation에 대한 파라미터를 지정하지 않으면, orientation이 "VERTICAL"로 지정됩니다.
[STEP-8] "MainActivity.java" - LinearLayoutManager 생성 및 지정.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
/// 코드 계속 ...
// 리사이클러뷰에 LinearLayoutManager 지정. (vertical)
recyclerView.setLayoutManager(new LinearLayoutManager(this)) ;
/// ... 코드 계속
}
}3.9 데이터 추가 및 아이템 표시.
마지막으로, 리사이클러뷰에 표시될 아이템 데이터를 추가하여 화면에 표시하도록 만듭니다.
일단 [안드로이드 커스텀 리스트뷰 만드는 방법. (Android Custom ListView)] 예제와 동일하게 몇 개의 이미지 파일을 "/res/drawable/"에 추가합니다.
그리고 MainActivity 클래스에 addItem() 이라는 메서드를 추가하고, 리사이클러뷰의 초기화가 끝난 후에 호출합니다. 그리고 마지막으로 어댑터의 notifyDataSetChanged() 메서드를 호출하여 리사이클러뷰에 아이템이 표시되게 만듭니다.
[STEP-9] "MainActivity.java" - 데이터 추가 및 아이템 표시.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
/// 코드 계속 ...
// 아이템 추가.
addItem(getDrawable(R.drawable.ic_account_box_black_36dp),
"Box", "Account Box Black 36dp") ;
// 두 번째 아이템 추가.
addItem(getDrawable(R.drawable.ic_account_circle_black_36dp),
"Circle", "Account Circle Black 36dp") ;
// 세 번째 아이템 추가.
addItem(getDrawable(R.drawable.ic_assignment_ind_black_36dp),
"Ind", "Assignment Ind Black 36dp") ;
adapter.notifyDataSetChanged() ;
}
public void addItem(Drawable icon, String title, String desc) {
RecyclerItem item = new RecyclerItem();
item.setIcon(icon);
item.setTitle(title);
item.setDesc(desc);
mList.add(item);
}
}여기까지, 모든 구현 과정이 완료되었습니다.
4. 실행 화면.
예제를 빌드하고 실행하면, 아래 그림과 같은 실행 화면을 확인할 수 있습니다.
5. 참고.
- 개발자를 위한 레시피 - 리사이클러뷰 관련 항목
- [안드로이드 리사이클러뷰 기본 사용법. (Android RecyclerView)] 내용을 참고하세요.
- 개발자를 위한 레시피 - 리스트뷰.
- [안드로이드 리스트뷰 기본 사용법] 내용을 참고하세요.
- [안드로이드 커스텀 리스트뷰 만드는 방법] 내용을 참고하세요.
- RecyclerView에 대한 자세한 도움말.
- [안드로이드 개발 가이드. Create a List with RecyclerView] 내용을 참고하세요.
- [안드로이드 개발 참조문서. RecyclerView] 내용을 참고하세요.
- [안드로이드 개발 참조문서. RecyclerView.Adapter] 내용을 참고하세요.
- [안드로이드 개발 참조문서. RecyclerView.LayoutManager] 내용을 참고하세요.
- [안드로이드 개발 참조문서. LinearLayoutManager] 내용을 참고하세요.
- [안드로이드 개발 참조문서. RecyclerView.ViewHolder] 내용을 참고하세요.
.END.
'ANDROID 프로그래밍 > RECYCLERVIEW' 카테고리의 다른 글
| 리사이클러뷰 아이템 클릭 이벤트 처리. (RecyclerView Item Click Event) (58) | 2019.06.11 |
|---|---|
| 안드로이드 리사이클러뷰 기본 사용법. (Android RecyclerView) (63) | 2019.03.13 |