Lesson 3: App Navigation

Udacity 에서 Developing Android Apps with Kotlin 이라는 강의를 듣고 lesson 별로 중요하다고 생각한 부분을 필기한 내용이다. 
영어 강의를 듣고 필기한 내용이다 보니 번역이나 해석이 잘못된 부분이 있을 수 있다. 또 일부는 영어 단어나 문장을 그대로 적어놓았다. 
정확한 내용은 강의를 직접 참고하는 것을 권한다.

Developing Android Apps with Kotlin | Udacity Free Courses

---

3. Quiz: Navigation Terms

4. Fragments

Android introduced fragments in Android 3.0 API level 11, primarily to support more dynamic and flexible UI designs on large screens such as tablets. The activity operates as a frame that contains the UI fragments and can provide UI elements that surround the fragment. UI fragment’s generally operate like a view within the activity’s layout, but like in activity, you must create a subclass of fragment to use it. This gives you a layout along with the convenient place to put UI logic, the foundation of a reusable UI component. With fragments, You can pretty much treat activities as the operating system’s entry point to the app. Since most of your UI ends up being implemented in the fragments, but the OS can only open activities. Within an activity, You tell Android which layout to use by calling setContentView in onCreate. The activity then inflates the layout and places it correctly within the activity’s layout hierarchy. With fragments, you manually inflate and return the inflated layout within the onCreate view method, which is independent of  onCreate. Another difference, since activities inherit from the context class, but fragments do not, you'll need to use the context property within a fragment to have access to app data typically associated with the context, such as string and image resources. 

OK, now we are ready to talk about navigation. You can navigate between different activities and between fragments and activity. As you navigate through activities in Android, the previous activities from within the app as well as from previous apps are arranged in a stack that we call the back stack. This back stack is ordered based upon the order in which each activity is opened. An application that has a title screen as the first screen followed by a trivia game activity would have the trivia game activity at the top of the stack, hitting the system back key would pop the trivia game activity off the stack and return to the title screen activity and hitting it again would exit the app, finishing the activity and return us to the previous app, probably the launcher. Fragments can have a similar backstack, except that entire stack is contained within the activity. All of this is controlled by a class called the fragment manager. When a fragment is instantiated by the fragment manager, the fragment transaction can optionally be added to the fragment back stack. If our example trivia app was written using fragments and we run the game screen, the fragment backstack would contain a transaction to return us to the title screen fragment. Hitting the back key would execute this transaction, effectively popping the game screen fragment off of the stack and replacing it with a title screen fragment. Hitting it again would pass the back operation through to the activity backstack, finishing the activity and exiting the app. Ultimately, you can design your navigation with either an activity containing a series of fragments, a series of activities, or a combination of both techniques. For this class we're focusing on the single activity multiple fragment model which allows you to visualize your entire apps navigation within a single graph the best way to learn about fragments is to implement them which we're going to do in the project for this lesson.

5. Quiz: Fragment Basics

• Fragment에서는 activity처럼 onCreate 메소드 내에서 view를 inflate 시키는 것이 아니라 onCreateView 메소드 내에서 inflate 시킨다. 
• Context property를 사용하여 string이나 image resource 같은 앱 데이터에 접근한다.
• UI Fragment는 Activity layout 내에 포함되고 자리를 차지한다. 

7. Exercise: Creating and Adding a Fragment (추가 필요)

Activity에서는 DataBindingUtil.setContentView를 사용해서 레이아웃으로부터 binding 클래스를 가져옴.
Fragment에선 DataBindingUtil.inflate를 onCreateView 내에서 호출.

10. Navigation Components

원칙 1️⃣: There's Always a Starting Place
앱은 고정된 출발점이 있다. 사용자가 런처에서 앱을 열었을 때, 사용자가 뒤로가기 버튼을 눌렀을 때 런처로 돌아가는 화면. 

