본문 바로가기

Project/Lifehelper

Branch : 01_uiDesign (Navigation Component / BottomNavigation View)

728x90

Localization

commit message : Create HomeAcivity : Screen switching using Navigation Component and Bottom Navigation View

 

경로 : app/build.gradle

  //navigation Component
    def nav_version = "2.3.3"
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

 

경로 : app/src/main/res/drawable/ic_alarm.xml
icon으로 사용하기위해 애플리케이션 프로젝트 내부에 다운로드한 local 경로의 svg 파일을 vector 이미지로 생성

 

경로 : app/src/main/res/navigation/nav_host.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_host"
    app:startDestination="@id/weatherFragment">

    <fragment
        android:id="@+id/weatherFragment"
        android:name="com.example.lifehelper.View.Fragment.WeatherFragment"
        android:label="fragment_weather"
        tools:layout="@layout/fragment_weather" />
    <fragment
        android:id="@+id/alarmFragment"
        android:name="com.example.lifehelper.View.Fragment.AlarmFragment"
        android:label="fragment_alarm"
        tools:layout="@layout/fragment_alarm" />
</navigation> 

 

경로 : app/src/main/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/weatherFragment"
        android:icon="@drawable/ic_cloudy"
        android:title="@string/weather"/>

    <item
        android:id="@+id/alarmFragment"
        android:icon="@drawable/ic_alarm"
        android:title="@string/alarm"/>
</menu> 

 

경로 : app/src/main/res/layout/activity_home.xml

<?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=".View.Activity.HomeActivity">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
        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"
        app:navGraph="@navigation/nav_host" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        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/bottom_nav"
        tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

경로 : app/src/main/java/com/example/lifehelper/View/Activity/HomeActivity.kt

class HomeActivity : AppCompatActivity() {

    private lateinit var navController : NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)

        navController = findNavController(R.id.nav_host_fragment)
        // nav_host와 bottom_nav의 ID들이 다르면 안됨

        findViewById<BottomNavigationView>(R.id.bottom_navigation)
            .setupWithNavController(navController)
        //NavigationUI.setupWithNavController(hbinding.bottomNavigationView, navController)
        //같은 기능
    }
}