스팀 앱 개발기 #12 - 태그 서브화면에서 태그 인식하기

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

메인 화면에서 태그/계정 검색 레이아웃을 추가했습니다. 그 다음으로 해야 할 작업은요. 사용자가 입력한 태그 또는 계정을 태그/프로파일/지갑 서브화면에서 읽을 수 있어야 한다는 것입니다. 이번 포스트에서는 사용자가 입력한 태그를 TagsFragment에서 어떻게 읽을 수 있는지를 보여 드리고자 합니다.

스크린샷

처음에 태그는 아래 그림과 같이 비어있고요.

태그를 입력하고 SEARCH 버튼을 클릭하면, 화면에 보이는 텍스트는 "Current tag is #(태그이름)."으로 바뀝니다.

작업 개요

MainViewModel 클래스: currentTag 라이브 데이터 추가
MainActivity 클래스: 태그 검색 레이아웃의 SEARCH 버튼 클릭 구현
BaseFragment 클래스: 바인딩 객체의 lifeCycleOwner 필드 설정
TagsFragment 클래스: MainActivity 객체의 MainViewModel 객체 접근 그리고 후자의 currentTag 관찰
TagsViewModel 클래스: _text 라이브 데이터를 외부에서 변경 가능하게 함
fragment_tags.xml 파일: MainViewModel 객체를 변수로 추가

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

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

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

    val currentTag = MutableLiveData("")

   // ...
}

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

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

private val buttonTagSearchClickListener = View.OnClickListener {
    val tag = binding.includeTagLookup.editSteemitTag.text.toString()
    if (tag.length > 0) {
        viewModel.currentTag.value = binding.includeTagLookup.editSteemitTag.text.toString()
    }
}

BaseFragment 클래스: 바인딩 객체의 lifeCycleOwner 필드 설정

BaseFragment를 상속받는 프래그먼트들이 라이브 데이터를 관찰할 수 있도록 바인딩 객체의 lifeCycleOwner 필드를 설정합니다.

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    _binding = DataBindingUtil.inflate(this.layoutInflater, layoutResID, null, false) as VDB
    _binding?.lifecycleOwner = this
    return binding.root
}

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

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

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

MainViewModel 객체의 currentTag 라이브 데이터를 관찰하고 변경을 처리하는 코드를 아래와 같이 만들었습니다. 태그가 kr로 변경되면, 텍스트로 "Current tag is #kr."이라고 보여주기 위해 TagsViewModel 객체의 text 라이브 데이터를 변경합니다.

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

    activityViewModel.currentTag.removeObservers(viewLifecycleOwner)
    activityViewModel.currentTag.observe(viewLifecycleOwner, currentTagObserver)
}

private val currentTagObserver = Observer<String> {
    if (it.length > 0) {
        viewModel.text.value = "Current tag is #${it}."
    }
}

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

_text 라이브 데이터는 화면에 보여주기 위한 텍스트를 갖는 라이브 데이터입니다. 태그가 변경되었음을 보여주기 위해 이 데이터의 변경이 필요하구요. TagsFragment에서 그것에 접근하기 위해 접근 한정자 private를 제거했습니다. 필드 이름도 _text에서 text로 바꾸었습니다. 예전에 사용했던 읽기 전용 text 필드는 삭제했습니다.

class TagsViewModel : ViewModel() {

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

}

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

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

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