스팀 앱 개발기 #12 - 태그 서브화면에서 태그 인식하기
메인 화면에서 태그/계정 검색 레이아웃을 추가했습니다. 그 다음으로 해야 할 작업은요. 사용자가 입력한 태그 또는 계정을 태그/프로파일/지갑 서브화면에서 읽을 수 있어야 한다는 것입니다. 이번 포스트에서는 사용자가 입력한 태그를 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>
GitHub Commits
- Let TagsFragment read tag from MainViewModel
- Bug Fix - Multiple observation when opening TagsFragment again
지난 스팀 앱 개발기
- #11 - 검색 레이아웃을 메인 화면에 적용
- #10 - 태그 및 계정 검색 레이아웃 만들기
- #9 - BaseActivity 클래스 정의 그리고 MainActivity 클래스에 적용
- #8 - BaseFragment 클래스 정의 그리고 기존 프래그먼트들에 적용
- #7 - ProfileFragment 그리고 WalletFragment에 데이터 바인딩 적용
- #6 - 태그별 검색 내용을 보여줄 TagsFragment에 데이터 바인딩 적용
- #5 - GitHub에 소스 올리기
- #4 - 하단 내비게이션의 탭 관련 클래스 이름 수정
- #3 - 하단 내비게이션 바의 아이콘, 텍스트 수정
- #2 - 프로젝트 생성
- #1 - 시작하며...
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.