Android Jetpack: Introducing Navigation Component

navigating around adapt by which I mean moving from one screen to another is an absolutely fundamental part of Android development historically you do this using intents or fragment transactions which in simple cases like clicking a button was easy enough but what if you wanted to do something just slightly more complex for example hooking up a common pattern like bottom navigation you need to make sure that not only your bottom navigation view actually navigates but also that it highlights the correct button oh and also that it handles the back stack in a uniform way so that users don't end up getting lost or confused cases like this are where the new navigation component shines the navigation component is a collection of libraries a plug-in and tooling that simplifies Android navigation beyond making the setup for common patterns like bottom navigation easier the component handles the back stack fragment transactions argument passing navigation based animations and deep linking importantly it gathers up all of this navigation information and puts it in one visualized location to your app the navigation graph the navigation component works out of the box with fragments and activities you can also extend the library to work with other screen implementations like your custom views let's look at some examples of the navigation components in action with a single activity swapping out multiple fragments if you're wondering why you might consider a single activity model check out ian lakes excellent talk which i've linked in the notes ok so one way to think about the navigation component is that there are three major parts working together in harmony these are the navigation graph the nav host fragment in the nav controller the navigation graph is a new resource type it's an XML file that contains and centralizes information related to navigation now this information can be visualized in the new navigation editor that is available in Android studio 3.

3 it's a graphical editor to create this well navigation graph each of these screens are called destinations or places that you can navigate to in this example they're all fragments now these arrows here are called actions and they represent the different paths that a user could take through your app if you click on one of the actions you can see a whole bunch of embedded information including data paths between destinations transition animations back stack manipulation and so on clicking on to destination you can see things like deep link URLs and launch options this is all part of the XML of the graph okay so next we have the Navajos fragment this is a fragment widget that you'll add to your layout assuming that you're doing fragment navigation it's basically a window that swaps ended out different fragment destinations that are included in your navigation graph the final piece of the puzzle is the nav controller each nav host fragment has a nav controller that you'll use in your cutlet or Java code and this is what actually instructs the navigation to occur so if I write some code like this the nav controller will then perform this navigation action based off of all of that information that was in the navigation graph and it will ultimately swap out which fragment is shown in the nav host tryman now here I'm using the actions XML ID to specify which of those action arrows to follow but an even better way to do this is using the navigation components safe rx plugin the safe args plug-in generates codes to allow you to use type safe navigation and argument passing first you'll add the Gradle plug-in to your code this will generate classes based off of your navigation graph it'll make these Direction classes for any destination that has actions and it'll make artis classes for any destination with arguments if you take your original navigation statement you can swap in these generated classes and you'll get something that looks like this instead of referring to an action by its XML ID you're making sure that you have an action that's actually associated with your destination you can also set arguments of the action passing the wrong type and the code won't compile getting the arguments you pass through is easy simply use the generated args class and you have type safe access to only the correctly named arguments no need to worry about the key value pairs of yesteryear so that was simple navigation let's talk about setting up that bottom dev the navigation component includes an additional navigation UI library in Java and KTX extensions for Kotlin that have support for options venues bottom navigation navigation view and navigation drawer it also works with action bar toolbar and collapsing toolbar for our bottom nav you'd add the bottom nav to your XML as normal you'd also create an XML menu with IDs that match the XML IDs of your destinations in your navigation graph thank you what the bond of navigation to go to then you'd use navigation UI to wire up the rest in Kotlin that's done with this handy extension function this one line of code has nav controller handled the actual navigation making sure to follow material design best practices as far as back stack management goes on top of that it handles highlighting the correct bottom buttons now we have only explored a few parts of the navigation component for a deeper trek into navigation check out the code lab and the documentation all linked below happy coding and happy navigating [Applause].

Hãy bình luận đầu tiên

Để lại một phản hồi

Thư điện tử của bạn sẽ không được hiện thị công khai.