Drag해서 RecyclerView (listview) 순서 바꾸기

앱을 만들다보면, 리스트를 생성하는 것 뿐만이 아니라,

리스트 순서를 편집해야 하는 경우도 생기게됩니다.

특히, 모바일에서는 드래그를 통해서 위치를 바꾸어야 해서 조금 까다로운 편인데요.

오늘은 이 방법에 대해서 정리해 보겠습니다.

1. Model Class와 RecyclerView

먼저 아래 모델 데이터와 같은 데이터 클래스를 가지고, RecyclerView를 생성하겠습니다.

recyclerView를 생성하는 구체적인 방법은 아래 링크에서 참조해주세요.

>> RecyclerView 로 listview 정복 Part1

우선, 위와 같은 데이터 모델을 가지고아래와 같은 리스트와 아이템을 가진 리스트를 우선 만들어 놓습니다.

2. ItemTouchHelperCallback 구현하기

먼저, StudentItemTouchHelperCallback 클래스를 만들고 나서,

ItemTouchHelper.Callback 을 구현해 줍니다.

구현할 메소드들은 아래와 같이 3가지인데요.

이제 하나하나 구현해 보겠습니다.

2-1. getMovementFlags 메소드

제일먼저 구현할 것은, getMovementFlags인데요. 

메소드 명에서 알 수 있듯이, 어느 방향으로 움직일 것에 따라 flag를 받는 것을 정의합니다.

드래그는 위와 아래로 하는 액션이므로, UP과 DOWN을 넘겨줍니다.

참고로, 아예 swipe액션이 되지 않도록 하고 싶다면,

swipeFlags자체를 생성하지 않고, 0만 넘겨주면 됩니다.

return makeMovementFlags(dragFlags, 0);

2-2. onMove,  onSwipe 메소드

다음으로 구현해야 할, 메소드는 onMove인데요.

움직이면 어떻게 할 것인지를 구현하는 곳입니다.

한가지 짚고 넘어가야 할 것은, 

위아래로 움직여서 순서를 변경하거나, 

좌우로 스와이프 했을때, 삭제를 시키려고 한다면,

리스트의 데이터를 변경할 수 있는 Adpater에서

Callback메소드를 통해서 실행할 수 있도록 해야한다는 점입니다.

따라서, 아래와 같이 Listener를 만들어주고요,

생성자에서 Listener를 받아옵니다.

onMove에서 받아온 리스너의 onItemMove를 실행시킵니다.

이 때, 어느 위치에서 어느위치로 변경하는지가 중요한데요.

이동할 아이템의 position과 이동한 위치는 viewHolder와 target 인자를 통해서,

getAdapterPosition메소드를 통해서 알아올 수 있습니다.

이제 Adapter에서 위에서 만든 CallbackListener를 구현합니다.

아이템이 변경되면, 변경할 위치의 아이템과 변경될 위치의 아이템을 swap()해줍니다.

마지막으로 onSwipe()메소드가 남아있는데요.

swipe액션을 사용하지 않는다면, 구현하지 않아도 됩니다.

여기서는 swipe액션은 사용하지 않겠습니다.

3. ItemTouchHelper 객체 생성

이제, 인자로 위에서 만든 StudentItemTouchHelperCallback의 객체를 만들어서 넘겨주고, 

ItemTouchHelper의 객체를 생성한다음, attachToRecyclerView메소드를 이용해서 리사이클러 뷰에 붙여줍니다.

이제, 대부분 설정을 다 했는데요.

아래에서 리스트의 햄버거 버튼(줄세개가 있는 아이콘)을 눌러서 리스트를 변경할 수 있도록 해 보겠습니다.

4. Adapter에서 List Item의 이미지버튼 눌러서, drag하도록 설정

제일 먼저 하는 것은, 사용자가 버튼을 눌렀을 때, drag가 시작된 다는 것을 알려주는 것인데요.

이를 위해서 Adapter에서 Listener를 만들어서, 리스트가 있는 MainActivity가 구현하도록 하겠습니다.

콜백이 실행되는 것은 어디일까요?

BindViewHolder인데요. 아래와 같이 받은 listener를 이용해서 실행하면 됩니다.

이제, Activity에서 implement해 보겠습니다.

ItemTouchHelper의 객체의 멤버메소드인 startDrag를 이용해서, onStartDrag가 호출되면,

아이템의 드래그가 시작되도록 합니다.

조금 복잡했지만, 여기 까지 되었다면, 앱을 실행해보면 다음과 같은 화면을 볼 수 있습니다.

우측의 버튼을 누르고, 아래로 당겨서 변경해보면, 해당 아이템과 위치가 변경되는 것을 확인할 수 있습니다.