ºÝºÝߣ

Editor's Notes

1. How many of you experience ¡­ I¡¯ve playing around with Jetpack¡­ it would say it makes a lot of thing easier. This architecture only have one activity .. Start problem statement
2. In this video, it uses shared element transition to animate between activity.
3. The way to fix this is not intuitive. From what I¡¯ve heard there won¡¯t be a release to fix this problem. we might need to add these line of code forever. But this problem won¡¯t occur in the transition between Fragments.
4. We can treat activity as bigger component
5. By the reason I¡¯ve told you some of you might wanna try Single Activity but how?
6. By using JetPack Navigation component, we can implement single activity app really easy.
7. First of all I would like to show you the little application that I build as a demo for this talk.
8. There¡¯ll be a link to the source code of this project in my Github repo at the end of this talk. As the talk goes you¡¯ll see how I built this app by navigation component.
9. This is a new type resource previously we have drawable, menu now we have navigation graph. Navigation graph represent the screens and navigation path in your app.
10. navigation graph file is in the resource directory under navigation folder. When you open it the file you¡¯ll navigation editor like this.
11. Navigation graph come with Nav editor. You can either choose to edit in design view or raw xml file.Let¡¯s take a closer look.
12. We call each screen a destination. The destination can be Fragment, Dialog, or BottomSheetDialogFragment. And each destination can be connected by action represented as arrow in the graph.
13. Here are the things that we can do with the editor. First thing is action animation.
14. we can add argument to each destination. It can be parcelable or primitive things like Int or string.
15. specify pop to destination.
16. Like SingleTop Flag when start an activity.
17. Build the app when finishing creating your graph. There¡¯ll be some auto generated class created to comfort our development.
18. After we have our graph set up. How could we display this graph in our activity
19. This is the layout file of main_activity.xml
20. The app:defaultNavHost="true" attribute ensures that your NavHostFragment intercepts the system Back button. navGraph is where you put the graph that you have defined in the previous step in.
21. Here come the third essential element we have destination and action defined then we have a container for them to display now what left is the thing to manage all of them. That thing called NavController
22. In activity you have to specify id of NavHost. In case there¡¯re multiple NavHost in an activity.
23. We can navigate to destination by ID like this.
24. Or we can use direction it¡¯s auto-generated class which create base on the navigation graph. But why can¡¯t we just navigate with ID. The reason is we need to use direction for passing data between destination. I will talk about this in the next topic.
25. This plugin will auto generate some classes to make passing data between destination safer and easier. Previously, we need to pass the data to fragment by newInstance method right?
26. Some are optional some are not you have to check in again before putting in argument. SafeArg can safe from this mess.
27. Click on destination to add argument. It can be optional or mandatory.
28. if there¡¯s more param it can be pass via function. In this case I define url as mandatory param so the function actionBerryListFragment¡­ won¡¯t be able to compile if I don¡¯t pass item url in.
29. The data can be retrieved via BerryDetailFragmentArgs
30. Basically use can deal with every argument the BerryDetailFragmentArg
31. If you have worked with navigation drawer or bottom navigation, you may notice that there¡¯re some overhead. Navigation UI libs help get rid of it.
32. You need to add one more dependency
33. I¡¯ll show you the step to set up navigation drawer with navigation ui Lib.
34. create navHostFragment like what we did before.
35. In addition, you need to add NavigationView with menu specified.
36. It¡¯s the typical menu resource but the id need to be exactly the same as fragment id in navigation graph.
37. As you can see that it has exactly the same name as in menu resource.
38. We have everything set up now we need to bind them all together.
39. Navigation controller going to bind them all together.
40. create appBarConfiguration to control the behavior of hamburger icon and back button.
41. set up toolbar with NavController for showing correct toolbar label
42. Navigation component libs also provide the way to handle deep link
43. can navigate from destination in one graph to destination in another graph. We didn¡¯t use it in our example
44. In our example we use implicit deeplink to navigate from outside of the app like browser or other apps.
45. Jetpack navigation component make my life a lot easier. I can visualize the navigation in the app and compare side by side with the flow from the designer. as well as passing the data safely between screen. I understand that this architecture is not for everyone. Just like any other new architecture if the old architecture work well for you. You don¡¯t need to change it. But if you want to start new project it might worth a try.