[Kotlin]BottomNavigation

오늘은 BottomNavigation을 만드는 방법을 써볼것이다

 

우리가 사용하는 앱 대부분이 BottomNavigation으로 이루어지는 만큼 꼭 알아야되는 내용이라고 생각한다

 

먼저 menu라는 패키지를 만들어서 menu.xml 레이아웃을 만든다음 아래와 같이 써준다

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/diary"
            android:enabled="true"
            android:icon="@drawable/img_write"
            android:title="일기" />

        <item
            android:id="@+id/like"
            android:enabled="true"
            android:icon="@drawable/img_write"
            android:title="좋아요" />

        <item
            android:id="@+id/emotion"
            android:enabled="true"
            android:icon="@drawable/img_write"
            android:title="기분" />

    </group>

</menu>

menu.xml

 

나는 예시로 만들어보는거기 때문에 아이콘은 다 같은걸로 해주었다

 

그리고 activity_main으로 가서 bottomnavigation과 frameLayout을 추가해준다

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <FrameLayout
        android:id="@+id/fl_"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bn_"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0">
    </FrameLayout>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bn_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/menu" />


</androidx.constraintlayout.widget.ConstraintLayout>

activity_main.xml

 

 

activity_main.xml

이렇게 디자인되는걸 볼수있다

 

그다음에 일기버튼,좋아요버튼,기분 버튼을 눌렀을때 해당하는 fragment가 나올수있도록 fragment 레이아웃파일과 코틀린 파일을 각각 만들어준다

 

 

바인딩을 사용해주기위해서 build.gradle(app)에 아래 코드를 추가해준다 

// 데이터바인딩
buildFeatures{
    viewBinding = true
}

build.gradle(app).kt

 

package com.example.diary

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.diary.databinding.FragmentLikeBinding

class LikeFragment : Fragment() {

    lateinit var binding: FragmentLikeBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentLikeBinding.inflate(inflater, container, false)

        return binding.root
    }
}

LikeFragment.kt

Fragment들도 각각 이렇게 binding을 해줘야한다

 

 

그렇게 만들었으면 MainActivity.kt으로 넘어와서 initBottomNavigation()함수를 새로 만들어서 해당 버튼을 눌렀을때 해당 Fragment로 이동하도록 코드를 아래와같이 짜준다

package com.example.diary

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.diary.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //initBottomNavigation함수 실행
        initBottomNavigation()
    }


    //하단버튼 눌렀을때 fragment로 이동하도록
    private fun initBottomNavigation(){

        supportFragmentManager.beginTransaction()
            .replace(R.id.fl_, DiaryFragment())
            .commitAllowingStateLoss()

        binding.bn.setOnItemSelectedListener { item ->
            when (item.itemId) {

                R.id.diary -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.fl_, DiaryFragment())
                        .commitAllowingStateLoss()
                    return@setOnItemSelectedListener true
                }
                R.id.like -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.fl_,LikeFragment())
                        .commitAllowingStateLoss()
                    return@setOnItemSelectedListener true
                }
                R.id.emotion -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.fl_,EmotionFragment())
                        .commitAllowingStateLoss()
                    return@setOnItemSelectedListener true
                }
            }
            false
        }

    }

}

MainActivity.kt

 

diary를 눌렀을때 beginTransaction()을 이용해 Fragment를 만들어주고, DiaryFragment로 대체해준다

다른것도 마찬가지로 이렇게 연결해준다

 

이렇게하면 일기를 눌렀을때 DiaryFragment로, 좋아요를 눌렀을때 LikeFragment로, 기분을 눌렀을땐 EmotionFragment로 잘 연결된것을 볼수있다