MVVM 패턴 적용기(2)

그동안 배웠던 MVVM 패턴을 실제 개발하고 있는 프로젝트에 적용하고자 한다. 

 

우선 나는 Framelayout으로 묶인 상자의 선 색상을 다른 색상으로 변경시키는 것을 구현할 것이다.

 

1. viewmodel에서 isClicked 요소 정의

ViewModel에서는 상태 변경시 이를 view에게 알려주어 ui가 업데이트 되도록 해준다.

class SignupAViewModel : ViewModel() {
    var isClicked = false
        private set


    fun onFrameLayoutClick(){
        isClicked = !isClicked
    }
}

'private set' 이란 프로퍼티의 접근 제어를 설정하는 방법 중 하나이다. 이것이 현재 isClicked 프로퍼티에 적용되어 있다. 따라서 isClicked 값을 클래스 외부에서 변경할 수 없게 된다. 이렇게 함으로써 isClicked 프로퍼티의 값을 클래스 내부의 메서드를 통해서만 변경할 수 있게 되므로 클래스 내부의 논리를 더욱 관리하기 쉽게 된다. 

이 코드상에서는 onFrameLayoutClick() 메서드를 통해서만 값을 변경할 수 있도록 제한하고 있다.

 

2.View 와 연결

private lateinit var viewModel: SignupAViewModel
    private lateinit var binding:FragmentSignupABinding

우선 view와 viewModel을 연결하기 위해서 객체를 정의한다.

binding = FragmentSignupABinding.inflate(inflater,container,false)
        viewModel = ViewModelProvider(this).get(SignupAViewModel::class.java)
        binding.lifecycleOwner = viewLifecycleOwner
        binding.viewModel = viewModel
        
        binding.farmerType.setOnClickListener{
            viewModel.onFrameLayoutClick()
            updatetypeBackground()}
            
            private fun updatetypeBackground()
    {
        val drawableres = if(viewModel.isClicked) R.drawable.typebox_active else R.drawable.typebox_unactive
        binding.farmerType.setBackgroundResource(drawableres)
    }

다음의 코드를 onCreateView 내부에 정의하고 updatetypeBackground는 코드 밖에 정의해준다.

다른 기능을 구현한 코드들도 있어 띄엄띄엄 가져왔다.

하나하나 분석을 해보도록 하겠다. (참고로 해당 view는 fragment view이다. )

 

우선 맨 처음의 코드들은 각각 뷰 바인딩 초기화하여 해당 fragment의 레이아웃과 연결, 뷰 모델 인스턴스 초기화 하고 뷰 모델과 연결하는 기능을 한다.

ViewModelProvider은 ViewModel을 생성하고 관리하는 클래스로 해당 fragment의 수명주기를 기준으로 ViewModel을 관리한다. 

 

binding.lifecycleOwner ~ 이 코드는 데이터 바인딩 라이브러리에게 뷰의 생명주기 소유자를 알려준다. 

데이터 바인딩시 lifecycleOwner를 설정하여 생명주기 이벤트에 맞게 UI 업데이트를 관리할 수 있다. 

 

updatetypeBackground() 함수를 정의하여 isClicked 상태에 따라 적용될 디자인을 다르게 정의한다. 그리고 이를 클릭이벤트에 적용해주면 MVVM 패턴을 활용해 클릭이벤트를 처리하는 로직을 완성할 수 있다.