ScrollView와 SwipeRefreshLayout 함께 사용하기

당겨서 새로고침을 위해서 사용하는 SwipeRefreshLayout은 일반적으로 RecyclerView와 함께 사용하는 경우가 많지만, 이번에는 ScrollView로 감싸고 있는 내용을 새로고침 하기위해서 SwipeRefreshLayout을 사용하는 방법을 설명하려고 한다.

그냥 단순하게 ScrollView를 SwipeRefreshLayout으로 감싸기만 해서는 원하는 대로 동작하지 않는다. 아래로 스크롤은 정상적으로 동작하지만 다시 위로 올리기 위해서 Swipe Down 터치 동작을 하게 되면 ScrollView의 스크롤 업 대신에 SwipeRefreshLayout의 Refresh 동작이 트리거 되기 때문이다.

일단 레이아웃은 아래와 같다.

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

    <ScrollView
        android:id="@+id/layout_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

그냥 단순히 ScrollView를 SwipeRefreshLayout으로 감싸주기만 하면 된다.

대신에서 코드상에서 처리해줄 부분이 있다.

// 당겨서 새로고침 기능 셋팅
dataBinding.layoutSwipeRefresh.setOnRefreshListener {
    refreshData()
}

// 스크롤 업 대신에 리프레쉬 이벤트가 트리거 되는걸 방지하기 위해서
dataBinding.layoutScroll.viewTreeObserver.addOnScrollChangedListener {
    dataBinding.layoutSwipeRefresh.isEnabled = (dataBinding.layoutScroll.scrollY == 0)
}

위 코드 블록에서 윗 부분은 일반적으로 당겨서 새로고침 처리를 하기위한 코드고, 아래 부분이 스크롤 다운 된 상태에서 다시 스크롤 업 하기 위해 Swipe Down 하는 경우 스크롤 업 대신에 SwipeRefreshLayout의 Refresh 동작이 트리거 되는걸 방지하기 위한 코드다. 

스크롤 뷰의 스크롤이 0. 즉, 최상단에 위치했을 때만 SwipeRefreshLayout을 활성화해서 원하는대로 동작할 수 있도록 해준다. 같은 방식으로 ScrollView 뿐만 아니라 Webview에도 적용할 수 있다.