안드로이드에서 코틀린으로 데이터바인딩(DataBinding) 하기

안녕하세요!

너무 오랫동안 안드로이드를 안했더니 그만..!...데이터 바인딩도 까먹어서

이렇게 데이터 바인딩 편으로 돌아왔습니다~~

 

추가적으로 계속 진행하고 있던 리스트뷰 강의를

데이터 바인딩을 이용해서 하자니... 이야기가 길어질꺼 같아 분리해 보았습니다

 

 

 

 

---

 

 

 

데이터 바인딩 (Data Binding)

바인딩(Binding)은 어떤걸 묶다, 굳히다, 즉, 연결할때 쓰는 단어입니다.

안드로이드에서는 뷰와 데이터를 묶을때, 데이터 바인딩이라고 많이 합니다.

 

 

---

 

목표

1. 에딧텍스트와 텍스트뷰, 버튼을 만들고

2. 에딧텍스트 작성하면 텍스트뷰에 그대로 복사해서 보여주기

3. 에딧텍스트에 6자 이상 작성시 버튼 보이기, 6자 미만이면 숨기기

4. 버튼 클릭하면 에딧텍스트의 내용을 토스트로 출력하기

 

여기서 예제로 사용될 코드는 Medium@papered 님의 글을 참고하였습니다

 

 

 

 

---

 

 

코딩방법 비교

이전에 자주 사용하던 일반적인 코딩 방법 1. xml에 에딧텍스트뷰, 텍스트뷰, 버튼 view 작성 2.-- 3. 각 view에 id 연결 4. 각 view를 activity에서 findViewById를 함수를 이용해서 연결하기 5. 에딧텍스트 뷰에 listener를 연결하여, 조건 맞으면 버튼 보이게/안보이게 만들기, 텍스트뷰에 같은 내용 반영하기 6. 버튼 뷰에 listener를 연결하여, 클릭하면 에딧 텍스트 내용을 토스트로 보이게 만들기

데이터 바인딩으로 하는 코딩 방법 1. xml에 에딧텍스트뷰, 텍스트뷰, 버튼 view 작성 2. activity에 ViewModel 구현 3. xml에 data,variable 연결 4. activity에서 binding 선언 5. 에딧텍스트 뷰에 binding하여, 조건 맞으면 버튼 보이게/안보이게 만들기, 텍스트뷰에 같은 내용 반영하기 6. 버튼 뷰에 binding하여, 클릭하면 에딧 텍스트 내용을 토스트로 보이게 만들기

수도(pseudocode)코드로 비교해보니 오히려 데이터 바인딩 기법이 1줄 더 많아 보입니다

 

 

 

 

 

실제 코드를 비교해가며 설명해볼려했으나... 

티스토리는 붙여넣기가 정말 구리게 되는군요 --..

직접적인 비교는 포기하고 바인딩 구현 모습을 보여드릴까 합니다.

 

 

---

 

데이터 바인딩 샘플 

Medium@papered 님의 글을 참고하였습니다

위 1~6까지 과정을 부분 부분 코드로 보여드리겠습니다.

 

0. build.gradle

app단의 build.gradle에 다음과 같이 바인딩을 사용한다고 작성합니다

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.3"

    dataBinding {
        enabled = true
    }
    
    ...
}

 

1. xml에 에딧텍스트뷰, 텍스트뷰, 버튼 view 작성

<LinearLayout
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ff00ff"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Touch!"/>

</LinearLayout>

 

 

2. activity에 ViewModel 구현

바인딩을 해줄 객체의 중간다리로 사용할 ViewModel 입니다

변하는 것을 감지해주는 ObservableField를 사용해서 String을 만들어 줍니다.

그리고 버튼 클릭하면 띄어줄 토스트를 선언합니다

class ViewModel {
    val text = ObservableField<String>("")

    fun showText(view: View) {
        Toast.makeText(view.context, "${text.get()}", Toast.LENGTH_SHORT).show()
    }
}

 

 

 

3. xml에 data, variable 연결

binding을 하기 위해선 xml최상단 태그가 layout으로 변경되어야 하고, 

내부에 data 태그와 variable 태그가 필요합니다

... 으로 적힌 부분에는 1번에서 작성한 에딧텍스트와 텍스트뷰, 버튼이 들어가면 됩니다.

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <import type="android.view.View"/>
        <variable
            name="vm"
            type="com.example.kotlinmvvm.ViewModel" />
    </data>
    ...
</layout>

 

 

 

4. activity에서 binding 선언 

onCreate() 함수안에 작성해줍니다.

val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
binding.vm = ViewModel()

 

 

 

5. 에딧텍스트 뷰에 binding하여, 조건 맞으면 버튼 보이게/안보이게 만들기, 텍스트뷰에 같은 내용 반영하기

6. 버튼 뷰에 binding하여, 클릭하면 에딧 텍스트 내용을 토스트로 보이게 만들기 

위 과정을 listener를 이용해서 비교하는 과정이였기 때문에 2개의 과정으로 되어있지만.

실제로 binding을 하기 위해선 3개의 과정으로 됩니다.

EditText의 text 내용을 vm.text에 저장합니다 (@={vm.text})

TextView에는 vm.text의 내용을 반영합니다 (@{vm.text})

Button에는 클릭시 vm에 있는 토스트를 보여주는 함수를 실행합니다. (@{(view) -> vm.showText(view)})

그리고 버튼이 숨겼다 보일 수 있게 visibility에 vm의 조건을 연결합니다 (@{vm.text.length > 5 ? View.VISIBLE : View.GONE})

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="text"
    android:text="@={vm.text}" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@{vm.text}"
    android:textColor="#ff00ff"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="@{(view) -> vm.showText(view) }"
    android:text="Touch!"
    android:visibility="@{vm.text.length > 5 ? View.VISIBLE : View.GONE}"/>

 

 

 

---

 

 

기존 코딩방법으로 했었으면 id를 설정해주었기 때문에 

id의 명칭이 바뀔땐 연관된 모든곳을 바꿔줘야하는 불편함이 있었지만

 

바인딩을 통해서 개발을 하게되면 정말 짧게 코딩하고

말이 Binding이지 kotlin코드와 xml코드를 많이 분리시켜줘서 

독립된 코드로 개발 할 수 있어서 정말 좋았습니다.

 

 

 

 

 

 

 

이후에는 기존에 만들던 리스트뷰에 데이터 바인딩을 적용해 보도록 하겠습니다.