Github에 Android 와 관련된 샘플을 업로드할 예정이다.
시리즈 중 1편으로 RecyclerView 와 CardView를 활용한 간단한 리스트 화면을 만들어 봤다.
(https://github.com/kajsss/android-example)
Layout 작성
레이아웃은 RecyclerVIew를 포함하고 있는 메인 페이지와 각 아이템을 그리는 카드뷰 레이아웃 2개가 필요하다.
<activity_main> 에서는 적당한 위치에 RecyclerVeiw 를 위치 시켰다.
<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
tools:context="com.miloapp.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</RelativeLayout>
</LinearLayout>
<item_cardview> 에서는 RecyclerView 안에 그려질 아이템의 레이아웃을 설정한다. 예제에서는 Title과 Description 두개의 TextView로 구성된다.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
card_view:cardCornerRadius="4dp"
card_view:cardBackgroundColor="@color/colorPrimary"
card_view:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"
android:textStyle="bold"
android:textSize="36sp"
tools:text="M"/>
<TextView
android:id="@+id/text_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="15sp"
android:text="I"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
코드 작성
public class MainActivity extends AppCompatActivity {
@BindView(R.id.recycler_view)
RecyclerView mRecyclerView;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
ItemRepository itemRepository = new ItemRepository();
mRecyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
RecyclerViewAdapter recyclerViewAdapter = new RecyclerViewAdapter(getApplicationContext(), itemRepository.getAllItems());
mRecyclerView.setAdapter(recyclerViewAdapter);
}
}Main Activity에서는 RecyclerView를 Binding 하고 RecyclerView 에 LayoutManager 와 Adapter를 셋팅해주는 코드가 필요하다.
RecyclerViewAdapter 에는 화면에 그려줄 ObjectList 를 같이 넘겨줘서 화면에 그리도록 한다.
위 코드에서 itemRepository 에서는 List<Item> 타입을 리턴하게 된다.
@Data
@AllArgsConstructor
public class Item {
String title;
String description;
}
VO 클래스는 lombok annotaiton 을 이용하여 Setter나 Getter를 자동으로 생성하도록 하였다.
public class ItemRepository {
public List<Item> getAllItems(){
return dummyData();
}
private List<Item> dummyData(){
List<Item> dummyList = new ArrayList<>();
dummyList.add(new Item("A","apple"));
dummyList.add(new Item("B","Baggin"));
dummyList.add(new Item("C","Cati"));
dummyList.add(new Item("D","Dadday"));
return dummyList;
}
}추후 확장을 위해서 구현해놨는데 ItemRepository는 단순히 List<Item> 형태를 리턴한다
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolders> {
List<Item> itemList;
private Context context;
public RecyclerViewAdapter(Context context, List<Item> itemList) {
this.itemList = itemList;
this.context = context;
}
@Override
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
View layout = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_cardview, null);
RecyclerViewHolders rcv = new RecyclerViewHolders(layout);
return rcv;
}
@Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {
holder.title.setText(itemList.get(position).getTitle());
holder.description.setText(itemList.get(position).getDescription());
}
@Override
public int getItemCount() {
return this.itemList.size();
}
class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener {
TextView title;
TextView description;
public RecyclerViewHolders(View itemView) {
super(itemView);
itemView.setOnClickListener(this);
title = (TextView) itemView.findViewById(R.id.text_title);
description = (TextView) itemView.findViewById(R.id.text_description);
}
@Override
public void onClick(View view) {
Toast.makeText(view.getContext(), ((TextView) view.findViewById(R.id.text_title)).getText() + "Item Clicked", Toast.LENGTH_SHORT).show();
}
}
}가장 중요한 부분인 RecyclerViewAdapter 부분이다. 전체 소스는 위와 같고 아래에서 좀 더 자세히 설명 하도록 하겠다.
RecyclerView Adapter를 상속 받으면 onCreateViewHolder, onBindViewHolder, getItemCount 를 재정의(Override) 해야 한다.
public RecyclerViewAdapter(Context context, List<Item> itemList) {
this.itemList = itemList;
this.context = context;
}
RecyclerView Adapter의 역할은 RecyclerView에 데이터를 그려주는 역할을 담당한다. 그 역할을 위해서 그릴 대상인 ItemList 를 파라미터로 전달 받았다.
@Override
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
View layout = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_cardview, null);
RecyclerViewHolders rcv = new RecyclerViewHolders(layout);
return rcv;
}
onCreateViewHolder는 데이터를 담을 뷰 홀더를 생성하여 리턴한다. 이때 위에서만들었던 카드뷰 Layout을 inflate 한다.
class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener {
TextView title;
TextView description;
public RecyclerViewHolders(View itemView) {
super(itemView);
itemView.setOnClickListener(this);
title = (TextView) itemView.findViewById(R.id.text_title);
description = (TextView) itemView.findViewById(R.id.text_description);
}
@Override
public void onClick(View view) {
Toast.makeText(view.getContext(), ((TextView) view.findViewById(R.id.text_title)).getText() + "Item Clicked", Toast.LENGTH_SHORT).show();
}
}뷰홀더는 Layout에 있는 Component와 Adapter 를 연결하기 위한 클래스라고 보면 이해가 쉬울 거 같다.
뷰홀더에서 각 아이템을 클릭 했을때 Action을 구현하였다.
@Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {
holder.title.setText(itemList.get(position).getTitle());
holder.description.setText(itemList.get(position).getDescription());
}
onBindViewHolder에서는 전달받은 아이템을 홀더에 값을 셋팅해주는 역할을 수행하게된다.
이때 홀더를 이용하여 값을 셋팅하면 리스트에 보여지게 된다.
@Override
public int getItemCount() {
return this.itemList.size();
}
전체 아이템 갯수를 리턴하도록 한다.
------ 끝 -----
