안드로이드 MVVM 패턴으로 작업해보기 (3)

#1 홈화면 만들기
Pixabay 에서는 검색어를 통해 이미지와 동영상을 검색할 수 있습니다.
api도 이미지검색api 와 동영상검색api 가 제공됩니다.

우선 레이아웃을 만드는 것부터 시작하겠습니다.
res/layout 폴더에 fragment_home.xml 파일을 생성해줍니다.
홈화면 상단에는 검색어를 입력할 EditText 와 검색버튼, 그 아래 영역엔 RecyclerView 를 배치시켰습니다.
레이아웃파일에는 데이터바인딩을 이용할 수 있도록 셋팅해줬습니다.

데이터바인딩을 이용하기 위해선 <layout> 태그를 최상단에 구성해줘야 한다.

#2 데이타바인딩을 이용해 이벤트 처리.
되도록 클릭이벤트는 fragment_home.xml 파일과 HomeViewModel 파일에서 바로 처리되도록 했습니다.

데이터바인딩을 쓸때 "@{ }" 와 "@={ }" 이 있는데 "@={ }" 를 쓰면 EditText 에 입력받은 텍스트를 뷰모델의 변수에 곧바로 넣을 수 있습니다.
소스상에서 처리하려면 TextWatcher를 이용해야 하지만 이렇게 처리하면 훨씬 간편하게 구현할 수 있습니다.

#3 액티비티에서 데이타바인딩 설정.
이제 HomeFragment 파일에서 DataBindingUtil 을 이용해 셋팅을 해주면 됩니다.
Activity 에서는 DataBindingUtil.setContentView 을 사용하지만 Fragment 에서는 DataBindingUtil.inflate 를 사용합니다.

class HomeFragment : Fragment() {
    private val viewModel: HomeViewModel by viewModel()

    private var mBinding: FragmentHomeBinding? = null

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        mBinding = DataBindingUtil.inflate<FragmentHomeBinding>(inflater, R.layout.fragment_home, container, false).apply {
            vm = viewModel
            lifecycleOwner = viewLifecycleOwner
        }

        initEvent()

        return mBinding?.root
    }

이제 화면과 클릭이벤트들을 처리했으니 본격적으로 Pixabay 의 API 를 호출해서 결과를 받는 처리를 해보도록 하겠습니다.