스팀 앱 개발기 #79 - 태그 화면에 새로 고침 기능 추가

시작하며...

태그 화면의 포스트 리스트에서 하나 더 추가했으면 하는 기능이 바로 새로 고침이었습니다. 모바일 웹 브라우저에서 위에서 아래로 당기면 현재 웹 페이지를 다시 로딩하는 기능 있죠? 그와 같은 기능을 제가 만든 포스트 리스트에도 구현하고 싶었습니다. 안드로이드에서는 SwipeRefreshLayout 뷰를 이용하면 가능합니다.

작업 개요

build.gradle 파일에 swiperefreshlayout 라이브러리 추가
fragment_tags.xml 레이아웃에 SwipeRefreshLayout 뷰 추가
TagsViewModel 클래스의 readRankedPost 메소드 수정
TagsFragment 클래스 수정

build.gradle 파일에 swiperefreshlayout 라이브러리 추가

dorian-steem-ui 모듈의 build.gradle 파일에 swiperefreshlayout 라이브러리를 아래와 같이 추가하였습니다.

dependencies {
    // ...
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
    // ...
}

fragment_tags.xml 레이아웃에 SwipeRefreshLayout 뷰 추가

RecyclerView 뷰가 있던 자리에 SwipeRefreshLayout 뷰를 정의했구요. 전자를 후자 안으로 넣었어요.

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipe_refresh_post_list"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@id/radiogroup_sort"
    app:layout_constraintBottom_toBottomOf="parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/list_post_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:postItemList="@{viewModel.rankedPosts}"
        tools:listitem="@layout/layout_post_item" />

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

TagsViewModel 클래스의 readRankedPost 메소드 수정

readRankedPost 메소드에 handleAfterReading 함수 파라메터를 추가하였구요. API 실행 성공/실패시 이를 호출하게 했습니다.

fun readRankedPosts(
    tag: String,
    limit: Int = this.limit,
    handleAfterReading: (() -> Unit) = {}
) {
    rankedPosts.value = mutableListOf()

    readRankedPostsUseCase(
        sort.value ?: GetRankedPostParamsDTO.InnerParams.SORT_TRENDING,
        tag
    )
    .subscribeOn(Schedulers.io())
    .observeOn(AndroidSchedulers.mainThread())
    .onErrorReturn { error ->
        error.printStackTrace()
        liveThrowable.value = error
        handleAfterReading()
        listOf()
    }
    .subscribe { rankedPostItemList ->
        rankedPosts.value = rankedPostItemList.toMutableList()
        handleAfterReading()
    }
    .also { disposable ->
        compositeDisposable.add(disposable)
    }
}

TagsFragment 클래스 수정

TagsViewModel 객체의 readRankedPost 메소드를 호출하는 곳이 여러 곳 있었는데요. 하나의 함수를 정의, 사용하는 것으로 변경했습니다. SwipeRefreshLayout 뷰에서 로딩 중임을 보여주는 아이콘을 띄울 수 있는데요. 그것은 이 뷰의 isRefreshing 필드를 true로 설정하면 됩니다. 이를 다시 false로 바꿔 주면, 로딩 아이콘은 사라집니다. API 실행시 이를 보여주고 완료시 이를 숨기게 했습니다.

private fun readRankedPosts() {
    val tag = activityViewModel.currentTag.value ?: ""
    val sort = viewModel.sort.value ?: ""

    if (sort.isEmpty()) {
        showToastShortly(getString(R.string.error_sort_is_not_set))
        return
    }

    binding.swipeRefreshPostList.isRefreshing = true
    viewModel.readRankedPosts(
        tag
    ) {
        binding.swipeRefreshPostList.isRefreshing = false
    }
}

그리고 SwipeRefreshLayout 뷰가 사용자의 제스처(위에서 아래로)를 감지하여 새로 고침을 실행하는 리스너도 정의하였습니다.

private val swipeRefreshPostListRefreshListener = OnRefreshListener {
    readRankedPosts()
}

GitHub Commit

Applied refresh to post item list on TagsFragment

스팀 앱 개발기 #79 - 태그 화면에 새로 고침 기능 추가

시작하며...

작업 개요

build.gradle 파일에 swiperefreshlayout 라이브러리 추가

fragment_tags.xml 레이아웃에 SwipeRefreshLayout 뷰 추가

TagsViewModel 클래스의 readRankedPost 메소드 수정

TagsFragment 클래스 수정

GitHub Commit

마치며...

지난 스팀 앱 개발기

스팀 앱 개발기 #79 - 태그 화면에 새로 고침 기능 추가steemCreated with Sketch.

시작하며...

작업 개요

build.gradle 파일에 swiperefreshlayout 라이브러리 추가

fragment_tags.xml 레이아웃에 SwipeRefreshLayout 뷰 추가

TagsViewModel 클래스의 readRankedPost 메소드 수정

TagsFragment 클래스 수정

GitHub Commit

마치며...

지난 스팀 앱 개발기

스팀 앱 개발기 #79 - 태그 화면에 새로 고침 기능 추가