Lesson 6: App navigation

💡 Teach Android Development

구글에서 제공하는 교육자료를 정리하기 위한 포스트입니다.

Android Development Resources for Educators

Multiple activities and intents

앱 기능이 여러 화면으로 분리될 수 있습니다.

• 단일 item의 상세 화면 (예: 쇼핑앱의 제품)
• 새로운 item 만들기 (예: 새로운 이메일)
• 앱의 설정 표시
• 다른 앱의 서비스 액세스 (예: 사진 갤러리, 문서 탐색)

Intent

다른 Activity와 같이 다른 앱 component에서 작업을 요청합니다.

• Intent에는 일반적으로 두 가지 기본 정보가 있습니다.
  • 수행할 작업 (예: ACTION_VIEW, ACTION_EDIT, ACTION_MAIN)
  • 작업할 데이터 (예: 연락처 데이터베이스의 개인 기록)
• 일반적으로 다른 Activity로의 전환 요쳥을 지정하는데 사용됩니다.

Explicit intent

• 특정 component를 사용하여 요청을 이행
• 앱의 Activity에 내부적으로 이동합니다.
• 특정 third-party app이나 사용자가 작성한 다른 앱으로 이동합니다.

Explicit intent examples

// 앱 내의 `Activity`로의 이동
fun viewNoteDetail() {
   val intent = Intent(this, NoteDetailActivity::class.java)
   intent.putExtra(NOTE_ID, note.id)
   startActivity(intent)
}


// 특정 외부 앱으로 이동
fun openExternalApp() {
   val intent = Intent("com.example.workapp.FILE_OPEN")
   if (intent.resolveActivity(packageManager) != null) {
       startActivity(intent)
   }
}

Implicit intent

• 앱이 수행할 수 있는 일반적인 행동을 제공합니다.
• 알려진 component에 대한 data type 및 action 매핑을 사용하여 해결됩니다.
• 기준과 일치하는 모든 앱이 요청을 처리하도록 허용합니다.

Implicit intent example

// 해당 Intent의 기준과 일치하는 모든 앱이 처리합니다.
fun sendEmail() {
    val intent = Intent(Intent.ACTION_SEND)
    intent.type = "text/plain"
    intent.putExtra(Intent.EXTRA_EMAIL, emailAddresses)
    intent.putExtra(Intent.EXTRA_TEXT, "How are you?")
    
    if (intent.resolveActivity(packageManager) != null) {
        startActivity(intent)
    }
}

App bar, navigation drawer, and menus

App bar

Navigation drawer

Menu

menu items는 XML menu resource에 정의합니다. (res/menu 폴더 안에 위치)

<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/action_settings"
       android:orderInCategory="100"
       android:title="@string/action_settings"
       app:showAsAction="never" />
</menu>

More menu options

<menu>
   <group android:checkableBehavior="single">
       <item
           android:id="@+id/nav_home"
           android:icon="@drawable/ic_menu_camera"
           android:title="@string/menu_home" />
       <item
           android:id="@+id/nav_gallery"
           android:icon="@drawable/ic_menu_gallery"
           android:title="@string/menu_gallery" />
       <item
           android:id="@+id/nav_slideshow"
           android:icon="@drawable/ic_menu_slideshow"
           android:title="@string/menu_slideshow" />
   </group>
</menu>

Options menu example

<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">

   <item android:id="@+id/action_intent"
       android:title="@string/action_intent" />

   <item
       android:id="@+id/action_settings"
       android:orderInCategory="100"
       android:title="@string/action_settings"
       app:showAsAction="never" />
</menu>

orderInCategory: 그룹 내 항목의 중요도 순서
showAsAction = never: 이 항목을 App bar에 배치하지 않고 더보기 메뉴 항목에 나열합니다.
자세한 내용

Inflate options menu

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.main, menu)
    return true
}

Handle menu options selected

