Android Jetpack: manage UI navigation with Navigation Controller (Google I/O '18)
good morning thanks for getting up early to be here with us even despite the fact that some of our thunder might have been stolen by the three or four presentations
before this that demoed the navigation editor luckily we have time to go into a little bit more detail than any of the previous presentations so there's a lot of good material here and I'm Lucas product manager for architecture components and with me I have Ian and Sergey who built the navigation component and navigation if you think about it is a problem that pretty much every app on Android has to solve but until now we haven't really given you anything to do that with other than start activity which for various reasons is not the best way to go about that so if you think about yeah our job of making Android development easier navigation was a common problem with no real solution and that means that there are a lot of things that you have to solve on your own and those range from how to commit fragment transactions hopefully without throwing an exception how to test that navigation is happening correctly and that the right things are happening when navigation occurs how to map deep links to various places in your app and how to keep that deep those deep link schemes up-to-date as your app navigational structure changes passing arguments from place to place again we don't give you a type safe way to do that today how to make sure that up and back take users to the right places particularly in sort of more difficult situations like someone deep linking deep into your apps navigation hierarchy and so what this means is by the time you've finished solving these problems you typically gone one of two directions you've either written 60% of a navigation framework or you've got a lot of error-prone boilerplate everywhere navigation needs to happen in your app so you've got a bunch of parallel lines of code solving these various problems and the whole structure is fairly brittle and that's why we're oh sorry and individually these problems are pretty tractable but if you look at kind of a real-world example you can see that they can get pretty hairy so say that I have an item screen in my app and it's accessible via deep link so far so good but if someone had navigated to this screen via opening the app from the home screen they would have a couple other screens on the back stack and so hitting it up we want them to take that not out of the app from the item screen we want them to go to the category screen and then the home screen and that means that if someone deep links into the app we need to synthesize these screens and add them to the up stack before showing the item screen and talking to a third-party developer he told me it's when you're in the middle of writing the code to do this to synthesize these screens and add them to the up and back stack but only on a deep link that's when you start to feel like maybe you're solving a failure of the framework so it's just help solve problems like that that we're launching navigation and what we're giving you is a visual tool that lets you edit the navigation graph of your app which is represented in XML and that lets you define a set of available navigation actions arguments you can pass from place to place things like visual transitions and then a single navigate call activates all that at runtime and so last but not least that means one thing you never have to worry about again is touching a fragment transaction with your bare hands [Applause] so what the navigation graph is essentially just a set of what are the possible destinations people can reach in my app and those usually correspond to screens but not always so you can have the navigation control or just changing the contents of a smaller part of the screen but it's a set of navigation destinations and the actions that link them and the actions really represent how you can get from place to place so to actually navigate from point A to point B in an app you're just gonna call the correct navigation action at runtime so let's take a look at what this looks like and let's switch over to the demo okay so what we see here is a set of navigation destinations and these are fragment destinations although other options are possible and the lines connecting them with the arrowheads are our actions and those actions actually generate methods that you can call at runtime this whole thing is backed by XML as you all know and love and the XML and the navigation editor have the same set of capabilities so you can use either one we're gonna add a screen here and what you're seeing is a set of available activities and fragments in my app ok so we just added an option for them to actually answer this question successfully and win the game so now we're gonna add an action to navigate to that screen great and so that navigation action has a bunch of options that you can set obviously we're going to talk about those a little bit more for now we're gonna do one thing so we're gonna say if they've gotten to this congratulations screen that means the game is over so hitting back shouldn't take them back into a game that no longer exists so what that means is we want to on that action say let's pop to the match screen and that means I'm going to pop off everything on the back stack in between this destination and the match screen so when the user gets to the congratulations screen when they hit back they're just going to go straight to the match screen so a lot of other options I can set but let's talk about that for now let's go back and look at the congratulations screen again one other thing to mention that the the key thing that is set here is the fragment class and that's what's actually instantiated at runtime and we see layout previews here because the layout the Navigation editor knows what layout is associated with that navigation graph and because it knows what layout is associated with that navigation graph I can double click on that fragment destination to get here into the layout editor great and everything that I've just done here adding this new destination to the navigation graph an action changing what that pop behavior of that action is all this stuff I can also do programmatically at runtime so navigation editor XML or programmatic all work just fine great and now I'm gonna hand this off to get to walk you through this in more detail so the first question that might come to mind is wow this is a totally new way of kind of structuring the UI every rap and kind of brings up this question immediately like okay so what what is my activity actually meant to do right so every kind of app has a very different starting point from where you guys are right now or maybe as of two days ago on how you've kind of structured the UI of your app some may be very activity heavy very fragment heavy very much in a different system all those are certainly very valid places to be but we're moving towards a model where the activity is more just an entry point into your app rather than the activity being the owner of the content of your app it's actually just what's going to store kind of that global state so the global navigation so if you have bottom navigation drawers you're still using an action bar those are the kind of things that activities manage but it delegates to what we call a nav host for content so our nice super simple activity here we have an action bar on the top the bottom nav on the bottom and this big white box in the middle that's our nav host so in the world of navigation when you navigate between different destinations in your app we're actually doing is just replacing everything inside that box right so you have kind of that global navigation outside of that and we have hooks that you can hook that up to stay in sync with the actual nav host so what does a super simple version of this look like well if you're using fragments for destinations you want to use our nav host fragment so here we just have a activity layout that is literally just our one fragment so you do this by including the navigation fragment dependency as you might expect if you're using a totally different kind of destination it would probably also have a different kind of nav host that you add here whether it's a custom view or whatever other item that they need but for a nav host fragment we've kind of set up a few convenience methods the ability to set what navigation graph you're using in XML so you don't need to do anything programmatically to set it up it'll just go to the start destination of your graph by default and then for fragments we can actually hook this up to the system back button so we offer a method to do exactly that so you don't have to override on back pressed specifically for navigation will kind of hook up all that stuff using the magic of fragments through this default nav host option so that means that our activity actually gets to be two lines of code it would be two lines but it doesn't fit horizontally on a slide but all we need to do is just inflate our layouts that content view and then hook up the UP button now normally this is a large operation but because you've told us about the structure of your graph what we can do is in this case we're using a Kotlin extension method on activity it'll just be a static method for Java users that allows us to find the navigation controller by passing in the ID in this case the ID of our nav host fragment and that just gives us access to navigate up and navigate up is going to do the right thing based on your navigation graph you don't need to actually do a lot of extra work here by giving us your graph we are able to do this for you but for most EPS just having a single thing is not actually what you have maybe you have something a little bit more so we've kind of set up a second dependency navigation UI which is really just a set of static methods that connect your navigation component with some of the material design components some of the things like bottom nav and things like that that are very much in that kind of global navigation space but of course it it's 2018 so we have KTX one that changes those static methods into extension methods on the classes that they operate on so this is really easy for Kotlin users to kind of integrate it into your app and have navigation feel like it's just something that exists in all of the components that are out there so what does this look like if we again kind of make our navigation or our activity a little bit more complicated without a toolbar on the top and we'll add a bottle navigation view and in this case we still have the same kind of app menu that you had before on a bottom navigation view but what we do to kind of hook those things up it takes two parts one your menu here is actually going to be using the same IDs that you've had on each destination so each destination has a unique ID and we can actually use those same IDs on your menu items so that kind of builds this implicit link of oh well if you click the home menu item you're going to go to the home destination of your app so in code we're just going to set up our action bar using our toolbar and then we can do the same find nav controller to get our access to the nav controller object and then we just have a column extension for activity that allows you to say set up action bar with nav controller and this does Oh quite a bit of magic but what it's doing is it's actually going to be receiving events on when you've navigated in your nav controls and using the labels that you've set up in your navigation graph to update the title of your action bar and we also have another helper method if you're using a drawer layout to automatically change it from a hamburger button into a back arrow based on what destination you're on so really kind of just those helpful patterns to make sure that those things stay in sync similarly for the bottom nav it it's just you just call set up you call set up with nav controller and redo the two-way syncing here so as you click on things in the now if it'll change the graph and do the correct transition based on the material guidelines as well as as you navigate between your app if you have separate buttons it'll actually update the selected item in the bottom navigation so this gives us a lot of power but not everyone is just using pre-built components that another team has provided you have your own custom UI right so at that point we really need to go deeper into what mouse controller actually gives you and for the super simple case you have a button you want it to go somewhere we have a convenience method create navigate onclicklistener you give it the ID of where you want to go what destination what action you want to trigger and we'll do all the work for you now this is perhaps a little bit too magical so you can't unroll it just a little bit in this case we're using another extension method on view so from any view that's been created by nav controller you can actually get a reference to your nav controller just by calling fine nav controller as you might expect and use that nav controller to call navigate and just navigate to an ID of a destination or an action in your graph nut that's it like under the covers this navigate is actually doing a lot of work so the nav controller is talking to what we call a navigator and so for fragments we were talking to a fragment navigator that we provide and that navigator knows everything about oh you called navigate I know what fragment you're going to because you gave us your class name and it's going to build all of the fragment transactions for you it's going to call add to back stack it's going to do all the things you told us to do by putting that information in your navigation graph so if you had pop up too it's going to do all that sort of stuff transitions all of that is in this one line of code and all of it can be determined either programmatically we can add
Comments
Post a Comment