안드로이드 - RecyclerView

2021. 2. 24. 21:05

https://blog.naver.com/nagne2011/222255256717

안드로이드 - RecyclerView

 

 

#안드로이드 #android #RecyclerView #fragment

(사실 이전 포스트에서도 한꺼번에 추가했지만.. 간단하게 정리할 필요가 있어서 따로 포스팅함)

 

대표사진 삭제

사진 설명을 입력하세요.

 

 

기본적인 RecyclerView에 대한 사용법

기본 설명은 링크 참고

(https://developer.android.com/reference/android/support/v7/widget/RecyclerView)

 

간단하게 설명하자면,

기존 안드로이드에서 스크롤뷰를 만들때 <ScrollView>를 쓰곤했지만

단순히 위아래로 쭉 펼쳐서 스크롤하는 경우엔 UI의 낭비가 심하다

 

그래서 실제 눈에 보이는 부분만 생성하고, 화면에 보이지 않는 부분은 삭제하는 방식 (삭제가 맞나?)을 사용하는

RecyclerView를 사용하곤 한다

 

특히 목록의 각 항목들이 동일한 폼을 가지고 있을경우에 '재활용'할 수 있기때문에 최적화면에서 많은 이득을 얻을 수 있다

 

따라서 기본적인 구성항목으로는

1. 전체 항목을 표시해줄 view(혹은 fragment)

2. 목록의 각 항목 양식(xml)

3. 항목 양식에 대한 스크립트(java), 그리고 데이터목록

 

이런식으로 구성해서

데이터를 추가하면 사용자의 스크롤 위치에 따라 각 데이터에 맞는 항목이

미리 제작한 양식대로 생성된다

 

 

안드로이드 프로젝트 생성은 생략!

3번 항목부터 만들자

public class RecyclerviewData {

    private String title;

    //생성자
    public RecyclerviewData(String title) {
        this.title = title;
    }

    public String getTitle() { return title; }
    public void setTitle(String title) { this.title = title; }
}

 

간단하게 텍스트 한줄만 추가했다

만약 텍스트뿐만아니라 원하는 항목이 있으면 추가해주면 된다

(getter, setter 자동완성 너무편함)

 

그리고 해당 데이터를 사용하는, 생성과 세팅을 담당해주는 adapter를 추가한다 (2번항목)

물론 그전에 xml로 UI도 만들어주는것도 잊지말자

 

이름은 custom_recyclerview로 만들었다

 

 

<LinearLayout
    android:id="@+id/ll_post"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/edge">

    <ImageView
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/dummy_thumbnail"/>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="제목 텍스트"
        android:textStyle="bold"
        android:textSize="20dp"
        android:textColor="#212121"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"/>
</LinearLayout>

 

간단한 텍스트와 이미지를 추가하고

배경박스만 만들어줬다 크기는 적당히..

 

이어서 holder를 추가하고 코드를 완성하자

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.CustomHolder> {


    private ArrayList<RecyclerviewData> datas = new ArrayList<>();
    private CustomAdapter.OnItemClickListener mListener = null;

    public interface OnItemClickListener {
        void onItemClick(View v, int position);
    }

    public void setOnItemClickListener(CustomAdapter.OnItemClickListener listener) {
        this.mListener = listener;
    }

    @NonNull
    @Override
    public CustomAdapter.CustomHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        Context context = parent.getContext() ;
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) ;

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_recyclerview, parent, false);
        return new CustomAdapter.CustomHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull CustomAdapter.CustomHolder holder, int position) {
        holder.onBind(datas.get(position));
    }

    @Override
    public int getItemCount() {
        return datas.size();
    }

    public void addItem(RecyclerviewData data) {
        // 외부에서 item을 추가시킬 함수입니다.
        datas.add(data);
    }

    public void clear() {
        int size = datas.size();
        datas.clear();
        notifyItemRangeRemoved(0, size);
    }

    class CustomHolder extends RecyclerView.ViewHolder {

        private TextView tv_title;
        private LinearLayout ll_post;

        public CustomHolder(@NonNull View itemView) {
            super(itemView);

            tv_title = (TextView)itemView.findViewById(R.id.tv_title);

            ll_post = (LinearLayout) itemView.findViewById(R.id.ll_post);
            ll_post.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = getAdapterPosition();
                    if(position != RecyclerView.NO_POSITION) {
                        if(mListener != null) {
                            mListener.onItemClick(v, position);
                        }
                    }
                }
            });
        }

        public void onBind(RecyclerviewData data) {
            tv_title.setText(data.getTitle());
        }
    }
}

 

 

 

