BottomNavigationview 사용하기 - Fragment

Fragment Actionbar와 기능이 유사한 BottomNavigationview를 공부해봤는데요.

이 요소는 인스타그램 앱등 많은 앱에서 사용될 정도로 사용성이 좋은 요소여서 제가 사용한 예제와 함께 정리해보려 합니다!

 

일단 이 코드를 2번째 bulid.gradle에 추가하고 sync now를 클릭해주세요

//noinspection GradleCompatible
implementation 'com.android.support:design:30.0.0'

 

그리고 BottomNavigationview의 요소가 되는 xml 파일을 만들것인데요

res 폴더 안에 menu폴더를 만들어주신 다음 menu 폴더 안에 menu Resource파일을 추가해주세요!

*전 bottom_navigationview로 이름을 지어서 추가하였습니다!*

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/cat"
        android:icon="@drawable/icon_cat"
        android:title="cat"
        android:enabled="true"/>
    <item
        android:id="@+id/dog"
        android:icon="@drawable/icon_dog"
        android:title="dog"
        android:enabled="true"/>
    <item
        android:id="@+id/horse"
        android:icon="@drawable/icon_horse"
        android:title="horse"
        android:enabled="true"/>
    <item
        android:id="@+id/rabbit"
        android:icon="@drawable/icon_rabbit"
        android:title="rabbit"
        android:enabled="true"/>
</menu>

 

그다음으론 이 BottomNavigationview에 들어갈 요소를 만들었으니 앱의 메인 화면에 BottomNavigationview를 만들어 위의 요소와 연결지으면 됩니다

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">
     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/main_content"
        android:orientation="vertical"
        />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigationview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigationview"
        />
</LinearLayout>

app:menu="@menu/xml 파일 이름" 으로 코드를 써주시면 menu와 연동이 됩니다!

 

이제 각 메뉴가 클릭되었을때 나올 화면을 만들것인데요. new -> activity -> empty activity를 눌러 새로운 kotlin파일과 xml파일을 만들어 주시면됩니다!

class cat_fragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view = LayoutInflater.from(activity).inflate(R.layout.activity_cat_fragment,container,false)
        return view
    }

}

여기서 inflate하는 부분은 당연히 메뉴가 선택했을때 나올 화면을 담은 xml파일이겠죠??

저는 cat,dog,horse,rabbit 다 만들어줬습니다!

 

마지막으로 Mainactivity에 bottomNavigationview를 연결하고 각 메뉴를 눌렀을때 화면이 변경되는 코드를 작성하면됩니다!

 

package kr.ac.kpu.ce2017154024.fragment_practice

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import com.google.android.material.bottomnavigation.BottomNavigationView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener {
    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.cat ->{
                var catFragment = cat_fragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content,catFragment).commit()
                return true
            }
            R.id.dog ->{
                var dogFragment = dog_fragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content,dogFragment).commit()
                return true
            }
            R.id.horse ->{
                var horseFragment = horse_fragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content,horseFragment).commit()
                return true
            }
            R.id.rabbit ->{
                var rabbitFragment = rabbit_fragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content,rabbitFragment).commit()
                return true
            }


        }
        return false
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navigationview.setOnNavigationItemSelectedListener(this)


    }
}

메뉴가 눌렸을 때 linearlayout인 main_content가 바뀌는 알고리즘을

통해서 만들었습니다