원칙 2️⃣: You Can Always Go Back
앱의 네비게이션 state는 LIFO구조를 따라야 한다는 것인데 이것이 앞에서 언급된 backstack. Stack의 바닥에는 start destination, stack의 최상단에는 current destination. 네비게이션 스택을 변경하는 동작은 스택의 최상단에서만 이루어져야한다. 1) 새로운 destination을 상단에 push, 2) 상단의 destination을 스택에서 pop off.   

원칙 3️⃣: Up goes Back(Mostly)
Action bar의 up button과 System의 back button은 앱 내에서 이동할 때 동일하게 동작한다. System의 back button은 앱의 외부 다른 앱이나 보통 런처로 나간다. 앱의 시작화면에서는 action bar에 up button이 보여져서는 안된다.  

이러한 원칙들을 적용하여 사용자에게 일관되고 예상 가능한 경험을 제공해야한다. 

12. Exercise: Back Stack Manipulation

Navigation Controller는 back stack을 처리해준다. 우리가 destination으로 이동할 때마다 navigation controller는 각 destination을 back stack에 자동으로 추가한다. 

이것이 문제가 될 수 있는 상황은 예를 들어 TitleFragment(게임 시작 버튼을 누를 수 있는 화면), GameFragment(게임을 진행할 수 있는 화면), GameOverFragment(게임 종료를 알리는 화면) 이 순서로 진행해 왔다고 했을 때 back key를 누르면 다시 GameFragment로 돌아간다는 것이다. 게임이 이미 종료된 상태에서 다시 GameFragment로 돌아가기를 사용자는 원하지 않을 것이다. 

그럼 해결방안은? 
Navigation action은 다음 destination으로 이동하면서 back stack을 조작할 수 있게 해준다. 따라서 GameOverFragment로 이동할 때 GameOverFragment가 back stack에 push 되기 전에 GameFragment를 back stack에서 pop off하면 효율적으로 처리할 수 있다.
안드로이드 스튜디오 에디터 화면의 Pop Behaviour 항목에서 handle할 수 있다. popTo GameFragment, Inclusive에 체크하면 GameFragment를 포함하여(Inclusive) backstack에서 pop off 해버린다. 

하나의 케이스를 더 고려해보자. 
GameOverFragment에서 게임 다시 시작 버튼을 눌러 다시 Play하고 싶다면?
게임이 다시 시작될 때 GameOverFragment는 back stack에서 제거해야할 것이다. popTo에서 TitleFragment를 선택하고 Inclusive는 체크하지 않으면 gameFragment가 제일 상단에 위치하게 된다. 

이 back stack handling이 적용된 action들은 Kotlin 파일에서 onClickListener와 연결해주어야 제대로 동작한다. 

13. Quiz: Back Stack Manipulation

14. Exercise: Adding Support for the Up Button

Action Bar에 up button 추가하기. 
Navigation Controller는 NavigatoinUI라는 UI 라이브러리를 갖고 있다. 여러 기능 중에서 action bar와 통합되어 up button에 대한 올바른 동작을 구현한다. 
NavigationUI는 naviagtion controller에 access 해야한다. activity에서 navigation controller를 찾는 방법은 NavHostFragment id를 파라미터로 받는 findNavController 메소드를 사용하는 것이다. 

15. Android Navigation - Up vs Back

• Up 버튼, Back 버튼 모두 앱 내에서 이동한다. 
• Back 버튼은 앱의 외부, 다른 앱으로 이동시킨다. 

16. Google Interview: Ian Lake

https://www.youtube.com/watch?v=Enpgi-J4wWA 

17. Exercise: Adding a Menu

메뉴는 menu XML resource에서 생성한다. 
메뉴의 아이템 ID와 목적지 Fragment의 ID는 동일하게 하여 어디로 이동하기를 원하는지 네비게이션에서 알려준다. 
ID가 서로 일치하지 않으면 이동하지 않는다. 

