데이터 바인딩_기초 사용법

데이터 바인딩

• 코드에서 뷰들을 찾지말고 xml에서 변수로 만들자
• xml 에서 변수로 만드는 데이타 영역을 만들러면 layout 이라는 큰 아이가 감싸고 있어야한다!! root 요소가 layout 이여야만 binging 클래스가 만들어진다

[1] 사용 방법

1. 그래이들에 바인딩 켜기

2. xml파일

🔨 레이아웃 구성

layout이라는 큰 영역 만들기
그 안에 넣을 두 영역
1. 레이아웃 view와 바인딩할 데이터 변수 선언 영역
2. 화면 레이아웃 뷰

<?xml version="1.0" encoding="utf-8"?>

<layout>

    <!-- 1. 레이아웃 view와 바인딩할 데이터 변수 선언 영역 -->
    <data>

        <!-- 변수이름, 자료형 쓰기  -->
        <!-- type은 별도의 클래스 만들어서 VO 단위로 가져오겠다
         : 다른 클래스에 있는 거 가져올 때 패키지 경로 다 써줘야함-->
        <variable
            name="user"
            type="com.bsj0420.ex97databinding.User" />

    </data>

    <!-- 2. 화면 레이아웃 뷰 -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="16dp"
        tools:context=".MainActivity">

        <!-- 위 선언한 변수 가져오는 키워드 : @ -->
        <TextView
            android:text="@{user.name}"
            android:padding="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <!-- int형 값을 보여주는 Text뷰 -->
        <!-- @{} 안에서는 변수나 함수 호출만 가능하다  -->
        <!-- 나이 age는 인트형이라 에러남 때문에 Stirng의
        valueOf()를 써서 String으로 버꿔야함 -->
        <TextView
            android:text="@{String.valueOf(user.age)}"
            android:padding="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


        <!-- Boolean 값을 보여주는 Checkbox만들기 -->
        <CheckBox
            android:text="좋아요"
            android:checked="@{user.fav}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onCheckedChanged="@{user::changFav}"/>

        <!-- 클릭 이벤트에 따라 이름 글씨 변경해보기 -->
        <!-- :: => 메소드 발동하는 키워드 -->
        <Button
            android:onClick="@{user::changeName}"
            android:text="체인지 네임"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <!-- age값 1 증가 버튼 -->
        <Button
            android:onClick="@{user::increaseAge}"
            android:text="숫자 +1"
            android:backgroundTint="@color/teal_700"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <!-- 좋아요 체크 상태 변경 -->
        <!-- 콜백 파라미터가 없는 애 부르는 법 -->
        <!-- 콜백용 메소드를 익명으로 만들고 람다로 쓰면 된다
        코틀린에 람다에선 자료형 쓰지 않음 한줄이면 {} 생략-->
        <Button
            android:onClick="@{ (v)-> user.toggleFav() }"
            android:text="toogle fav"
            android:backgroundTint="#CDDC39"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <!-- EditText의 글씨를 제어하기 -->
        <!-- 글씨가 변경될 때 마다 그 글씨를 보여주는 텍스트뷰 -->
        <EditText
            android:hint="enter Text"
            android:inputType="text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onTextChanged="@{user::onTextChange}"/>

        <TextView
            android:textColor="@color/black"
            android:text="@{user.message}"
            android:padding="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


        <!-- EditText의 글씨를 버튼이 클릭되면 텍스트뷰에 보여주기 -->
        <EditText
            android:onTextChanged="@{ (s,start,end,count)-> user.changeInputValue(s) }"
            android:inputType="text"
            android:hint="입력하세요"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <Button
            android:onClick="@{ v -> user.clickBtn() }"
            android:text="작성완료"
            android:backgroundTint="@color/cardview_dark_background"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:text="@{user.value}"
            android:padding="8dp"
            android:textColor="@color/black"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


    </LinearLayout>

</layout>

3. MainActivity.kt 파일

• binding을 해서 layout을 참조하게한다

package com.bsj0420.ex97databinding

import android.os.Bundle
import android.widget.CompoundButton
import android.widget.CompoundButton.OnCheckedChangeListener
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.bsj0420.ex97databinding.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    
    //데이터 바인딩에서는 뷰 바인딩과 다르게 레이아웃 xml 파일의
    // root 요소가 layout 이여야만 binging 클래스가 만들어진다
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        //xml과 연결
        val binding : ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        //레이아웃 xml에서 <data>요소 안에 있는 <variable>의 
        //타입으로 지정한 User클래스를 객체로 생성하여 값을 지정
        //전체를 부르는 binding에 data도 포함됨
        binding.user = User("sam" , 20)

