스팀 앱 개발기 #13 - 프로파일 서브화면(ProfileFragment)에서 계정 인식하기

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

메인 화면에서 태그/계정 검색 레이아웃을 추가했습니다. 지난 포스트에서 보여드린 사용자 입력 태그를 태그 서브화면에서 읽고 이를 보여주는 것을 구현했죠. 이번 포스트에서는 사용자가 입력한 계정을 ProfileFragment에서 어떻게 읽을 수 있는지를 보여 드리고자 합니다. 지난 포스트에서 보여드린 내용과 비슷합니다.

스크린샷

처음에 계정은 아래 그림과 같이 비어있고요.

계정을 입력하고 SEARCH 버튼을 클릭하면, 화면에 보이는 텍스트는 "Current account is @(계정)."으로 바뀝니다.

작업 개요

MainViewModel 클래스: currentAccount 라이브 데이터 추가
MainActivity 클래스: 계정 검색 레이아웃의 SEARCH 버튼 클릭 구현
ProfileFragment 클래스: MainActivity 객체의 MainViewModel 객체 접근 그리고 후자의 currentAccount 관찰
ProfileViewModel 클래스: _text 라이브 데이터를 외부에서 변경 가능하게 함
fragment_profile.xml 파일: MainViewModel 객체를 변수로 추가

MainViewModel 클래스: currentTag 라이브 데이터 추가

메인 화면에서 사용자가 입력한 계정은 currentAccount 라이브 데이터에 기록할 것입니다. 기록 시점은 사용자가 계정을 입력하고 SEARCH 버튼을 클릭할 때입니다.

class MainViewModel(val app: Application) : AndroidViewModel(app) {

    val currentTag = MutableLiveData("")
    val currentAccount = MutableLiveData("")

   // ...
}

MainActivity 클래스: SEARCH 버튼 클릭 구현

사용자가 SEARCH 버튼을 클릭하면, MainViewModel 객체의 currentAccount 라이브 데이터를 사용자가 입력한 태그로 업데이트 합니다. 아래 코드는 이를 처리하는 SEARCH 버튼 클릭 리스터입니다.

private val buttonAccountSearchClickListener = View.OnClickListener {
    val account = binding.includeAccountLookup.editSteemitAccount.text.toString()
    if (account.length > 2) {
        viewModel.currentAccount.value = binding.includeAccountLookup.editSteemitAccount.text.toString()
    }
}

ProfileFragment 클래스: MainActivity 객체의 MainViewModel 객체 접근 그리고 후자의 currentAccount 관찰

ProfileFragment 클래스에 activityViewModel 필드를 추가하였으며, 이것은 MainActivity 객체가 소유한 MainViewModel 객체입니다.

val activityViewModel by lazy {
    ViewModelProvider(requireActivity()).get(MainViewModel::class.java)
}

MainViewModel 객체의 currentAccount 라이브 데이터를 관찰하고 변경을 처리하는 코드를 아래와 같이 만들었습니다. 계정이 "dorian-mobileapp"으로 변경되면, 텍스트로 "Current account is @dorian-mobileapp."이라고 보여주기 위해 ProfileViewModel 객체의 text 라이브 데이터를 변경합니다.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    activityViewModel.currentAccount.removeObservers(viewLifecycleOwner)
    activityViewModel.currentAccount.observe(viewLifecycleOwner, currentAccountObserver)
}

private val currentAccountObserver = Observer<String> {
    if (it.length > 0) {
        viewModel.text.value = "Current account is @${it}."
    }
}

ProfileViewModel 클래스: _text 라이브 데이터를 외부에서 변경 가능하게 함

_text 라이브 데이터는 화면에 보여주기 위한 텍스트를 갖는 라이브 데이터입니다. 태그가 변경되었음을 보여주기 위해 이 데이터의 변경이 필요했구요. 이를 위해 데이터 타입을 LiveData<String>에서 MutableLiveData<String>으로 바꾸었습니다. 필드 이름도 _text에서 text로 바꾸었습니다.

class ProfileViewModel : ViewModel() {

    val text = MutableLiveData<String>().apply {
        value = "This is profile Fragment"
    }

}

fragment_profile.xml 파일: MainViewModel 객체를 변수로 추가

이것은 당장 필요하기보다는 나중을 위해 작업한 것입니다. FragmentProfileBinding 객체도 MainViewModel 객체에 접근할 수 있도록 한 것입니다.

<data>
    <variable
        name="viewModel"
        type="lee.dorian.steem_ui.ui.profile.ProfileViewModel" />
    <variable
        name="activityViewModel"
        type="lee.dorian.steem_ui.MainViewModel" />
</data>