메뉴를 화면에서 보여주려면?
MainActivity에 두면 앱의 모든 화면에서 보여진다. 
먼저 안드로이드에게 보여지길 원하는 Activity / Fragment에 연결된 메뉴가 있음을 onCreate / onCreateView에서 setHasOptionsMenu(true)를 추가하여 알려준다. 
Menu는 onCreateOptionsMenu를 오버라이드하여 생성하는데 layout처럼 메뉴를 inflate한다. 
Menu Item이 select되면 onOptionsItemSelected 메소드가 호출된다. 해당 메뉴에 해당하는 Fragment로 이동하려면 NavigationUI함수의 도움을 받을 수 있다. 만일 NavigationUI가 선택 항목에 대해 handle하지 않으면 super.onOptionsItemSelected를 호출하여 앱이 navigation 없이 menu item을 직접 handle할 수 있게 한다. 

여기서 유의할 만한 점은 menu는 이동하기 위한 action을 별도로 생성하지 않았다는 것인데 메뉴는 보통 한 개 이상의 destination으로 가기 위한 목적으로 사용된다. 그래서 각 메뉴에 대한 action을 명시하기가 어려울 수 있다. 따라서 menu에서는 action을 사용하기 보단 destination으로 바로 이동한다. 

18. Quiz: Matching Menu Attributes

19. Exercise: Adding Safe Arguments

Fragments 간에 arguments 전달하기
Fragments는 Android bundle 형태 내에 arguments를 포함한다. Key-Value쌍을 저장하는데 unique 키를 사용하여 associated value를 fetch 한다. bundle에는 제한된 타입(기본 primitive type이나 array 같은 값)에 대해 값으로 저장할 수 있다. 

FragmentA ➡️ Bundle ➡️ FragmentB

val argBundle = Bundle() // FragmentA 클래스에서 argument bundle 인스턴스 생성
argBundle.putString(NAME_KEY_STRING, "content")
argBundle.puString(SERIAL_KEY_INT, 42)

val fragment = FramgmentB()
fragment.arguments = argBundle // FragmentB 인스턴스에 arguments를 property로 설정

하지만 이 방식은 버그가 생길 수 있다. 타입이 맞는지 보장이 되지 않기 때문이다. 
값을 담는 변수와 arguments의 타입이 일치하지 않을 수 있다. 

그래서 Navigation은 Safe Args라는 기능을 제공한다. 
Gradle plugin으로 양쪽 Fragment에서 argument가 일치하는 코드 작성을 보장하도록 도와주고 argument passing도 단순화 시켜준다. 
1️⃣ build.gradle(project) 파일에 Safe Args Gradle plugin dependency를 추가 
2️⃣ build.gradle(App) 파일의 상단에 apply plugin: 'androidx.navigation.safeargs' 추가

Safe Arguments와 Nav direction의 상관관계? action ID를 nav direction 클래스의 action 으로 바꿔주어 arguments를 넘겨주기 위한 준비를 할 수 있음. (추가 필요)

Arguments는 navigation.xml 에디터에서 추가할 수 있다. 
넘겨받기 원하는 Fragment에서 arguments의 name과 type을 정해준다. 그러면 위에서 변경해준 nav direction에서 arguements를 넘겨줄 수 있고 넘겨주지 않으면 컴파일되지 않는다. 

20. Why do we have Safe Arguments?

21. Intents and Sharing

안드로이드는 앱 내의 activity 간에도 이동하는 것을 허용한다. 또 다른 앱에서 제공하는 activity로도 이동할 수 있다. (카메라, 연락처 등)
Intent는 앱의 intention을 나타낸다. 앱이 무언가 하기 원하는 activity. Intents는 explicit할 수도 implicit할 수도 있다. 

Explicit intent is used to launch an activity using the name of the target activity class, and they are typically only used to launch other activities within your application, navigation component가 이것을 대신해준다. navigation graph 내에서 다른 activity로 이동하도록 도와줌. 

Implicit intent는 수행될 동작에 대한 추상적인 description을 제공한다. 대개 다른 앱에 의해 expose된 activity들을 launch하는데 사용된다. 

Explicit & Implicit Intent에 대한 비유
- Explicit intent는 특정 local 편의점에 대한 설명. 
- Implicit intent는 반경 5마일 이내의 유기농 양배추를 파는 가게들. 내 반경 5마일 내에 유기농 양배추 파는 가게가 없을 수도 있는 것처럼 시스템에는 implicit intent를 handle 할 수 있는 앱이 없을 수도 있다. 

