참조 : developer.android.com/guide/navigation/navigation-getting-started
탐색 구성요소 시작하기 | Android 개발자 | Android Developers
이 주제는 탐색 구성요소를 설정하고 사용하는 방법을 설명합니다. 탐색 구성요소의 대략적인 개요는 탐색 개요를 참고하세요. 환경 설정 참고: 탐색 구성요소는 Android 스튜디오 3.3 이상이 필요
developer.android.com
1. 네비게이션 관련 Gradle 추가
- build.gradle에 추가
|
|
dependencies {
// 네비게이션 프래그먼트 추가
def nav_version = "2.3.3"
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}
|
cs |
- Safe Args 를 위해 build.gradle에 추가
|
|
dependencies {
def nav_version = "2.3.4"
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
}
|
cs |
|
|
id 'androidx.navigation.safeargs.kotlin'
|
cs |
- view binding 추가
|
|
viewBinding {
enabled = true
}
|
cs |
2. Bottom Navigation 에 들어갈 menu 추가
- 메뉴파일 추가하기
res > 마우스 우측버튼 클릭 > New > Adnroid Resource File
Resource type:Menu / File Name 입력 > OK 버튼 클릭
- bottom_nav_menu.xml 에 item 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/restaurantFragment"
android:title="식당"
/>
<item
android:id="@+id/shuttleBusFragment"
android:title="셔틀"
/>
<item
android:id="@+id/dustFragment"
android:title="미세먼지"
/>
</menu>
|
cs |
- item의 title대신 이미지 넣기
res > 마우스 우측버튼 클릭 > New > Vector Asset
Clip Art 의 버튼을 클릭하여 원하는 아이콘 선택 / 이름 입력
- 선택한 아이콘을 item에 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/restaurantFragment"
android:title="식당"
android:icon="@drawable/ic_baseline_restaurant_24"
/>
<item
android:id="@+id/shuttleBusFragment"
android:title="셔틀"
android:icon="@drawable/ic_baseline_directions_bus_24"
/>
<item
android:id="@+id/dustFragment"
android:title="미세먼지"
android:icon="@drawable/ic_baseline_filter_drama_24"
/>
</menu>
|
cs |
3. Fragment 생성
1) Fragment Layout 생성
layout 마우스 우측버튼 클릭 > Layout Resource File
fragment 생성
2) Layout 위젯 만들기
- tools:context는 context로 연결할 class를 설정
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:gravity="center"
tools:context="com.example.navigationtutorial02.fragment.Restaurant">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/restaurant_title"
android:textSize="40dp"
android:text="식단"
/>
</LinearLayout>
3) Fragment 클래스 생성
- Fragment Package 추가
com.example.navigation_tutorial 마우스 우측버튼 클릭 > New > Package 선택
- fragment 패키지 생성
fragment 입력
- fragment class 생성
fragment package > New > Kotlin File/Class 클릭
- Fragment로 사용할 Class 생성(Restaurant / Shuttle / Dust)
Class 선택 > 생성할 클래스명 입력
- view binding 이용하여 class에 fragment 연결하기
class Restaurant : Fragment() {
private var mBinding : FragmentRestaurantBinding? = null
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
var binding = FragmentRestaurantBinding.inflate(inflater, container, false)
mBinding = binding
return mBinding?.root
}
override fun onDestroyView() {
mBinding = null
super.onDestroyView()
}
}
- item으로 등록한 fragment들도 같은 방식으로 생성
4. Navigation Graph 생성
res > 마우스 우측버튼 클릭 > New > Adnroid Resource File
file name(nav_graph.xml) 적고, navgation 선택 후 OK
graph를 만들기 위해 fragment 추가
- app:startDestination 에 처음 시작시 나타날 fragment 입력, android:name에 각 fragment에 맞는 class입력
<?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"
app:startDestination="@id/restaurantFragment">
<fragment
android:id="@+id/shuttleFragment"
android:name="com.example.navigationtutorial02.fragment.ShuttleFragment"
android:label="fragment_shuttle"
tools:layout="@layout/fragment_shuttle" />
<fragment
android:id="@+id/restaurantFragment"
android:name="com.example.navigationtutorial02.fragment.RestaurantFragment"
android:label="fragment_restaurant"
tools:layout="@layout/fragment_restaurant" />
<fragment
android:id="@+id/dustFragment"
android:name="com.example.navigationtutorial02.fragment.DustFragment"
android:label="fragment_dust"
tools:layout="@layout/fragment_dust" />
</navigation>
5. activity_main.xml 에 BottomNavigationView / FragmentContainerView 추가
- FragmentContainerView - android:name 에 androidx.navigation.fragment.NavHostFragment 입력
- BottomNavigationView - app:menu 에 navigation 메뉴로 생성했던 nav_menu를 입력
<?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"
tools:context=".MainActivity"
android:orientation="vertical"
android:weightSum="1"
>
<androidx.fragment.app.FragmentContainerView
android:id="@+id/main_nav_host"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:name="androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph"
/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/nav_menu"
/>
</LinearLayout>
- MainActivity 에 navigation fragment와 controller를 연결
class MainActivity : AppCompatActivity() {
private lateinit var mBinding : ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// 메인view에 infalte 바인딩
mBinding = ActivityMainBinding.inflate(layoutInflater)
setContentView(mBinding.root)
// Navigation Fragment 생성
var navigationFragment = supportFragmentManager.findFragmentById(R.id.main_nav_host) as NavHostFragment
// Navigation Controller 생성
var navController = navigationFragment.navController
// Bottom Navigation 메뉴, Navigation Controller 추가
NavigationUI.setupWithNavController(mBinding.bottomNav, navController)
}
}
==> 컴파일 및 실행
github주소 : github.com/powergi-1/navigation_tutorial
