스팀 앱 개발기 #70 - 태그 화면 1차 구현

dorian-mobileapp (64)in kr-dev 커뮤니티 • 2 years ago

시작하며...

오늘 태그 화면의 구현을 1차로 완료했습니다. 추가 작업들이 남아 있지만, 일단 눈에 보이는 결과가 나왔음에 의미를 두고자 합니다.

스크린샷

아래 그림과 같이 태그 화면에서 정렬 방식은 trending이고 태그를 kr로 입력합니다. 그리고 SEARCH 버튼을 클릭하면, 포스트 리스트가 화면에 보입니다.

작업 개요

TagsViewModel 클래스의 readRankedPosts, appendRankedPosts 메소드 파라메터 수정
DataBindingUtil.kt 파일 수정
fragment_tags.xml 파일 수정
layout_post_item.xml 파일 수정
TagsFragment 클래스 수정

TagsViewModel 클래스의 readRankedPosts, appendRankedPosts 메소드 파라메터 수정

TagsViewModel 클래스에 tag라는 이름으로 MutableLiveData 객체를 정의했었죠. 그런데 MainViewModel 클래스 안에 이미 currentTag라는 이름의 MutableLiveData 객체를 이미 정의했습니다. 동일한 라이브 데이터를 두 클래스에서 정의할 필요가 없죠. 그래서 TagsViewModel 클래스의 tag 필드를 삭제했습니다. 그리고 readRankedPosts, appendRankedPosts 메소드를 다음과 같이 수정했습니다.

newSort: 삭제. 그 대신 sort 라이브 데이터를 메소드 내부에서 사용
newTag: tag로 이름 변경. appendRankedPosts 메소드에 이 파라메터 추가
limit: appendRankedPosts 메소드에 이 파라메터 추가

DataBindingUtil.kt 파일 수정

DataBindingUtil 오브젝트 클래스를 없애고, 그 안에 있던 함수만 남겨두었습니다. 클래스를 유지하고 싶었지만, 빌드 오류 때문에 어쩔 수 없었어요.

fragment_tags.xml 파일 수정

"Current tag is ..."를 보여주는 TextView 뷰 삭제
RecyclerView 뷰에 app:layoutManager 속성 추가. 값은 "androidx.recyclerview.widget.LinearLayoutManager"로 설정

layout_post_item.xml 파일 수정

보상 보여주는 TextView에서 소수점을 3개로 고정
- 이전: android:text='@{String.format("$%f", postItem.rewards)}'
- 수정: android:text='@{String.format("$%.3f", postItem.rewards)}'
TextView 뷰의 text에 포함했던 이모지들을 유니코드로 수정
- 🔺: \uD83D\uDD3A로 수정
- 🔻: \uD83D\uDD3B로 수정

TagsFragment 클래스 수정

RecyclerView 뷰에 어댑터 설정

binding.listPostItem.adapter = PostItemListAdapter()

TagsViewModel 객체의 sort 라이브 데이터를 관찰하는 코드 추가

viewModel.sort.apply {
    removeObservers(viewLifecycleOwner)
    observe(viewLifecycleOwner, currentSortObserver)
}

TagsViewModel 객체의 sort, MainViewModel 객체의 currentTag 변경시 포스트 리스트 읽기

private val currentSortObserver = Observer<String> { sort ->
    val tag = activityViewModel.currentTag.value ?: ""
    if ((tag.length >= 2) and (sort.isNotEmpty())) {
        viewModel.readRankedPosts(
            tag
        )
    }
}

private val currentTagObserver = Observer<String> { tag ->
    val sort = viewModel.sort.value ?: ""
    if ((tag.length >= 2) and (sort.isNotEmpty())) {
        viewModel.readRankedPosts(
            tag
        )
    }
}

trending, created, payout 중 하나를 선택할 RadioGroup 뷰: 체크 초기화

binding.radiogroupSort.apply {
    setOnCheckedChangeListener(sortCheckedChangedListener)
    clearCheck()
    check(R.id.radiobtn_trending)
}

trending, created, payout 중 하나를 선택할 RadioGroup 뷰: 라디오 버튼 체크 처리하는 리스너 구현, 설정
(설정은 위 코드 참조)

private val sortCheckedChangedListener = OnCheckedChangeListener { radioGroup, radioButtonId ->
    viewModel.sort.value = when (radioButtonId) {
        R.id.radiobtn_trending -> GetRankedPostParamsDTO.InnerParams.SORT_TRENDING
        R.id.radiobtn_created -> GetRankedPostParamsDTO.InnerParams.SORT_CREATED
        R.id.radiobtn_payout -> GetRankedPostParamsDTO.InnerParams.SORT_PAYOUT
        else -> GetRankedPostParamsDTO.InnerParams.SORT_TRENDING
    }
}

GitHub Commit

Show post item list by selecting sort and inputting tag and clicking SEARCH button

마치며...

이제야 태그 화면의 내용이 눈으로 보이기 시작했습니다. 오늘까지 오는 과정이 너무 길었네요. 포스트 대신 코딩에만 집중했다면, 작업은 훨씬 더 빨리 나올 수 있었을 겁니다. 그렇지만 개발 과정을 가능한 글로 써보고 싶어서 이 긴 과정을 거치게 되었어요. 나중에 이 글들이 크게 의미가 있기를 바랄 뿐입니다.

화면 구현이 아직 끝난 게 아닙니다. 아래 작업들을 추가로 해야 합니다.