Creating the Splash screen content page

In this section, we will begin building the user interface for our Splash page which will only be used for the Android platform, since iOS already contains a method of achieving this. The splash page will simply display the default Xamarin icon, but as we progress throughout this book, we will be refactoring this page to include a more suitable image for our app:

  1. Create a new ContentPage called SplashPage as you did in the previous section.
  2. Next, ensure that the SplashPage.cs file is displayed within the code editor and enter the following highlighted code sections:
            // 
        //  SplashPage.cs 
        //  TrackMyWalks 
        // 
        //  Created by Steven F. Daniel on 04/08/2016. 
        //  Copyright © 2016 GENIESOFT STUDIOS. All rights reserved. 
        // 
        using System; 
        using System.Threading.Tasks; 
        using Xamarin.Forms; 
 
        namespace TrackMyWalks 
        { 
            public class SplashPage : ContentPage 
            {
  3. Then, locate the SplashPage constructor method and enter the following highlighted code sections:
            public SplashPage()
        {
           AbsoluteLayout splashLayout = new AbsoluteLayout
         {
           HeightRequest = 600
         };

           var image = new Image()
         {
           Source = ImageSource.FromFile("icon.png"),
           Aspect = Aspect.AspectFill,
         };

         AbsoluteLayout.SetLayoutFlags(image, AbsoluteLayoutFlags.All);
         AbsoluteLayout.SetLayoutBounds(image, new Rectangle(0f, 0f,
          1f, 1f));

         splashLayout.Children.Add(image);

         Content = new StackLayout()
         {
           Children = { splashLayout }
         };
         }
  4. Next, locate the OnAppearing method and enter the following highlighted code sections:
            protected override async void OnAppearing()
        {
           base.OnAppearing();

         // Delay for a few seconds on the splash screen
         await Task.Delay(3000);

         // Instantiate a NavigationPage with the MainPage
         var navPage = new NavigationPage(new WalksPage()
         {
           Title = "Track My Walks"
         });
           Application.Current.MainPage = navPage;
           }
         }
       }

In the preceding code snippet, we began by importing our System.Threading.Tasks class. This class will be used to perform a slight delay to allow our user to see the splash screen, as defined within the OnAppearing class method.

We then create a splashLayout variable of type AbsoluteLayout that will be used to position and size each of the child elements proportionally within our view, and then set the HeightRequest property.

Next, we declare an image variable that inherits from the Image class; then assign the Source property to the image that we would like to use and set the images Aspect property so that the image fills the view.

In our final steps, we define values for both of the LayoutFlags and LayoutBounds properties on the AbsoluteLayout class so that the image resizes within the view. Then we add our splashLayout to the content page using the StackLayout control. Finally, we override the OnAppearing class method of the Xamarin.Forms.Page page life cycle, which gets called immediately prior to the page becoming visible on the screen, and then specify a delay of three seconds prior to instantiating a new instance of the NavigationPage, which will call our WalksPage to be the main content root page.

Updating the Xamarin.Forms App class

In this section, we need to initialize the App class of Xamarin.Forms library to call our SplashPage and set the root page for our application if the detected OS device is Android. Let's take a look at how we can achieve this:

  1. Open the TrackMyWalks.cs located within the TrackMyWalks group and ensure that it is displayed within the code editor.
  2. Next, locate the App method and enter the following highlighted code sections, as shown in the following code snippet:
        // 
        //  TrackMyWalks.cs 
        //  TrackMyWalks 
        // 
        //  Created by Steven F. Daniel on 04/08/2016. 
        //  Copyright ©2016 GENIESOFT STUDIOS. All rights reserved. 
        // 
        using Xamarin.Forms; 
 
        namespace TrackMyWalks 
        { 
            public class App : Application 
            { 
                public App() 
                { 
                    // Check the Target OS Platform 
                    if (Device.OS == TargetPlatform.Android) 
                    { 
                        MainPage = new SplashPage(); 
                    } 
                    else 
                    { 
                        // The root page of your application  
                        var navPage = new NavigationPage(new TrackMyWalks.
                         WalksPage() 
                         { 
                            Title = "Track My Walks" 
                        }); 
                        MainPage = navPage; 
                    } 
                } 
            } 
        }

In the preceding code snippet, we began checking the Device.OS class to determine what OS Xamarin.Forms is running on, then used the TargetPlatform class to determine whether our app is being run on Google'sAndroid OS platform. If our app is running on Android, we set the App constructor methods MainPage to a new instance of the ContentPage that will simply use the SplashPage as the root page. Alternatively, we create a new instance of the NavigationPage class and set this to our WalksPage to be the main content root page for our ContentPage.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.172.115