Data Binding - 2

s2jjlove·2021년 6월 6일
1

안드로이드 A to Z

목록 보기
5/5
post-thumbnail

오늘은 Data Binding을 이용하여 앱을 만들어볼게요.
1편에서는 Data Binding 없이 앱을 만들었고,
오늘 2편에서는 Data Binding을 활용해볼게요.

0. 앱 미리 보기


1. gradle에 databinding 추가하기


두번째에 있는 build.gradle (Module : app)에 dataBinding을 추가해줄게요.

buildFeatures {
        dataBinding true
    }

android{} 섹션 안에서 다음과 같은 코드를 추가 후 syncGradle해줘요.


2. xml에 레이아웃 변경

데이터 바인딩을 하기 위해 기존에 있던 <LinearLayout><layout></layout>으로 감싸준 후 namespace들을 <layout>태그 안으로 이동시켜줘요.


3. Activity에 바인딩 개체 만들기

3.1 바인딩 개체 생성

onCreate 상위에 binding변수를 선언해준 후 Import해줘요.
ActivityMainBinding인 이유는 레이아웃의 이름 activity_main + Binding이기 때문이에요.

3.2 setContentView 변경

기존에 사용했던setContentView(R.layout.activity_main) 코드를 binding = DataBindingUtil.setContentView(this, R.layout.activity_main)으로 변경해준 후, DataBindingUtil을 Import 해줘요.


4. Activity에서 바인딩 개체를 사용하여 View 호출형식 변경

바인딩 개체가 생성되면 컴파일러는 레이아웃의보기 ID에서 바인딩 개체의 View 이름을 생성하여 카멜 케이스로 변환해요.
예를 들어, done_buttondoneButton, nickname_editnicknameEdit으로 변경돼요.

4.1 호출 형식 변경

기존(좌측)에 있던 호출 형식을 변경(우측)해줘요.
nicknameEdit.textEditable으로 오기 때문에 .toString()으로 캐스팅이 필요해요.
기존(상단) 코드를 변경(하단)해줘요.

.apply{}를 사용하여 위와 같이 변경도 가능해요.


5. 데이터 바인딩을 사용하여 데이터 표시

데이터 바인딩을 활용하여 뷰에서 데이터 클래스를 직접 사용할 수 있어요. 이 기술은 코드를 단순화하고 더 복잡한 케이스를 처리하는 데 매우 유용해요.

5.1 MyName 데이터 클래스 만들기

MyActivity 파일 상단 폴더에서 우클릭 > New > Kotlin Class/File으로 새 클래스 생성이 가능해요.
생성 후 데이터 클래스를 정의해줘요.

5.1 레이아웃에 데이터 추가

5.1.1 레이아웃에 태그 추가

<layout>태그와 <LinearLayout>태그 사이에 <data> </data>태그를 추가해줘요.
변수 이름을 myName 유형을 방금 생성한 데이터 클래스의 이름으로 해줘요.

5.1.2 레이아웃에 text 출력 코드 변경

기존에 사용한 android:text="@string/name" 코드를 android:text="@={myName.name}"으로 변경해줘요.
@={} 중괄호 내부에서 참조되는 데이터를 가져오는 지시문이에요.
myName데이터 클래스 myName를 가리키고 myName클래스에서 name속성을 가져와요.


6. 데이터 생성

(14행) myName으로 변수를 생성해요. 변수에 MyName 데이터 클래스의 인스턴스를 할당하고 이름을 전달해요.

(17행) myName의 값으로 XML의 변수에 직접 액세스 할 수 없어요. 바인딩 개체를 통해 할당해줘요.


7. TextView에서 데이터 클래스 사용

7.1 TextView에 text 속성 추가

android:text="@={myName.nickname}" 코드를 추가해주어 데이터 바인딩을 통해 text를 출력할 수 있게 해줘요.

7.2 Activity에서 코드 수정

binding.apply{}내부에서 기존(상단)의 코드를 변경(하단)해줘요.
invalidateAll() 코드를 추가해 업데이트된 바인딩 개체의 값으로 UI가 새로 고쳐지도록 해줘요.

8. 완성

실행 결과는 지난번과 같이 나와요. 하지만 데이터 바인딩을 사용하여 뷰에서 직접 데이터에 접근할 수 있어요.


참고자료 : https://developer.android.com/codelabs/kotlin-android-training-welcome?index=..%2F..android-kotlin-fundamentals#1

profile
Android to Zest

0개의 댓글