[안드로이드/android] 리사이클러뷰(RecyclerView)로 메모장 만들기

리사이클러뷰(RecyclerView)는 "사용자가 관리하는 많은 수의 데이터 집합을 개별 아이템 단위로 구성하여 화면에 출력하는 뷰그룹이며, 제한된 영역 내에서 유연하게 표시할 수 있도록 만들어 주는 위젯"이다.

 

리사이클러뷰(RecyclerView)는 리스트뷰와 유사한 기능을 가지고 있는데 유연함과 성능이 더해졌다. 구글에서도 리스트UI를 구성할 때 리스트뷰보단 리사이클러뷰를 권고한다.

 

리사이클러뷰(RecyclerView) 워크플로우

1. 메인액티비티에 리사이클러뷰 추가
2. 아이템 뷰 레이아웃 추가
3. 리사이클러뷰 어댑터 구현
4. 어댑터, 레이아웃 매니저 지정

리사이클러뷰(RecyclerView) 구성요소

*1. 리사이클러뷰 *

• 사용자 데이터를 리스트 형태로 화면에 표시하는 컨테이너 역할을 수행

2. 어댑터

• 리사이클러뷰에 표시될 아이템 뷰를 생성하는 역할을 담당. 데이터로부터 아이템 뷰를 만드는 역할을 함.

3. 레이아웃매니저

• 레이아웃매니저는 리사이클러뷰가 아이템을 화면에 표시할 때, 아이템 뷰들이 어떤 형태로 배치되는지 관리하는 역할을 함.

4. 뷰 홀더

• 화면에 표시될 아이템 뷰를 저장하는 객체

• 어댑터에 의해 관리되는데, 필요에 따라 어댑터에서 생성.

 

[실습하기]

 

 

[ExpandableListAdapter.java]

 
public class ExpandableListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    public static final int HEADER = 0;
    public static final int CHILD = 1;
 
    private List<Item> data;
 
    public ExpandableListAdapter(List<Item> data) {
        this.data = data;
    }
 
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int type) {
        View view = null;
        Context context = parent.getContext();
        float dp = context.getResources().getDisplayMetrics().density;
        int subItemPaddingLeft = (int) (18 * dp);
        int subItemPaddingTopAndBottom = (int) (5 * dp);
        switch (type) {
            case HEADER:
                LayoutInflater inflater = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                view = inflater.inflate(R.layout.list_header, parent, false);
                ListHeaderViewHolder header = new ListHeaderViewHolder(view);
                return header;
            case CHILD:
                TextView itemTextView = new TextView(context);
                itemTextView.setPadding(subItemPaddingLeft, subItemPaddingTopAndBottom, 0, subItemPaddingTopAndBottom);
                itemTextView.setTextColor(0x88000000);
                itemTextView.setLayoutParams(
                        new ViewGroup.LayoutParams(
                                ViewGroup.LayoutParams.MATCH_PARENT,
                                ViewGroup.LayoutParams.WRAP_CONTENT));
                return new RecyclerView.ViewHolder(itemTextView) {
                };
        }
        return null;
    }
 
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        final Item item = data.get(position);
        switch (item.type) {
            case HEADER:
                final ListHeaderViewHolder itemController = (ListHeaderViewHolder) holder;
                itemController.refferalItem = item;
                itemController.header_title.setText(item.text);
                if (item.invisibleChildren == null) {
                    itemController.btn_expand_toggle.setImageResource(R.drawable.ic_launcher_background);
                } else {
                    itemController.btn_expand_toggle.setImageResource(R.drawable.ic_launcher_background);
                }
                itemController.btn_expand_toggle.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (item.invisibleChildren == null) {
                            item.invisibleChildren = new ArrayList<Item>();
                            int count = 0;
                            int pos = data.indexOf(itemController.refferalItem);
                            while (data.size() > pos + 1 && data.get(pos + 1).type == CHILD) {
                                item.invisibleChildren.add(data.remove(pos + 1));
                                count++;
                            }
                            notifyItemRangeRemoved(pos + 1, count);
                            itemController.btn_expand_toggle.setImageResource(R.drawable.ic_launcher_background);
                        } else {
                            int pos = data.indexOf(itemController.refferalItem);
                            int index = pos + 1;
                            for (Item i : item.invisibleChildren) {
                                data.add(index, i);
                                index++;
                            }
                            notifyItemRangeInserted(pos + 1, index - pos - 1);
                            itemController.btn_expand_toggle.setImageResource(R.drawable.ic_launcher_background);
                            item.invisibleChildren = null;
                        }
                    }
                });
                break;
            case CHILD:
                TextView itemTextView = (TextView) holder.itemView;
                itemTextView.setText(data.get(position).text);
                break;
        }
    }
 
    @Override
    public int getItemViewType(int position) {
        return data.get(position).type;
    }
 
 
    @Override
    public int getItemCount() {
        return data.size();
    }
 
    private static class ListHeaderViewHolder extends RecyclerView.ViewHolder {
        public TextView header_title;
        public ImageView btn_expand_toggle;
        public Item refferalItem;
 
        public ListHeaderViewHolder(View itemView) {
            super(itemView);
            header_title = (TextView) itemView.findViewById(R.id.header_title);
            btn_expand_toggle = (ImageView) itemView.findViewById(R.id.btn_expand_toggle);
        }
    }
 
    public static class Item {
        public int type;
        public String text;
        public List<Item> invisibleChildren;
 
        public Item() {
        }
 
        public Item(int type, String text) {
            this.type = type;
            this.text = text;
        }
    }
}

 

[MainActivity.java]

public class MainActivity extends AppCompatActivity {
 
    private RecyclerView recyclerview;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        recyclerview = findViewById(R.id.recyclerview);
        recyclerview.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        List<ExpandableListAdapter.Item> data = new ArrayList<>();
 
 
        ExpandableListAdapter.Item places = new ExpandableListAdapter.Item(ExpandableListAdapter.HEADER, "음수");
        places.invisibleChildren = new ArrayList<>();
        places.invisibleChildren.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "-1"));
        places.invisibleChildren.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "-2"));
        places.invisibleChildren.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "-3"));
        places.invisibleChildren.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "-4"));
        data.add(places);
 
 
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.HEADER, "짝수"));
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "2"));
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "4"));
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "6"));
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.HEADER, "홀수"));
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "1"));
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "3"));
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "5"));
        data.add(new ExpandableListAdapter.Item(ExpandableListAdapter.CHILD, "7"));
 
 
        recyclerview.setAdapter(new ExpandableListAdapter(data));
    }
}

 

[activity_main.xml]

<RelativeLayout 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:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    android:paddingBottom="16dp" tools:context=".MainActivity">
 
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
 
</RelativeLayout>
 

 

[list_header.xml]

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:paddingLeft="13dp"
    android:paddingStart="13dp"
    android:paddingRight="10dp"
    android:paddingEnd="10dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <TextView
        android:id="@+id/header_title"
        android:textColor="#000000"
        android:textSize="18sp"
        android:gravity="center_vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    <ImageView
        android:id="@+id/btn_expand_toggle"
        android:src="@drawable/ic_launcher_background"
        android:layout_width="30dp"
        android:layout_height="30dp"
        />
</LinearLayout>

 

 

Reference

https://dreamaz.tistory.com/223

https://recipes4dev.tistory.com/154

https://github.com/anandbose/ExpandableListViewDemo