[Kotlin][Android] Project(우주) #1 바텀 네비게이션 설정하기, DataBinding

이전포스팅을 하고 저녁먹으러 간 사이에 합격 메일이 와있었다.

끼약 일주일 최선을 다해보자 아자자 ~~

 

 

UI

우리 앱은 하단에 바텀네비게이션을 사용해서 구성할 예정이라 이쪽을 먼저 만들어줬다.

유아이가 픽스된건 아니라 일단 틀을 짜놓고, 그 후에 아이콘과 색상들을 바꿔줄 예정이다. 

 

 

DataBinding 설정

이전 프로젝트에서는 ViewBinding을 사용했었는데 이번에는 DataBinding을 사용하기 위해 그래들에 추가해줬다.

android {
	...
    dataBinding {
        enabled = true
    }
}

 

뷰바인딩에 대해서는 이전에 포스팅 한 적이 있었는데 뷰바인딩이 binding.tvName.text = "이름" 이런식으로 뷰와 코드를 이어준다면, 데이터 바인딩은 레이아웃 자체에 android:text="@{viewmodel.userName}"  이런식으로 데이터를 연결하는 개념이다. 

뷰바인딩은 뷰와 상호작용하는 코드를 쉽게 해주는 기능이다. 뷰바인딩을 허용하면 각 xml레이아웃마다 바인딩 클래스를 자동으로 생성하는데, 레이아웃에 ID가 있는 뷰에 직접 참조를 할 수 있다. 대부분의 상황에서 뷰바인딩은 findViewById를 대체한다. 

The Data Binding Library is a support library that allows you to bind UI components in your layouts to data sources in your app using a declarative format rather than programmatically.

 

뷰바인딩과 데이터바인딩의 차이가 더 궁금해서 찾아봤는데 잘 정리된 게시글이 있었다. 

Android : Difference between DataBinding and ViewBinding

공식 문서를 보면 조금 더 이해가 쉽다. 

 

참고로, 뷰바인딩을 사용하는것이 데이터바인딩을 사용하는것보다 구현이 간단한 편이고 더 나은 성능을 내는 편이라고 한다. 따라서 공식문서에서는 단순히 findViewById()를 쓰지 않기 위한 목적으로 바인딩을 하는것이라면 뷰바인딩을 쓰는것을 권장하고있다. 

하지만, 이번 프로젝트에서는 양방향 바인딩을 사용하려하기 때문에 데이터바인딩을 사용해보려한다. 

Data Binding library works with Observable Data objects, you don't have to worry about refreshing the UI when underlying data changes.

Data Binding library provides us with Two way Data Binding, this is a technique of binding your objects to xml layouts, so that both object and layout can send data to each other.

 

 

Bottom Navigation Bar

material design을 사용하기 위해 디펜던시에 추가해줬고

implementation 'com.google.android.material:material:1.1.0'

 

res > menu에 bottom_nav.xml를 생성해줬다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_home"
        android:title="@string/menu_home"
        android:icon="@drawable/ic_menu_home"/>
    <item android:id="@+id/action_chat"
        android:title="@string/menu_chat"
        android:icon="@drawable/ic_menu_chat"/>
    <item android:id="@+id/action_my"
        android:title="@string/menu_my"
        android:icon="@drawable/ic_menu_my"/>
</menu>

 

main_activity.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"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <FrameLayout
            android:id="@+id/holder_fl_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            app:menu="@menu/bottom_nav"
            android:id="@+id/bn_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            />
    </RelativeLayout>
</layout>

 

xml을 <layout>으로 감싸주는게 데이터바인딩의 특징이다. 

 

 

각 프래그먼트 생성

HomeFragment.kt

class HomeFragment : Fragment() {
    private val TAG = "HomeFragment"

    private lateinit var binding: FragmentHomeBinding
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_home, container, false)
        binding.lifecycleOwner = viewLifecycleOwner
        return binding.root
    }
}

fragment_home.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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/menu_home" />

</layout>

 

 

바텀 네비게이션에 프래그먼트 연결

마지막으로, 바텀네비게이션에서 각 메뉴를 선택하면 프래그먼트가 교체되는 코드를 MainActivity.kt에 더해줬다.

private fun replaceFragment(fragment: Fragment) {
    val fragmentTransaction: FragmentTransaction = supportFragmentManager.beginTransaction()
    fragmentTransaction.replace(R.id.holder_fl_main, fragment)
    fragmentTransaction.commit()
}

private fun navigationItemSelect() {
    binding.bnMain.run {
        setOnItemSelectedListener { item ->
            when(item.itemId) {
                R.id.action_home -> replaceFragment(HomeFragment())
                R.id.action_chat -> replaceFragment(ChatFragment())
                R.id.action_my -> replaceFragment(MyFragment())
            }
            true
        }
        selectedItemId = R.id.action_home
    }
}

 

 

결과물

 

 

 

전체 코드

GitHub - evyooo/WouldYou