…

이제 onClickHandler로 받은 이벤트를 activity에서 다뤄보도록 하겠습니다.

var factory = MainViewModelFactory()
var viewModel: MainViewModel = ViewModelProviders.of(this, factory).get(MainViewModel::class.java)

viewModel.clickConverter.observe(this, Observer { Toast.makeText(this, “${binding.user?.name}, ${binding.user?.address}”, Toast.LENGTH_SHORT).show()
})

binding.user = User(“이종현”, “서울시”, R.drawable.profile_sample)
binding.viewModel = viewModel
binding.setLifecycleOwner(this)

결과화면입니다.

주요파일들 전체 코드입니다. 참고로봐주시기 바랍니다.

MainActivity

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

    //setContentView(R.layout.activity_main)  
  
    var binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout._activity_main_)   //        binding.tvSample.text = "이종현의 개발블로그입니다."//id: tv_sample  
    subscribeUi(binding)  
}  
  
private fun subscribeUi(binding: ActivityMainBinding) {  
  
    var factory = MainViewModelFactory()  
    var viewModel: MainViewModel = ViewModelProviders.of(this, factory).get(MainViewModel::class._java_)  
  
    viewModel.clickConverter.observe(this, _Observer_ **{** Toast.makeText(this, "${binding._user_?.name}, ${binding._user_?.address}", Toast._LENGTH_SHORT_).show()  
    **}**)  
  
    binding._user_ = User("이종현", "서울시", R.drawable._profile_sample_)  
    binding._viewModel_ = viewModel  
    binding.setLifecycleOwner(this)  
}   }

MainViewModel

class MainViewModel : ViewModel() {
var TAG = javaClass.simpleName var clickConverter = MutableLiveData()

//클릭 이벤트를 받아온다.  
fun onClickHandler() {  
    Log.d(TAG, "클릭을하면 이곳으로 옵니다.")  
    clickConverter._value_ = Unit  
}   }

MainViewModelFactory

class MainViewModelFactory : ViewModelProvider.Factory {

override fun <T : ViewModel?> create(modelClass: Class<T>): T {  
    return MainViewModel() as T  
}   }

CustomBindingAdapter.kt

@BindingAdapter(“bind_image”)
fun bindImage(view: ImageView, res: Int?) {
Glide.with(view.context)
.load(res)
.into(view)

}

@BindingAdapter(“bind_image”, “bind_image_error”)
fun bindImage(view: ImageView, res: Int, error: Drawable) {
val options = RequestOptions()
.error(error)

Glide.with(view._context_)  
    .load(res)  
    .apply(options)  
    .into(view)   }

activity_main.xml

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

gradle.properties(이거 빼먹는경우 많습니다.)

저도 포스팅하다가 이거 깜빡해서 좀 해맸습니다.

android.useAndroidX = true
android.enableJetifier = true
org.gradle.jvmargs=-Xmx1536m
kotlin.code.style=official

7. 데이터바인딩 준비

1. 아키택쳐 가이드에 준하는 패키지 구조 확립
2. Room을 이용한 데이터베이스 세팅

MVVM 권장 앱 아키텍쳐

1. 최초 데이터를 입력시켜줄 Worker클래스 작성

2. assets에 샘플 데이터 입력

준비가 완료된 코드는 아래와 같으며 깃허브에 태그로 남겨두겠습니다.
태그명:Android-Jetpack-Databinding-사용법(3.상세편-준비하기)

준비된 패키지들의 구조는 아래와 같습니다. 최대한 간단하게 구성하도록 노력했습니다.

MVVM 패키지 구조

8. 데이터바인딩(Fragment, Adapter)

Fragment 에서의 데이터 바인딩은 Activty에서의 데이터 바인딩과 조금 다르지만 기존에 inflater로 inflate하는 방식과 상당히 유사합니다. 또한 어뎁터로 리스트를 넘겨주는 방법또한 다릅니다. 먼저 코드를 보고 설명하겠습니다.

override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
//inflater.inflate(R.layout.fragment_cat_list, container, false)
binding = DataBindingUtil.inflate(inflater, R.layout.fragment_cat_list, container, false)
subscribeUi()

return binding._root   _}...var catListAdapter = CatListAdapter()   **catListAdapter.submitList(it)   **binding.rvCatList._adapter_ = catListAdapter

구버전: inflater.inflate(R.layout.fragment_cat_list, container, false)
신버전: DataBindingUtil.inflate(inflater, R.layout.fragment_cat_list, container, false)

기존에 생성자 혹은 setData, updateData등등의 메소드를 개발자가 직접 만들어서 데이터를 세팅해주는 방식에서 androidx.recyclerview에서 지원해주는 submitList에 데이터만 입력해주면 어뎁터에서 활용이 가능합니다. 활용예는 아래와 같습니다.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CatListAdapter.ViewHolder {
return ViewHolder(RvItemCatListBinding.inflate(LayoutInflater.from(parent.context), parent, false))
}