여러 앱이 동일한 implicit intent를 handle 할 수 있을 때 안드로이드는 compatible app 목록을 보여주고 고를 수 있게 한다. Implicit intent가 중요한 이유는 다른 앱에서 아무것도 앱에 대해 아는 것 없이 무언가를 요청하기 때문이다. 만일 사용자가 text를 공유하길 원한다면 메시지를 사용할지 소셜 네트워크를 사용할지는 중요하지 않다. 이 요청하는 것을 handle할 수 있는 activity를 가진 앱이면 된다. 

각 implicit intent는 action이 반드시 필요하다. 여기서의 action은 navigation action과는 완전히 다르다. 여기서는 the type of thing that the app wants to have done on its behalf. Common actions는 intent class에 정의되어 있다. 
Implicit intent는 operation을 묘사하기 위한 카테고리와 데이터 타입이 있다. 카테고리는 항상 사용되지 않고 action의 애매함을 없애기 위해 사용된다. 데이터 타입은 text, jpeg와 같이 데이터 타입을 포함할 수 있다. 이것은 accept 가능한 데이터 타입에 따라 앱이 선택되도록한다. 

모든 activity는 launch되려면 AndroidManifest.xml에 등록되어 있어야 한다. 
Explicity launch되는 activity의 경우 <activity> 태그로만 선언된다. 
Implicitly launch되는 activity의 경우 <intent-filter> 태그가 필요하다. 
이 intent-filter는 activity를 특정 action, category, type의 implicit intent에 응답할 수 있음을 노출시키기 위해 사용된다. 

22. Quiz: Explicit vs Implicit Intents

24. Exercise: Adding the Navigation Drawer

Navigation drawer: 스크린의 경계면에서 슬라이드 되어 나오는 panel. 보통 헤더와 메뉴가 있다. 좌측 스크린 경계에서 슬라이드하거나, action bar의 햄버거 메뉴를 누르면 나오는 메뉴이다. 대개 5개나 그 이상의 primary destination을 가지고 있는 복잡한 앱에서 사용한다. primary destination이란 navigation hierarchy에서 동일 위치를 갖는 경우인데 같은 navigation parent, start destination을 갖는다. 

Navigation drawer에서 destination 간에 이동할 때 it pops the back stack back to the start destinatoin, and then pushes the destinaton to be navigated to as the second element on the stack. (내 해석에 따르면 navigaton drawer의 destination들은 같은 depth를 갖고 있기 때문에 navigatoin drawer의 A 메뉴에 들어갔다가 B 메뉴에 들어가면 back stack A 위에 B가 쌓이는 것이 아닌 A가 pop out 되고 B가 들어감. )

Navigation drawer는 material library의 일부이다. 

26. Quiz: How to Navigate

27. Exercise: Using Navigation Listeners

 Navigation Listener는 우리가 navigate 할 때 마다 호출되는 single method interface이다. Naviagate 하는 동안 무언가를 하거나, 막는 일을 할 수 있다. 

28. Animation with Navigation

Navigation에서 animation을 사용하면 여러 앱들 중 눈에 띄게 해주기도 하지만 사용자가 앱의 흐름을 이애하는데에도 도움을 준다. 이런 transition은 XML animation resources에 의해서 control 된다. 
res > anim > xml 파일 생성하여 만들 수 있는데 <set></set> 내부에 명령어들을 통해 같이 동작하거나 순서대로 동작하게 할 수 있다. 또 set 안에 set을 둘 수도 있다. 

Alpha는 어떤 것이 얼마나 투명한가를 나타내는데 0%는 보이지 않음, 100%는 불투명한 것을 나타낸다. 

X offset에 대하여 -100%는 스크린 좌측, 100%는 스크린 우측. 
Y offset에 대하여 -100%는 스크린 상단, 100%는 스크린 하단. 

29. Quiz: Animation Attributes