How to make a "Splashscreen"?

MaruMaru DEMember ✭✭

Hi everyone,

I was wondering after trying a few things how I can make something like a splashscreen or a loading screen with an ActivityIndicator. I'm stuck at showing it first and after it finished the actual Page with content.

Best Answers

Answers

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Usually we just swap out the contents of the ContentPage. There are quite a few options here really, though without seeing a better idea of what you are doing it is difficult to get a clear idea of what you want.

  • VitalyChuprykVitalyChupryk USMember

    @JasonASmith‌ In iOS I usually swap RootViewController. Is it possible to do something like that in Forms?

  • MaruMaru DEMember ✭✭
    edited May 2014

    @JasonASmith‌, without going deeper in what I want (swap ActivityIndicator(ContentPage) to TabbedPage) I think the content-swapping is a good start for me. How do I do that? Do SetPage(new LoadingPage) in my main activity and then swap it somehow with a new TabbedPage for example? Doing SetPage twice is not working for me.

  • WolfgangSchreursWolfgangSchreurs NLMember ✭✭
    edited May 2014

    @VitalyChupryk‌ / @Maru

    The following seems to work fine for me, with regards to switching root view controller.

    First I create 2 pages in the App class (Edit: this is actually not required, see comment at bottom of post):

    public class App {
        public static Page GetMainPage () { 
            var rootPage = new TabbedCalculatorPage ();
            return new NavigationPage (rootPage);
        }
    
        public static Page GetContactPage () {
            return new ContactPage ();
        }
    }
    

    And my iOS AppDelegate will look like the following:

        public override bool FinishedLaunching (UIApplication app, NSDictionary options) {
            Forms.Init ();
    
            window = new UIWindow (UIScreen.MainScreen.Bounds);
    
            window.RootViewController = App.GetMainPage ().CreateViewController (); // this could be a page with an activity indicator
            window.MakeKeyAndVisible ();
    
            ShowAfterDelay (5, App.GetContactPage ()); // after some task is finished, we could display the actual main page of the app here
    
            return true;
        }
    
        async void ShowAfterDelay (int seconds, Page page) {
            await Task.Delay (seconds * 1000).ContinueWith ((t) => {
                BeginInvokeOnMainThread (() => {
                    window.RootViewController = page.CreateViewController ();
                });
            });
        }
    

    Edit: actually you don't even need to add 2 static methods the the App class. The following would be fine as well:

        ShowAfterDelay (5, new ContactPage ());
    
  • VitalyChuprykVitalyChupryk USMember

    @WolfgangSchreurs‌ That's exactly what I told - setting RootViewController of the main window but that's in platform specific code. Better to do this in PCL library. Looks like there is only way - swap contents of the ContentPage.

    I just think that's worse than just swapping pages by setting some property kind of ActivePage somewhere.

    @JasonASmith‌ Is there way to get/set active page?

  • MaruMaru DEMember ✭✭

    Do I need something like above or can I just use SetPage two times somehow?

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    SetPage cannot be used multiple times currently. It will throw an exception.

  • MaruMaru DEMember ✭✭
    edited June 2014

    @JasonASmith‌, as the above sampel is for iOS, I was trying to get it work for Android, but with no success till now. So how do I swap Pages in Android? :)

  • MaruMaru DEMember ✭✭

    @JasonASmith‌, I tried your advice but I can't get it fully working.

    I have a ContentPage where I add in the code behind an ActivityIndicator at startup. Then I change it after a little delay to another axml file which root element is a TabbedPage. When I use this.Content = new MainPage(); than I get an error because I can't put a View into a Page.
    I think I'm missing something here.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    your TabbedPage contains children ContentPage's. Perform the trick I suggested on the first page there.

  • MaruMaru DEMember ✭✭

    @JasonASmith‌, I think I understand what you mean but with this the tabs from the TabbedPage are still shown ontop of the screen. I would like to hide them till the loading behind the ActivityIndicator is finished.

  • MaruMaru DEMember ✭✭

    @JasonASmith‌, thank you, that did the trick! Thumbs up for keeping up with all my questions. You and your team doing great work here, keep it up! :)

  • ed.7143ed.7143 USMember
    edited June 2014

    @JasonASmith‌ I tried the modal page approach and it mostly works, it pushed the splash screen, I process all the data with the wait indicators all spinning correctly, but it fails when I try to pop the splash screen off.

    This is my HomePage view

    public HomePage()
        {
        this.Navigation.PushModalAsync(new SplashPage());
        this.LoadData();
    }
    
    private async void LoadData()
    {
        await Task.Delay(10000);
        await this.Navigation.PopAsync();
    }
    

    The Pop throws an exception that it can't pop the last item off of the stack on windows. This is where I must be missing some understanding, because the SplashPage is second on the stack, the HomePage which is under it should be the first thing on the stack, yes?

    (On iOS it says to use a navigation page as popasync isn't universal. I tried wrapping the splash page with a navigation page but still got the same error.

  • PedroLimaPedroLima US ✭✭

    When you use PushModalAsync you have to use PopModalAsync rather than PopAsync.

Sign In or Register to comment.