[kotlin] 코틀린 데이터 바인딩을 사용하여 로그인 화면을 구현하는 방법

18 Dec 2023

kotlin

안녕하세요! 이번 포스트에서는 안드로이드 앱에서 코틀린 데이터 바인딩을 사용하여 로그인 화면을 구현하는 방법에 대해 알아보겠습니다.

코틀린 데이터 바인딩은 안드로이드 앱의 UI 요소와 비즈니스 로직을 쉽게 연결할 수 있도록 도와주는 도구입니다. 이를 통해 레이아웃 파일에서 직접 변수나 이벤트 핸들러를 사용할 수 있어 코드를 보다 간결하게 유지할 수 있습니다.

1. 프로젝트 설정

먼저, 프로젝트 수준의 build.gradle 파일에 다음과 같이 데이터 바인딩을 활성화하는 설정을 추가해야 합니다:

android {
    ...
    buildFeatures {
        dataBinding true
    }
}

2. 레이아웃 파일 작성

다음으로, 로그인 화면의 UI를 나타내는 레이아웃 파일을 작성합니다. 이때, 데이터 바인딩을 활용하기 위해 <layout> 태그로 감싸야 합니다.

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="viewModel"
            type="com.example.login.viewmodel.LoginViewModel" />
    </data>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@={viewModel.username}" />
        
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@={viewModel.password}" />
        
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Login"
            android:onClick="@{() -> viewModel.onLoginClicked()}" />

    </LinearLayout>
</layout>

위의 예시에서 viewModel 변수에 LoginViewModel을 연결하고, 각 UI 요소에서 viewModel의 속성 및 메서드를 바인딩하고 있습니다.

3. ViewModel 작성

다음으로, LoginViewModel 클래스를 작성합니다. 이 클래스는 로그인 화면의 비즈니스 로직을 담당하고, 데이터 바인딩을 통해 UI와 상호작용합니다.

import androidx.lifecycle.ViewModel
import androidx.databinding.ObservableField

class LoginViewModel : ViewModel() {
    val username = ObservableField<String>()
    val password = ObservableField<String>()

    fun onLoginClicked() {
        // 로그인 버튼 클릭 시 수행할 동작 구현
    }
}

위의 예시에서 ObservableField를 사용하여 username과 password를 감시 가능한 변수로 선언하고, onLoginClicked 메서드를 정의하고 있습니다.

4. 활용

마지막으로, LoginActivity에서 데이터 바인딩을 활용하여 레이아웃과 LoginViewModel을 연결합니다.

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.example.login.databinding.ActivityLoginBinding

class LoginActivity : AppCompatActivity() {
    private lateinit var binding: ActivityLoginBinding
    private lateinit var viewModel: LoginViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_login)
        viewModel = LoginViewModel()
        binding.viewModel = viewModel
        binding.lifecycleOwner = this
    }
}

DataBindingUtil.setContentView 메서드를 통해 레이아웃과 바인딩하고, LoginViewModel을 연결한 뒤, 라이프사이클 오너로 현재 액티비티를 설정합니다.

이제 코틀린 데이터 바인딩을 사용하여 로그인 화면을 성공적으로 구현했습니다. 데이터 바인딩을 통해 UI와 비즈니스 로직을 간결하게 연결하여 코드를 보다 재사용 가능하고 유지보수하기 쉽도록 만들 수 있습니다.

참고문헌: 안드로이드 공식 문서 - 데이터 바인딩