[메이플 캘린더] 위로 스와이프 시 새로고침 기능을 구현해보자

사용 의도

로비 화면에 이벤트 리스트와 캐릭터 정보가 존재하는데, 시간이 지나면 해당 데이터가 변경될 수 있는데 이를 위해 새로고침 기능이 필요하다고 생각하였다.

• 보통 위로 스와이프를 하면 새로고침이 이루어지는 앱이 많기 때문에, 어떻게 구현하는지 알아볼 겸 새로고침 기능을 추가하고자 하였다.

 

학습 내용

Layout을 NestedScrollView로 감싸 Fragment가 스크롤이 가능하도록 만들어주고, 다시 SwipeRefreshLayout으로 감싸준다.

이후 코틀린 내부에서 onRefreshListener를 추가함으로써 스와이프 시 어떤 메소드를 호출할 것인지를 결정한다.

• 또한 새로고침을 할 때 나오는 새로고침 아이콘의 색상도 변경할 수 있다.

 

적용 방법

다음과 같이 ConstraintLayout을 NestedScrollView로 감싸고, 다시 SwipeRefreshLayout으로 감싼다.

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
  android:id="@+id/fragment_lobby"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <androidx.constraintlayout.widget.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".presentation.lobby.LobbyFragment">
      ...

 

코틀린 코드 내부에서 SwipeRefreshLayout에 onRefreshListener를 달아준다.

private fun setSwipeRefresh() {
    with(binding.fragmentLobby) {
        setOnRefreshListener {
            viewModel.initState()
            binding.fragmentLobby.isRefreshing = false
        }
        setColorSchemeColors(resources.getColor(R.color.main, context.theme))
    }
}

 

위로 스와이프를 하면 ViewModel의 initState() 함수가 호출되는데, 이 함수는 다음과 같다.

fun initState() {
    viewModelScope.launch {
        setToday().await()
        setCharacterName()
        getCharacterOcid()
        setEventList()
        setCalendarDate()
    }
}

• 가장 먼저 현재 날짜를 재설정한다. 이후 캐릭터 닉네임을 통해서 ocid를 받아온 후 캐릭터의 정보를 받아오고, 이벤트 리스트를 Firebase의 DB를 다시 read함으로써 불러오고, 마지막으로 달력 데이터를 재설정한다.

 

새로고침이 끝나면 isRefreshing을 false로 바꿔줌으로써 새로고침 아이콘을 통한 새로고침의 시각적인 표시를 제거해준다.

또한 setColorSchemeColors() 메소드로 새로고침 아이콘의 색상을 변경할 수도 있어서, 메이플 캘린더의 메인 테마 색상으로 변경해주었다.

 

결과

 

위로 스와이프를 함으로써, 데이터가 바뀌지는 않았지만 이벤트 리스트를 다시 받아옴을 확인할 수 있다.

 

코드

GitHub - littlesam95/MapleCalendar: 🍄 메붕이들을 위한 이벤트 일정 알리미