최신 안드로이드 버전 (P OS이후?) 부터는 List view보다는 Recycler View를 사용하는게

구글에서도 권고되는 사항인데요.

 

Recycler view를 다루는게 매번 헷갈리고 어렵고 힘든것같아서 이참에 뼈대코드도 작성해보고

포스팅하기로 마음먹었습니다.

 

 

바쁘신분들은 아래 링크를 눌러서 소스코드를 바로확인해보시기 바랍니다.

https://github.com/control-man/android-simple-sample/tree/master/recycler_view_simple_exam

 

 

Recycler view 구현 예제 (Cow를 눌러서 Toast 가 출력되고 있음)

 

1. res/layout/activitiy_main.xml 작성

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
        android:id="@+id/rvAnimals"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

Recycler view를 생성해줍니다.

 

2. res/layout/recycler_row.xml 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp"
    android:background="?android:attr/selectableItemBackground">
 
    <TextView
        android:id="@+id/tvAnimalName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20dp"/>
</LinearLayout>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

Recycler view에서 각각의 item에 대한 view를 만들어줍니다.

여기선 LinearLayout안에 Textview한개를 두는 방식으로 배치할 것입니다.

 

 

3. MainActivity.java

MainActivity안에서 inner class인  MyRecyclerViewAdapter 를 정의합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
public static class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {
 
        private List<String> mData;
        private LayoutInflater mInflater;
        private ItemClickListener mClickListener;
 
        // data is passed into the constructor
        MyRecyclerViewAdapter(Context context, List<String> data) { //// todo check
            this.mInflater = LayoutInflater.from(context);
            this.mData = data;
        }
 
        // inflates the row layout from xml when needed /////todo check
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = mInflater.inflate(R.layout.recycler_row, parent, false);
            return new ViewHolder(view);
        }
 
        // binds the data to the TextView in each row
        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            String animal = mData.get(position);
            holder.myTextView.setText(animal);
        }
 
        // total number of rows
        @Override
        public int getItemCount() {
            return mData.size();
        }
 
 
        // stores and recycles views as they are scrolled off screen
        public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
            TextView myTextView;
 
            ViewHolder(View itemView) {
                //todo check
                super(itemView);
                myTextView = itemView.findViewById(R.id.tvAnimalName);
                //todo very important ---- if don't comment it's not ripple effect..........!!!!!!!!!!!!!!!!!!!
                 itemView.setOnClickListener(this);
            }
 
            @Override
            public void onClick(View view) {
                if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
            }
        }
 
        // convenience method for getting data at click position
        String getItem(int id) {
            return mData.get(id);
        }
 
        // allows clicks events to be caught
        void setClickListener(ItemClickListener itemClickListener) {
            this.mClickListener = itemClickListener;
        }
 
        // parent activity will implement this method to respond to click events
        public interface ItemClickListener {
            void onItemClick(View view, int position);
        }
    }
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

어댑터의 멤버필드로는 recycler view의 item을 표시하기 위해 필요한 mData가 있으며,

또한 recycler view의 해당하는 position을 클릭하였을때 응답하기위한 리스너 interface 를 들고있습니다.

 

Adapter내부로 ViewHolder 클래스와 ItemClickListener를 가지고 있습니다.

ViewHolder클래스는 recycler view의 item들을 구성하는 resource를 갖고오기 위해 사용되는 클래스이고

 

 

실제적으로 사용자눈에 보여지기위해 그려지는 부분은 Adpater 클래스의 onBindViewHolder 에서 완성되게 됩니다.

 

 

4.MainActivity.java

아래는 MainActiviity onCreate에서 recycler view를 그려주기위한 생성과정입니다.

Recylcer view를 구성하기위한 item 객체를 준비해야하며,

recycler view의 resource를 찾아와서 layout 설정을 해주고,

adpater를 생성하여 item 객체를 주입시키고, click listener 역시 연결해줍니다.

마지막으로 reycler view에 adpater를 연결 시켜주게되면 recycler view가 출력됨을 확인하실 수 있습니다.

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

        // data to populate the RecyclerView with
        ArrayList<String> animalNames = new ArrayList<>();
        animalNames.add("Horse");
        animalNames.add("Cow");
        animalNames.add("Camel");
        animalNames.add("Sheep");
        animalNames.add("Goat");

        // set up the RecyclerView
        RecyclerView recyclerView = findViewById(R.id.rvAnimals);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        //todo common context가 아닌 this?
        adapter = new MyRecyclerViewAdapter(this, animalNames);
        adapter.setClickListener(new MyRecyclerViewAdapter.ItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(getApplicationContext(), "You clicked " + adapter.getItem(position) + " on row number " + position, Toast.LENGTH_SHORT).show();
            }
        });
        recyclerView.setAdapter(adapter);

    }

 

 

+ Recent posts