override fun onOptionsItemSelected(item: MenuItem): Boolean {

    when (item.itemId) {
        R.id.action_intent -> {
            val intent = Intent(Intent.ACTION_WEB_SEARCH)
            intent.putExtra(SearchManager.QUERY, "pizza")
            if (intent.resolveActivity(packageManager) != null) {
                startActivity(intent)
            }
        }
        else -> Toast.makeText(this, item.title, Toast.LENGTH_LONG).show()
    ...

Fragments

• Activity에서 UI의 일부분 또는 동작을 나타냅니다.
• Activity가 호스팅되어야 합니다.
• 생명주기는 호스트 Activity의 수명주기와 연결됩니다.
• 런타임에 추가 또는 제거 할 수 있습니다.

Note about fragments

AndroidX 버전의 Fragment 클래스를 사용합니다.
(androidx.fragment.app.Fragment)
지원 중단된 플랫폼 버전의 Fragment 클래스를 사용하지 않습니다.
(android.app.Fragment)

Navigation within an app

Navigation component

• 앱을 통해 navigation 경로를 만들기 위한 통합 편집기를 포함한 라이브러리 도구 모음입니다.
• 그래프당 여러 Fragment 대상이 있고, 하나의 Activity로 가정합니다.
• 세가지 주요 부분으로 구성됩니다.
  • Navigation graph
  • Navigation Host (NavHost)
  • Navigation Controller (NavController)

Add dependencies

build.gradle의 dependencies 부분에 추가합니다.

implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

Navigation host (NavHost)

Activity의 XML에 선언합니다.

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

Navigation graph

res/navigation 디렉토리에 위치합니다.

• navigation 대상과 action이 포함된 XML 파일입니다.
• 탐색할 수 있는 대상(Fragment/Activity)을 나열합니다.
• 대상 사이를 순회할 관련 action을 나열합니다.
• enter, exit 애니메이션을 나열합니다. (optionally)

Navigation Editor in Android Studio

Creating a Fragment

• Fragment 클래스를 extend 합니다.
• onCreateView()를 override 합니다.
• XML에 정의한 Fragment의 레이아웃을 inflate 합니다.

class DetailFragment : Fragment() {

   override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
           savedInstanceState: Bundle?): View? {
       return inflater.inflate(R.layout.detail_fragment, container, false)
   }
}

Specifying Fragment destinations

• 프래그먼트 대상은 navtgation graph안에 action 테그로 표시합니다.
• Action은 XML에 직접 정의하거나, Navigation Editor를 통해 소스에서 목적지까지 드래그하여 정의할 수 있습니다.
• 자동 생성되는 action ID는 action_<sourceFragment>_to_<destinationFragment> 형식을 취합니다.

Example fragment destination

<fragment
    android:id="@+id/welcomeFragment"
    android:name="com.example.android.navigation.WelcomeFragment"
    android:label="fragment_welcome"
    tools:layout="@layout/fragment_welcome" >

    <action
        android:id="@+id/action_welcomeFragment_to_detailFragment"
        app:destination="@id/detailFragment" />

</fragment>

Navigation Controller (NavController)

NavController는 navigation host에서 UI 탐색을 관리합니다.

• 대상 경로를 지정하면 action의 이름은 정해지지만 실행되지는 않습니다.
• 경로를 따르려면 NavController를 사용합니다.

Example NavController

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       ...
       val navController = findNavController(R.id.myNavHostFragment)
   }
   fun navigateToDetail() {
       navController.navigate(R.id.action_welcomeFragment_to_detailFragment)
   }
}

More custom navigation behavior

Passing data between destinations

Safe Args 사용

• argument가 유효한 type을 가지는 것을 보장합니다.
• 기본값을 제공할 수 있습니다.
• 대상의 모든 action에 대한 메소드가 포함된 <SourceDestination>Directions class가를 생성합니다.
• 정해진 모든 action에 대한 argument를 설정하는 클래스를 생성합니다.
• 대상의 argument에 대한 엑세스를 제공하는 <TargetDestination>Args 클래스를 생성합니다.

Setting up Safe Args

프로젝트 수준의 build.grdle

buildscript {
   repositories {
       google()
   }
   dependencies {
       classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
   }
}

앱 수준의 build.gradle

apply plugin: "androidx.navigation.safeargs.kotlin"

Sending data to a Fragment

• 대상 fragment이 예상하는 argument를 만듭니다.
• source 대상에서 연결하는 action을 만듭니다.
• <Source>FragmentDirections의 action 메서드에 argument를 설정합니다.
• Navigation Controller를 사용해서 해당 action을 따라 탐색합니다.
• 대상 fragment에서 argument를 검색합니다.

Destination arguments

nav_graph.xml에서 argument로 받을 data를 정의합니다.

<fragment
    android:id="@+id/multiplyFragment"
    android:name="com.example.arithmetic.MultiplyFragment"
    android:label="MultiplyFragment" >
    <argument
        android:name="number1"
        app:argType="float"
        android:defaultValue="1.0" />
    <argument
        android:name="number2"
        app:argType="float"
        android:defaultValue="1.0" />
 </fragment>

Create action from source to destination

nav_graph.xml에서 source 대상에서 다른 대상으로 보낼 action을 정의합니다.

<fragment
    android:id="@+id/fragment_input"
    android:name="com.example.arithmetic.InputFragment">

    <action
        android:id="@+id/action_to_multiplyFragment"
        app:destination="@id/multiplyFragment" />

</fragment>

Navigating with actions

InputFragment.kt에서 지정한 action을 button 클릭 시 호출합니다.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   super.onViewCreated(view, savedInstanceState)
   binding.button.setOnClickListener {
       val n1 = binding.number1.text.toString().toFloatOrNull() ?: 0.0
       val n2 = binding.number2.text.toString().toFloatOrNull() ?: 0.0

       val action = InputFragmentDirections.actionToMultiplyFragment(n1, n2)
       view.findNavController().navigate(action)
   }
}

Retrieving Fragment arguments

지정한 argument를 notnull하게 받아올 수 있습니다.

class MultiplyFragment : Fragment() {
   val args: MultiplyFragmentArgs by navArgs()
   lateinit var binding: FragmentMultiplyBinding
   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
       super.onViewCreated(view, savedInstanceState)
       val number1 = args.number1
       val number2 = args.number2
       val result = number1 * number2
       binding.output.text = "${number1} * ${number2} = ${result}"
   }
}

Navigation UI

Attach destinations to menu items

Menus revisited

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return item.onNavDestinationSelected(navController) ||
            super.onOptionsItemSelected(item)
}

DrawerLayout for navigation drawer

<androidx.drawerlayout.widget.DrawerLayout    
    android:id="@+id/drawer_layout" ...>

    <fragment
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:id="@+id/nav_host_fragment" ... />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        app:menu="@menu/activity_main_drawer" ... />

</androidx.drawerlayout.widget.DrawerLayout>

Finish setting up navigation drawer

DrawerLayout에 navigation graph을 연결합니다.

val appBarConfiguration = AppBarConfig(navController.graph, drawer)

NavController를 사용해 NavigationView를 세팅합니다.

val navView = findViewById<NavigationView>(R.id.nav_view)
navView.setupWithNavController(navController)

menu에 navtigation 연결 참고 링크

Understanding the back stack

Fragments and the back stack