안드로이드 앱 개발

navigation을 활용 (+with bottomNavigationView) 본문

카테고리 없음

navigation을 활용 (+with bottomNavigationView)

스텝바이스텝안드로이드 2021. 6. 8. 00:27

* 참고 블로그

[안드로이드] Android Jetpack Navigation 정리 및 BottomNavigationView 에 적용 + ActionBar 적용 (Kotlin) (tistory.com)

 

[안드로이드] Android Jetpack Navigation 정리 및 BottomNavigationView 에 적용 + ActionBar 적용 (Kotlin)

[2021-03-30 업데이트] 안드로이드 코틀린 Jetpack 라이브러리들에 대해 공부중이고 Jetpack Naviagtion 중 Bottom navigation 을 프로젝트에 간단하게 적용해볼려 하고있습니다. 보면서 도움이 되는 사이트를

youngest-programming.tistory.com

 

1. 종속성 추가

//=============================navigation===============================
    def nav_version = "2.3.5"

    // Kotlin
    implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")
    implementation("androidx.navigation:navigation-ui-ktx:$nav_version")

    // Feature module Support
    implementation("androidx.navigation:navigation-dynamic-features-fragment:$nav_version")

    // Testing Navigation
    androidTestImplementation("androidx.navigation:navigation-testing:$nav_version")

    // Jetpack Compose Integration
    implementation("androidx.navigation:navigation-compose:2.4.0-alpha02")

 

2. MainActivity의 xml

<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=".ActivityMain"
    android:background="@color/white"
    android:visibility="visible">

    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <fragment
            android:id="@+id/main_nav_host"
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </FrameLayout>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"

        app:menu="@menu/my_navigation_items"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@drawable/nav_menu_selector_color"
        app:itemTextColor="@drawable/nav_menu_selector_color"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

 

3. res>navigation 폴더를 추가해주고

nav_graph.xml 파일을 형성한 후, 넣을 프래그먼트를 추가한다. (시작 프래그먼트 설정가능)

 

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/nav_graph.xml"
    app:startDestination="@id/nav_home">

    <fragment
        android:id="@+id/nav_accountings"
        android:name="com.example.today_seyebrowktver.FragmentAccounting"
        android:label="FragmentAccounting" />
    <fragment
        android:id="@+id/nav_home"
        android:name="com.example.today_seyebrowktver.Example5Fragment"
        android:label="example_5_fragment"
        tools:layout="@layout/example_5_fragment" />
    <fragment
        android:id="@+id/nav_customers"
        android:name="com.example.today_seyebrowktver.FragmentCustomers"
        android:label="FragmentCustomers" />
    <fragment
        android:id="@+id/nav_message"
        android:name="com.example.today_seyebrowktver.FragmentMessage"
        android:label="FragmentMessage" />
    <fragment
        android:id="@+id/nav_memo"
        android:name="com.example.today_seyebrowktver.FragmentMemo"
        android:label="FragmentMemo" />
</navigation>

4. bottomNavigationView의 xml

이떄 nav_graph의 id와 bottom의 item의 id가 일치해야한다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_memo"
        android:title="메모장"
        android:icon="@drawable/memo2"/>

    <item
        android:id="@+id/nav_message"
        android:title="문자"
        android:icon="@drawable/message2"/>

    <item
        android:id="@+id/nav_home"
        android:title="홈"
        android:icon="@drawable/home0"/>

    <item
        android:id="@+id/nav_accountings"
        android:title="매출"
        android:icon="@drawable/graph2"/>

    <item
        android:id="@+id/nav_customers"
        android:title="고객"
        android:icon="@drawable/customer2"/>
</menu>

5. 마지막으로 액티비티에서 NavController로 세팅해주면 끝

 private fun initNavigation(){
        val navControler = findNavController(R.id.main_nav_host)
        binding.bottomNavigation.setupWithNavController(navControler)
    }