BottomNavigationView와 Fragment를 사용해 아래와 같은 화면을 구성해 보았다.
BottomNaviagtionView를 이용하면 화면 아래 부분에 메뉴 탭을 만들 수 있다. 각 메뉴탭들을 item이라 부르고 menu 리소스 xml 파일에서 item을 구성할 수 있다.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/my_navigation"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
app:menu="@menu/bottom_navigation_menu" />
위의 코드와 같이 BottomNavigationView를 사용할 수 있다. app:menu
속성에 item을 구성한 menu 리소스 xml 파일을 넣어주면 된다.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/homeItem"
android:icon="@drawable/home"
android:title="@string/home" />
<item
android:id="@+id/searchItem"
android:icon="@drawable/search"
android:title="@string/search" />
<item
android:id="@+id/photoItem"
android:icon="@drawable/camera"
android:title="@string/gallery" />
<item
android:id="@+id/favoriteItem"
android:icon="@drawable/heart"
android:title="@string/favorite" />
<item
android:id="@+id/accountItem"
android:icon="@drawable/user"
android:title="@string/account" />
</menu>
위의 코드는 item을 구성한 menu 리소스 파일이다. 이런 식으로 item을 생성할 수 있다.
Fragment는 하나의 레이아웃에 여러 화면이 전환될 수 있는데 전환되는 화면을 Fragment
라고 하고 이 때 사용되는 레이아웃이 FrameLayout
이다.
<FrameLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/navigation_division"
android:layout_below="@+id/toolbar_division" />
MainActivity의 레이아웃 리소스인 activity_main.xml에 위와 같이 FrameLayout을 추가하였다. 그리고 이 FrameLayout에서 전환된 화면인 Fragment 파일과 이에 대한 레이아웃 리소스 파일을 다음과 같이 구성하였다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/home" />
</androidx.constraintlayout.widget.ConstraintLayout>
class HomeFragment: Fragment() {
private lateinit var mBinding: FragmentHomeBinding
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
mBinding = FragmentHomeBinding.inflate(inflater, container, false)
return mBinding.root
}
}
위와 같이 프래그먼트 5개를 구성하였다.
이제 각각의 메뉴 탭을 눌렀을 때 화면이 전환되는 동작을 구현해 볼 것이다. 이 동작은 BottomNavigationView가 있는 MainActivity.kt 클래스 파일에 작성해야 한다.
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
initNavigationBar() //네이게이션 바의 각 메뉴 탭을 눌렀을 때 화면이 전환되도록 하는 함수.
}
fun initNavigationBar() {
binding.myNavigation.run {
setOnNavigationItemSelectedListener {
when (it.itemId) {
R.id.homeItem -> {
changeFragment(HomeFragment())
}
R.id.searchItem -> {
changeFragment(SearchFragment())
}
R.id.photoItem -> {
changeFragment(GalleryFragment())
}
R.id.favoriteItem -> {
changeFragment(FavoriteFragment())
}
R.id.accountItem -> {
changeFragment(AccountFragment())
}
}
true
}
selectedItemId = R.id.homeItem
}
}
fun changeFragment(fragment: Fragment) {
supportFragmentManager.beginTransaction()
.replace(binding.mainContent.id, fragment).commit()
}
}
onCreate()에 각 네비게이션바의 메뉴탭을 눌렀을 때 화면이 전환되도록 하는 initNavigationBar() 메서드를 호출하였다. setOnNavigationItemSelectedListener
이벤트를 통해 메뉴 탭을 눌렸음을 감지하고 각 메뉴에 맞는 화면(Fragment)로 전환되도록 한다. 그리고 맨 처음 초기 화면에서의 Fragment는 HomeFragment가 보이도록 selectedItemId = R.id.homeItem
코드를 추가하였다.
[출처] 두잇뚜-[Android] Kotlin + BottomNavigationView + Fragment 사용하기