override fun onBindViewHolder(holder: CatListAdapter.ViewHolder, position: Int) {
var cat = getItem(position)
holder.bind(cat)

}

class ViewHolder(val binding: RvItemCatListBinding) : RecyclerView.ViewHolder(binding.root) {
fun bind(mCat: Cat) {
binding.apply {
cat = mCat
executePendingBindings()
}
}
}

1. onCreateViewHolder에서 ViewHolder를 생성하여 넘겨줍니다.

2. onBindViewHolder에서 getItem으로 현재 포지션의 아이템을 가져와 holder.bind를 이용하여 바인딩 해줍니다.

3. executePendingBindings 을 이용하여 뷰를 강제로 업데이트 합니다.
   notifyDataSetChanged()와 기능적으로 유사합니다.

데이터바인딩을 이용하니 어뎁터의 코드가 굉장히 깔끔해 진것을 알 수 있습니다.

제가 이용해봤을때 가장 효용가치가 높다고 판단된 부분이 어뎁터 입니다.

9. 레이아웃에 자바클래스 import

자바와 마찬가지로 import구문을 사용하여 xml레벨에서 해당 클래스를 이용 가능합니다. 복잡한 활용은 피해야 하며 최대한 직관적이고 간단하게 구현해야 합니다.

이미지뷰에 이미지가 제대로 세팅되지 않았을경우 이미지뷰를 보여주지 않는 코드를 작성해보겠습니다.

…<ImageView android:layout_width=”wrap_content”
android:layout_height=”150dp”
android:onClick=”@{()->viewModel.onClickHandler()}”
android:visibility=”@{user.profileURL != -1 ? View.VISIBLE : View.GONE}”
tools:srcCompat=”@drawable/profile_sample”
app:bind_image=”@{user.profileURL}”
app:bind_image_error=”@{@drawable/error_sample}”/>

10. 식 언어

식 언어는 Java 식과 매우 흡사해 보입니다. 다음 사항은 Java 식과 똑같습니다.( 식언어는 간단한 예만 작성하고 따로 설명하지는 않겠습니다. 편의상 i와 j로 표기하겠습니다.)

• 수학 **+ - / * % (ex> @{i + j} ... @{i % j})**
• 문자열 연결 **+ (ex> @{i.toString() + j.toString()})**
• 논리 **&& || (ex> @{i && j})**
• 이항 **& | ^ (ex> @{i & j})**
• 단항 **+ - ! ~ (ex> @{+i} ... @{~i})**
• 시프트 **>> >>> << (ex> @{i << 32})**
• 비교 **== > < >= <= (ex> @{i == j} ... @{i <= j})**
• **instanceof (ex> @{i instanceof String})**
• 그룹화 **() (ex> @{(i + 1) + (j + 1)})**
• 리터럴 — 문자, 문자열, 숫자, **null**
• 형변환 **(ex> @{(String)i})**
• 함수 호출 **(ex> @{i.toString()})**
• 필드 액세스 **(ex> @{i.field})**
• 배열 액세스 **[] (ex> @{i[0]})**
• 삼항 연산자 **?: (ex> @{i > j ? i : j})**

한가지 특이한 연산자는 널 병합 연산잔가 있습니다.

null 병합 연산자(**??**)는 왼쪽 피연산자가 null이 아니면 왼쪽 피연산자를 선택하고, null이면 오른쪽 피연산자를 선택합니다. 두식은 기능적으로 같은 의미입니다.

android:text=”@{user.displayName ?? user.lastName}”
android:text=”@{user.displayName != null ? user.displayName : user.lastName}”

11.바인딩 어댑터 오버로딩

예를들어 이미지를 세팅할때, 이미지값이 Int타입 drawable, color ID값이 되거나, 서버로부터 이미지를 받아 String타입 URL이 될수도 있습니다. 이때 바인딩 어댑터를 어떤식으로 오버로딩 하는지 살펴보겠습니다.

//Int타입 drawable, color ID값이 되는경우
@BindingAdapter(“bind_image”)
fun bindImage(view: ImageView, res: Int?) {
Glide.with(view.context)
.load(res)
.into(view)

}//서버로부터 이미지를 받아 String타입 URL이 되는경우
@BindingAdapter(“bind_image”)
fun bindImage(view: ImageView, url: String?) {
Glide.with(view.context)
.load(url)
.into(view)

}//Int타입 drawable, color ID값이 되는경우에 오류처리를 하고 싶은경우
@BindingAdapter(“bind_image”, “bind_image_error”)
fun bindImage(view: ImageView, res: Int, error: Drawable) {
val options = RequestOptions()
.error(error)

Glide.with(view._context_)  
    .load(res)  
    .apply(options)  
    .into(view)   }

이런식으로 오버로딩을 지원하며 사용법은 아래와 같으며 매개변수 타입에 맞는 메소드에서 동작을 하며 매개변수 타입이 일치하는게 없을 경우 컴파일오류가 발생합니다.

//Int타입 drawable, color ID값이 되는경우