//        object : OnCheckedChangeListener {
//            override fun onCheckedChanged(p0: CompoundButton?, p1: Boolean) {
//            }
//
//        }

    }
}

4. User.kt

💡Observalblexxxx 사용하기

일반변수와는 다른 데이터의 변화를 감지하는 특별한 변수 !!!!
1. Observalble은 primitive type과 list, map만 있음
2. 참조형 타입은 전부 ObservableField<제네릭> 사용
3. 옵저버블 대입은 = (대입 연산자)가 아닌 set()으로 한다

🔨 콜백용 메소드가 아닌 일반 메소드 사용법

• xml에서 이벤트에 익명 콜백 함수로 부른다!!!!

1) user.kt에서 기능 작성

2) xml 에서 익명함수로 부른다

package com.bsj0420.ex97databinding

import android.view.View
import android.widget.CompoundButton
import android.widget.Toast
import androidx.databinding.ObservableBoolean
import androidx.databinding.ObservableField
import androidx.databinding.ObservableInt

class User {

    //사용자가 보여줄 정보 만들기
    //1. 기본 사용하기
//    var name : String = ""
//    var age : Int = 0
//    var fav : Boolean = true
//
//    constructor(name:String, age:Int) {
//        this.name = name
//        this.age = age
//    }

    //2. Observalblexxxx 사용하기
    //값변경이 관찰되는 멤버변수 Observalblexxxx : primitive type과 list, map만 있음
    //나머지(참조형 타입) ObservableField<제네릭> 사용
    var name : ObservableField<String> = ObservableField<String>()
    var age : ObservableInt = ObservableInt(0) //초기값 줄 수 있음
    var fav : ObservableBoolean = ObservableBoolean()

    constructor(name:String, age:Int, fav : Boolean = false) { //파라미터 디폴트값 설정
        this.name.set(name)
        //옵저버블이 알여먹을 수 있도롣 set으로 놓어줘야함
        this.age.set(age)
        this.fav.set(fav)
    }

    //버튼 체인지 네임 버튼클릭 callback method
    //클릭 콜백 메소드가 되려면 반드시 파라미터가 있어야함!!!
    fun changeName(view : View) {
        name.set("lisa")
    }

    // age 변수값을 1증가 시키는 기능 콜백 메소드
    fun increaseAge(view : View) {
        //옵저버블 인드라서 age ++ 안됨

        age.set(age.get() + 1)
    }
    
    //좋아요 버튼 값 변경하는 기능 메소드 - 콜백용 메소드가 아닌 일반 메소드
    //이 메소드를 xml버튼에 onclick 속성으로 지정한 익명 콜백 함수에서 대신 호출
    fun toggleFav() { //파라미터가 없음!!
        fav.set(!fav.get())
    }

    // 체크 상태가 변경되는 것에 반응하는 콜백메소드 - 파라미터 중료!!!
    //모든 뷰는 기본으로 context 가지고 있음
    fun changFav(v:CompoundButton , isChecked : Boolean) {
        Toast.makeText(v.context, "${isChecked}", Toast.LENGTH_SHORT).show()
        //체크 상태값을 관리하는 fav 변수값도 변경
        fav.set(isChecked)
    }


    //EditText의 글씨변화값을 가지고 있을 관찰가능한 변수
    val message : ObservableField<String> = ObservableField("message")

    // EditText의 글씨 변화 이벤트에 반응하는 콜백 메소드 - 파라미터 중요
    fun onTextChange(s : CharSequence?, start:Int, end:Int, count:Int) { //텍스트 왓쳐를 대신하는 넘
        message.set(s.toString())
    }

    //EditText의 글씨를 입력하고 버튼을 클릭하여 텍스트뷰에 보여주기
    private var inputVal : String = ""
    val value : ObservableField<String> = ObservableField(inputVal) //기잣점 맞추기

    //EditText의 글씨 변경 이벤트 콜백 메소드에 의해 호출될 일반 메소드
    fun changeInputValue(s:CharSequence) {
        inputVal = s.toString()
    }

    //작성완료버튼 클릭 콜백 메소드에 의해 호출될 일반 메소드
    fun clickBtn() {
        value.set(inputVal)
    }


}