안드로이드 앱 개발 공부/자꾸 까먹어서 적어두는 구현방법

[안드로이드] 데이터바인딩 databinding 기본 코틀린

플래시🦥 2023. 8. 17.
반응형

데이터바인딩을 사용하는 아주 기본적인 방법을 작성해보려고 한다. 

버튼을 누르면 textView의 숫자가 증가하는 아주 간단한 작동을 데이터바인딩을 사용해서 구현할 것이다. 

 

데이터바인딩을 사용하기 위해서는 첫 번째로 build.gradle(:app)에 데이터 바인딩을 사용하기 위한 설정을 해주어야 한다. 

 

1. build.gradle(:app)

android {

	...
    
    buildFeatures {
        dataBinding true
    }
}

위 코드를 추가해 주는 것이 가장 먼저 해야 할 일이다. 

 

두 번째로는 데이터바인딩에 필요한 data class를 작성해 주는 일이다. 

 

2. Data class

data class Profile(
    var age : Int
)

원하는 이름의 데이터 클래스를 원하는 변수를 포함하여 작성을 해주면 된다. 

 

그다음으로는 xml이다. 

3. xml

데이터바인딩을 사용하지 않았더라면 <레이아웃타입></> 이런 형식으로 작성을 해왔다. 하지만 데이터 바인딩을 사용하기 위해서는 

<layout> <data></data>  <레이아웃></>     </layout>의 형식을 사용해야 한다. 

레이아웃은 평상시 작성하던 것처럼 해주고 중요한 부분은 <data> 태그이다. 

이곳에서 변수의 이름과 타입을 지정해 주면 된다. 

내가 사용할 변수의 이름은 마음대로 지정을 해주고 타입에서 위에서 작성한 data class를 선언해 주면 된다. 

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="profile"
            type="com.package.name.Profile" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".DataBindingActivity">

        
    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

 

그리고 텍스트뷰의 text의 값을 변화시켜야 하기 때문에 해당 부분에 아래 코드를 추가해 주면 된다. 

android:text="@{String.valueOf(profile.age)}"

**String.valueOf()는 액티비티클래스에서 정수 변수를 사용하기 때문에 string타입으로 변환시켜 준 것이다. 

 

 

마지막으로 액티비티 클래스이다. 

4. activity class

액티비티 클래스에서 첫 번째로 변경해 주어야 할 부분은 setContentView이다. 

평상시에 사용하던 아래의 코드를 바꾸어 주어야 한다. 

 setContentView(R.layout.activity_data_binding)

위 코드가 아닌 아래의 코드로 작성해 주어야 한다. 

lateinit var binding : ActivityDataBindingBinding
binding = DataBindingUtil.setContentView(this,R.layout.activity_data_binding)

 

그리고 버튼을 눌렀을 때 데이터클래스를 사용하여 값이 커지도록 작성해 준다. 

binding.changeBtn.setOnClickListener {
            binding.profile=Profile(tmp++)
        }

그럼 끝이다!.

 

 

전체코드(activity, xml)

class DataBindingActivity : AppCompatActivity() {

    lateinit var binding : ActivityDataBindingBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        binding = DataBindingUtil.setContentView(this,R.layout.activity_data_binding)
        var tmp=0
        binding.changeBtn.setOnClickListener {
            binding.profile=Profile(tmp++)
        }
        
        binding.finishButton.setOnClickListener { finish() }
    }

}
<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="profile"
            type="com.yourpackage.name.Profile" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".DataBindingActivity">

        <TextView
            android:gravity="center"
            android:id="@+id/textView"
            android:textSize="30sp"
            android:textColor="@color/black"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(profile.age)}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <Button
            android:id="@+id/changeBtn"
            android:text="change"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <Button
            android:layout_margin="10dp"
            android:id="@+id/finish_Button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="finish()"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

 

 

실행 결과

 

 

728x90
반응형

댓글