[Android / Kotlin] Navigation 사용하기!

 

 

오늘은 안드로이드 스튜디오의 Navigation component 를 사용해보겠습니다!! 

공식문서를 보고 개발하는 것을 추천합니다! 

 

https://developer.android.com/guide/navigation

탐색  |  Android 개발자  |  Android Developers

 

 

 

 

build.gradle(module) 추가 

plugins {
id 'kotlin-kapt'
id 'androidx.navigation.safeargs.kotlin'
}

buildFeatures {
    viewBinding true
    dataBinding true
}

dependencies {
//네비게이션
implementation 'androidx.navigation:navigation-fragment-ktx:2.4.1'
implementation 'androidx.navigation:navigation-ui-ktx:2.4.1'

}

build.gradle(project) 추가 

dependencies {
def nav_version = "2.4.1"
classpath("androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version")
}

 

이제 navigation을 사용할 준비가 되었습니다! 

 

resouce 파일을 추가해줍니다.

res -> android resouce directory 추가 -> resouce type navigation 추가 

 

 

 

MainActivity 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=".MainActivity">


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

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

여기까지하고 프래그먼트 2개를 추가해줍니다 . 

(Class명을 MainFragment 와 SecondFragment 로 만들겠습니다.)

 

 

다시 nav_graph로 돌아가서 Design 탭으로 가줍니다 . 

상단에 보이는 초록색 플러스 버튼을 눌러줍니다. 그리고 우리가 만들었던 2개의 프래그먼트를 더블클릭하여 추가해줍니다.

 

 

그 후에 component Tree 쪽에서 mainFragment를 우클릭하고 set as Start Destination을 설정해줍니다 .

(맨 처음 화면을 어떤 화면으로 설정할지 정하는 것 입니다. ) 

 

그렇게 graph 쪽으로 가지고왔으면 mainFragment클릭 후 드래그하여 secondFragment 쪽으로 마우스를 옮기면 

선이 이어지는것을 볼 수 있습니다 . 

 

nav_graph  코드입니다.

<?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/mainFragment">

    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.navigation.MainFragment"
        android:label="메인화면"
        tools:layout="@layout/fragment_main">
        <action
            android:id="@+id/action_mainFragment_to_secondFragment"
            app:destination="@id/secondFragment" />

    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.navigation.SecondFragment"
        android:label="두번째"
        tools:layout="@layout/fragment_second" >
    </fragment>

</navigation>

 

 

 

 

여기까지 설정을 하였으면 MainActivity Class로 가서 코드를 설정해줍니다 . 

class MainActivity : AppCompatActivity() {

    private lateinit var appBarConfiguration: AppBarConfiguration
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //메인 액티비티에 있는 Fragment 변수명 main container
        val navHostFragment = supportFragmentManager.findFragmentById(R.id.fragmentContainerView) as NavHostFragment

        val navController = navHostFragment.navController
        appBarConfiguration = AppBarConfiguration(navController.graph)
        setupActionBarWithNavController(navController, appBarConfiguration)
    }
    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.fragmentContainerView)
        return navController.navigateUp(appBarConfiguration)
                || super.onSupportNavigateUp()
    }
}

 

 

이제 프래그먼트들에 버튼을 눌러서 화면이동을 해보겠습니다. 

MainFragment 

class MainFragment : Fragment() {

    private lateinit var binding: FragmentMainBinding
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = FragmentMainBinding.inflate(inflater,container,false)
        return binding.root
    }


    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        binding.btnMain.setOnClickListener {
            findNavController().navigate(R.id.action_mainFragment_to_secondFragment)
        }
    }

fragment_main.xml 

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainFragment">
    <Button
        android:id="@+id/btn_main"
        android:text="버튼"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</FrameLayout>

 

 

SecondFragment Class

class SecondFragment : Fragment() {
    private lateinit var binding: FragmentSecondBinding
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentSecondBinding.inflate(inflater,container,false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
    }
}

 

fragment_second.xml 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SecondFragment">
    <TextView
        android:id="@+id/tvText"
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="match_parent"
        android:text="두번째" />

</FrameLayout>

 

 

여기까지 간단하게 navigation 을 사용해봤습니다!