Two Way Data Binding vs One Way Data Binding

• 단방향 데이터 바인딩을 사용하여 사용자에게 일부 데이터 (앱 대 사용자 데이터 흐름)를 표시 할 수 있습니다.
• 또한 단방향 데이터 바인딩을 사용하여 사용자 입력 (사용자 대 앱 데이터 흐름)을 얻을 수도 있습니다.
• 그러나 때로는 동일한 위젯을 통해 데이터를 표시하고 사용자 입력을 받고 싶을 때도 있습니다.
• 즉, 양방향 데이터 흐름이 필요한 경우 양방향 데이터 바인딩을 사용해야합니다.

간단한 양방향 데이터 바인딩 프로젝트 예제

새 Android Studio 프로젝트를 생성하여 시작하겠습니다. TwoWayDataBinding 데모로 이름을 지정합니다.

1 단계

먼저 앱 수준 build.gradle 파일에서 데이터 바인딩을 활성화해야합니다. 이 코드 부분을 android 블록 안에 작성하십시오.

buildFeatures{
        dataBinding true
    }

또한 kotlin-kapt 플러그인을 플러그인 블록에 추가하십시오.

id 'kotlin-kapt'

 

다음으로 ViewModel 및 LiveData에 필요한 종속성을 추가해야합니다.

def lifecycle_version = "2.3.0"
    // ViewModel
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
    // LiveData
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"

그 후, gradle을 동기화하십시오.

다음은 최종 앱 수준 build.gradle 파일입니다.

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-kapt'
}
 
android {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"
 
    defaultConfig {
        applicationId "com.anushka.twowaydatabindingdemo"
        minSdkVersion 26
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"
 
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
 
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
 
    buildFeatures{
        dataBinding true
    }
}
 
dependencies {
    def lifecycle_version = "2.3.0"
    // ViewModel
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
    // LiveData
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.3.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

 

2 단계

다음으로 새 Kotlin 클래스를 만들고 이름을 User로 지정합니다. 이것을 데이터 클래스로 만들어 봅시다. 그리고 두 개의 변수를 "이름"과 "이메일"로 추가합니다. 이를 데이터 바인딩 개체와 함께 사용합니다.

User.kt

data class User(
    var name: String,
    var email: String
)

 

3 단계

그 후 ViewModel 클래스를 만들 것입니다. 그리고 여기에 MutableLiveData 변수를 추가하여 사용자 이름을 보관합니다.

따라서 새 Kotlin 클래스를 만들고 MainActivityViewModel로 이름을 지정합니다. 이 클래스는 ViewModel ()을 확장해야합니다.

class MainActivityViewModel : ViewModel() {
 
    val userName = MutableLiveData<String>()
 
}

 

4 단계

그런 다음 activity_main.xml 파일을 엽니 다.

일반적으로 android studio는 defalult에 의해 TextView를 추가합니다. (없으면 TextView를 드래그 앤 드롭)

그런 다음 EditText를 해당 TextView의 맨 아래로 끌어다 놓습니다.

사용자가 제약 조건을 자동으로 설정하는 제약 조건 추론 버튼.

이 레이아웃에서 데이터 바인딩을 사용하려면 <layout> </ layout> 태그를 레이아웃의 가장 바깥 쪽 태그 로 추가하세요.

그런 다음 "User"유형의 레이아웃 변수를 추가합니다. (방금 생성 한 데이터 클래스)

<data>
        <variable
            name="viewModel"
            type="com.anushka.twowaydatabindingdemo.MainActivityViewModel" />
    </data>

마지막으로 레이아웃 표현식을 사용하여 ViewModel의 변수로 TextView와 EditText를 바인딩 (양방향 바인딩)합니다.

TextView에서 "text"속성 값을 ViewModel의 "userName"(MutableLiveData) 속성과 바인딩합니다.

 

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

 

다시, EditText에서 "text"속성의 값을 ViewModel의 "userName"(MutableLiveData) 속성과 바인딩합니다.

 

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

 

그래서 이것은 나의 완전한 activity_main.xml 파일입니다.

 

activity_main.xml

<?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="viewModel"
            type="com.anushka.twowaydatabindingdemo.MainActivityViewModel" />
    </data>
 
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
 
        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@={viewModel.userName}"
            android:textSize="40sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.525"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.663" />
        <EditText
            android:id="@+id/edit_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="@={viewModel.userName}"
            android:textSize="40sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.271" />
 
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

단방향 데이터 바인딩과 양방향 데이터 바인딩의 차이점 (XML)

• 단방향 데이터 바인딩을 사용할 때 중괄호 앞에 "@"만 사용합니다. "@ {viewModel.userName}"
• 그러나 양방향 데이터 바인딩의 경우 중괄호 앞에 "@"및 "="를 사용합니다. "@ = {viewModel.userName}"

5 단계

다음으로 MainActivity.kt를 엽니 다.

먼저 Data Binding 개체로 작업 할 것이므로 프로젝트를 다시 빌드 합니다 (Build => Rebuild Project).

MainActivity (또는 모든 활동)에서 데이터 바인딩, ViewModel 및 LiveData로 작업 할 때 4 가지 일반적인 작업을 수행합니다.

1. 레이아웃의 Data Binding 클래스의 인스턴스 (객체)를 생성합니다. (ActivityMainBinding)
2. ViewModel 클래스의 인스턴스 (객체)를 생성합니다. (MainActivityViewModel)
3. ViewModel 인스턴스를 Data Binding 인스턴스에 전달 (전송)합니다.
4. 데이터 바인딩 인스턴스의 라이프 사이클 소유자를 설정합니다.

여기에 마지막 MainActivity.kt가 있습니다.

MainActivity.kt

 

class MainActivity : AppCompatActivity() {
 
    private lateinit var binding: ActivityMainBinding
    private lateinit var viewModel: MainActivityViewModel
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        viewModel = ViewModelProvider(this).get(MainActivityViewModel::class.java)
        binding.viewModel = viewModel
        binding.lifecycleOwner = this
    }
}

이제 앱을 실행하고 코드가 작동하는지 살펴볼 차례입니다.

처음에는 빈 EditText가 표시됩니다. 그것에 someting을 입력하십시오. 그러면 TextView에 동일한 텍스트가 동시에 표시됩니다. 이것이 양방향 데이터 바인딩의 마법입니다.

 

 

>>이 튜토리얼의 최종 코드 프로젝트를 다운로드하기위한 GITHUB 링크

AnushkaMadusanka/TwoWayDataBindingDemo

---

원문

https://appdevnotes.com/android-two-way-data-binding-tutorial/