Create a Splash screen on Xamarin.iOS Xamarin.Forms project

Create a Splash screen for your Xamarin.iOS app to be used with Xamarin.Forms project

Few weeks ago I explained how we can create a splash screen for Android. Xamarin.Forms takes few seconds to load at each start so it is important to provide a feedback to the user when they click on our icon. The splash screen answers that by providing a way to show a loading screen. Today we will see how we can setup a simple splashscreen with an image centered and with a text label.

This post will be composed by 3 parts:

  1. Create the splash screen
  2. Understand layout constraints
  3. Layout the splash screen

1. Create the splash screen

When creating a Xamarin.Forms project, the iOS project gets created with a Launchscreen.Storyboard.

storyboard

Compared to Xamarin.Android, this screen is already configured to show until your app has been fully loaded in the background.

Open the storyboard and the storyboard editor should appear. Our splash screen will be composed by an image with a simple text therefore drag an image view and a label and set the properties as needed.

first_splash

This looks good but if we change the device view, we can see that the layout doesn’t readjust itself. What we need is layout contraints.

view

not_adjusted

##2. Understand layout constraints

When you first select your element, it becomes surrounded by rounds which can be used to resize the element. If you click a second time, it then becomes surrounded by T and have a square in the middle. Those are the tools to set the layout constraints.

  • The I on the bottom and right are used to set a constraint on width and height or ratio.
  • The side T are used to set a constraint on the distance between the side and another element of the layout or the boundary of layout or middle of width or middle of height.
  • The middle square is used to set a constraint on the middle of the element against other elements or layout properties (like the side ones)

constraints

To set a constraint, drag or click on one of the tools.

Constraint missing

The editor helps us to see if there is anything wrong. When setting constraints, we might omit to set one that would be needed to display the layout properly. For example if we set a left constraint with a top constraint, the editor will complain that we need another constrain on width and height. This is because knowing the left and top placement is not enough for the layout to adjust the element properly. It needs to know it’s width and height too. When this happens a small icon appears at the bottom right and we can click it to have Xamarin fix our layout.

Re-position element

After we set the constraints, when we change the view we can see that the layout doesn’t change. But the difference is when we click on an element, if we have set the constraints properly, we should see a dashed area on the layout which represents the position of the element when the constraints are applied. If we see this, we can click on the top right square icon which is the button to re arrange the layout and the element should be re adjusted properly.

button

adjust

3. Layout the splash screen

In 1 we placed the splash screen elements on the layout. In 2 we understood how constraints work. Now all we need to do is to set the constraint on our splash screen elements; the image and the label.

There are multiple ways to set constraints which yield the same result. Here I will show one way.

First set the width and height of the image.
Next fix the distance of the image from the center of the screen height.
This together with the left and right allows the layout to know exactly where to position and resize the image.

Next we move to the label and set the width and height, the top to the bottom of the image (to keep the same distance among screen sizes between the top image and the label) and lastely set the center of the label to the center width of the screen. Those constraints will allow the layout to know exactly where the label must be placed.

constaints

Layout constrains are also visibile from the properties > layout menu.

layoutmenu

And that’s it, now that we have all constraints set, when changing screen size, the layout should be able to re arrange the elements.

Conclusion

Today we saw how we could create a splash screen in iOS. By creating a splash screen, we also explored how the storyboard editor works with constraints and how we can make a responsive layout. Hope you enjoyed this post! As always, if you have any question leave it here or hit me on Twitter @Kimserey_Lam. See you next time!

Other posts you will like

Support me!

Support me by visting my website. Thank you!

Support me by downloading my app BASKEE. Thank you!

baskee

Support me by downloading my app EXPENSE KING. Thank you!

expense king

Support me by downloading my app RECIPE KEEPER. Thank you!

Comments

Post a Comment

Popular posts from this blog

Microsoft Orleans logs warnings and errors

Microsoft Orleans logs warnings and errors Microsoft Orleans is a framework which helps building distributed system by implementing the actor model together with the concept of virtual actors, taking care of availability and concurrency. If you are unfamiliar with Microsoft Orleans, you can look at my previous blog post explaining the benefits of Microsoft Orleans . Even though Orleans promises to abstract the distributed system problems, there are instances where errors arise without us being able to understand what is going on. Lucky us, the logs are well documented… but only for those who can decrypt them. Today I will go through some of the errors and warnings which can be seen from silo and client so that you too can undestand what is going on. Enjoy! The code used to produce those errors can be found on my GitHub https://github.com/Kimserey/orleans-cluster-consul . 1. Client logs Logs on client appears with address {ip}:0 . 1.1. Can’t find implementation of interface An un...
Keep reading

A complete SignalR with ASP Net Core example with WSS, Authentication, Nginx

SignalR with ASP Net Core SignalR is a framework from ASP NET Core allowing us to establish a two way communication between client and server. This two way communication allows the client to send messages to the server but more importantly allows the server to push messages to the client. SignalR makes use of Websocket when available else it falls back to SSE or pulling. Today we will focus on how to setup SignalR to work with WSS, Websocket secure and how we can authenticate the user requesting to connect to our SignalR hub via Webscoket. Getting started with SignalR SSL encryption for Websocket Secure WSS Websocket Authentication with Identity Server 4 SignalR behind Nginx 1. Getting started with SignalR The Hubs are the main components of SignalR. It is an abstraction of a two way communication available for both client and server. Public functions from the hub can be called from the server code and can be called from the client. The frontend NPM package @aspnet/signalr ...
Keep reading

SDK-Style project and project.assets.json

SDK-Style project and project.assets.json Last week I encountered an issue with MSBuild while trying to run it from command line. The issue did not appear when using VisualStudio right click + build but only appeared when using msbuild.exe CLI directly with a clean project. Assets file 'C:\[...]\obj\project.assets.json' not found. Run a NuGet package restore to generate this file. When I first saw the error, few questions came to my mind which I will share today in 3 points: Overview of project.assets.json Slim SDK-Style project Mixing SDK-Style project and old projects Special shoutout to @enricosada who provided me with all the answers regarding the SDK-Style project. 1. Overview of project.assets.json project.assets.json lists all the dependencies of the project. It is created in the /obj folder when using dotnet restore or dotnet build as it implicitly calls restore before build, or msbuid.exe /t:restore with msbuild CLI. To simulate dotnet build (re...
Keep reading