먼저 데이터를 담아둘 list를 미리 생성해두고

이벤트 함수도 만들어주자 (이벤트 안쓸꺼면 없어도 된다)

 

holder는 해당 클래스의 맨 마지막에 내부 클래스로 선언해도되고

따로 js만들어서 가져다 써도된다

관리적인 측면에서 이게 편해서 한꺼번에 만들었다

 

holder에서는 각각 UI항목을 지정해주고

이벤트 함수도 넣어준다

(예시에서는 해당 항목을 누를경우 이벤트함수가 동작하도록 설정)

 

그리고 마지막으로 onBind함수를 채워주는데

스크롤뷰 이동으로 해당 항목이 생성되었을때 데이터를 넣어주는 부분이다

데이터 클래스의 setter를 이용해 필요한 항목을 갱신해준다

 

이제 어댑터 함수의 onCreateViewHolder()를 채워준다

 

추가로 clear()함수랑 addItem()함수도 추가하자

 

 

이제 1번항목 프래그먼트를 추가하자

(프래그먼트 추가 방법은 따로 포스팅 참고)

public class recyclerviewFragment extends Fragment {

    private RecyclerView recyclerView;
    private CustomAdapter customAdapter;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle saveInstanceState) {
        View view = inflater.inflate(R.layout.fragment_recyclerview, null);

        recyclerView = view.findViewById(R.id.recyclerview);

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
        recyclerView.setLayoutManager(linearLayoutManager);

        customAdapter = new CustomAdapter();
        recyclerView.setAdapter(customAdapter);

        //데이터 추가 / 생성
        onSetData(SetData());

        //클릭이벤트 동작
        customAdapter.setOnItemClickListener(new CustomAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View v, int position) {
                Toast.makeText(getActivity().getApplication(), "select position : " + position, Toast.LENGTH_SHORT).show();
            }
        });

        return view;
    }

    private ArrayList<RecyclerviewData> SetData() {
        ArrayList<RecyclerviewData> data = new ArrayList<>();
        for(int i=0; i<10; i++) {
            RecyclerviewData temp = new RecyclerviewData("title: " + i);
            data.add(temp);
        }
        return data;
    }

    private void onSetData(ArrayList<RecyclerviewData> data) {
        for(int i=0; i<data.size(); i++) {
            customAdapter.addItem(new RecyclerviewData(data.get(i).getTitle()));
        }
        customAdapter.notifyDataSetChanged();
    }
}

 

먼저 CustomAdapter 부터 선언하고

setAdapter를 적용해준다

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
recyclerView.setLayoutManager(linearLayoutManager);

customAdapter = new CustomAdapter();
recyclerView.setAdapter(customAdapter);

 

그리고 임의 데이터를 생성해준다음 addItem함수로 각 항목을 생성해주자

private ArrayList<RecyclerviewData> SetData() {
    ArrayList<RecyclerviewData> data = new ArrayList<>();
    for(int i=0; i<10; i++) {
        RecyclerviewData temp = new RecyclerviewData("title: " + i);
        data.add(temp);
    }
    return data;
}

private void onSetData(ArrayList<RecyclerviewData> data) {
    for(int i=0; i<data.size(); i++) {
        customAdapter.addItem(new RecyclerviewData(data.get(i).getTitle()));
    }
    customAdapter.notifyDataSetChanged();
}

 

클릭시 동작도 추가해준다

간단히 토스트정도만 띄워주자

customAdapter.setOnItemClickListener(new CustomAdapter.OnItemClickListener() {
        @Override
        public void onItemClick(View v, int position) {
                Toast.makeText(getActivity().getApplication(), "select position : " + position, Toast.LENGTH_SHORT).show();
        }
});

 

 

xml부분은 간단하게 recyclerview정도만 생성했다

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RecyclerView 테스트"
        android:textSize="30dp"
        android:textStyle="bold"
        android:textColor="#212121"
        android:gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp">
    </androidx.recyclerview.widget.RecyclerView>

</LinearLayout>