안드로이드 DataBinding, MVVM 구구단

1. UI 정의 하기

 

우선 UI를 그려준다. 여기서 입력 버튼이 눌렀을 때 마다, "문제가 들어 갈 곳" , "문제 입력란", "결과가 들어 갈 곳"에서 변화가 일어나야 한다. 각 변화는 입력 값이 틀렸을 때, 맞았을 때가 다를 수 있다.

 

 

 2. 데이터 바인딩 시작

 

우선 모듈단의 build.gradle에 DataBinding 옵션을 추가 해 주어야 한다.

android {
     dataBinding {
        enabled = true
    }
}

 

그 다음에는 layout_main.xml의 내용을 <layout></layout> 태그로 감싸준다. 

 

이제는 Activity로 이동해서 Binding 객체를 만들어 준다. Binding 관련 클래스는 ActivityMainBinding으로 자동 생성 되어 있다. 해당 클래스는 <layout> 태그로 선언된 XML을 위해 자동으로 만들어지는 클래스 이다. ActivityMainBinding은 activity_main + Binding 이다.

 

 private lateinit var binding : FragmentMultiplicationBinding

 

Binding 객체를 선언 해 주고, onCreateView()안에서 layout과 Fragment를 연결 시킨다. LiveData를 사용하기 위해 lifecyclerOwner를 현재 Fragment로 지정해 준다.

 

 binding = DataBindingUtil.inflate(inflater, R.layout.fragment_multiplication, container, false)
 binding.lifecycleOwner = this

 

그 다음, viewmodel 객체를 생성해주고, binding객체에 viewmodel 데이터를 할당 해 준다.

viewModel = ViewModelProviders.of(this).get(MultiplicationViewModel::class.java)
binding.viewModel = viewModel

 

binding.viewmodel은 아래와 같이 layout에 내가 바인딩을 하겠다고 선언한 데이터 변수명 이다.

 

    <data>
        <variable
            name="viewModel"
            type="com.example.aacproject.multiplication.MultiplicationViewModel"></variable>
    </data>

 

이제 필요한 데이터들을 viewmodel에 정의 해 본다.

 

문제가 들어갈 곳에 필요한 데이터들은 7 * 8 이런식으로 숫자 두개가 필요 하다. 아래와 같이 선언 해 주었다. MutableLiveData는 변경이 가능한 LiveData이다. 그러나 left와 right는 외부에서 변경될 일이 없으므로 private로 선언 해 준다.

private val _left = MutableLiveData<Int>()
val left: LiveData<Int>
	get() = _left

private val _right = MutableLiveData<Int>()
val right: LiveData<Int>
	get() = _right

 

위의 데이터들은 아래와 같이 textview에 바인딩을 시켜주었다. string.xml에 format을 정의하고 데이터들을 formatting 시켜 주었다.

android:text="@{@string/multiple_format(viewModel.left, viewModel.right)}"

 

사용자가 값을 입력하는 EditText 같은 경우에는 양방향 데이터 바인딩을 적용시켜 주었다. 

 

 android:text="@={viewModel.answer}"

 

위의 answer데이터는 외부에서 접근 가능해야 하기 때문에 MutableLiveData의 접근지시자를 public으로 설정 해 준다.

 val answer = MutableLiveData<String>()

 

그리고 값 입력 시 버튼을 눌렀을 때는 리스너 이벤트 바인딩을 사용해서 버튼 클릭 시 viewmodel의 check가 실행되도록 하였다. viewModel의 answer은 양방향 바인딩이 된 상태여서 값으로 현재 입력된 답을 갖는다.

 

 android:onClick="@{()->viewModel.check(Integer.parseInt(viewModel.answer))}"

 

check 함수에서는 입력값에 따라 정답인지 오답인지 판단하여 문제를 갱신하고, result데이터를 셋팅한다.

fun check(input: Int) {
        if (input == _left.value!! * _right.value!!) {
            _left.value = random.nextInt(9)
            _right.value = random.nextInt(9)
            _result.value = "정답"
        } else {
            _result.value = "오답"
        }
    }

 

result TextView 또한 아래와 같이 바인딩이 되어 있는 상태이다.

 android:text="@{viewModel.result}"