With the .NET MAUI single project
approach, you have an easy way of adding a splash screen once and that will
automatically be used for Android and iOS. But maybe what you want for iOS is to
still use a storyboard for the splash screen. In this video,
that's exactly what we're going to see. While .NET MAUI, and especially the
single project approach makes it super easy to just define a splash
screen once or an app icon ones, and use that for all the
platforms that are supported. You can still reach into the platform's power and just use
whatever is available on that platform. So for iOS, for instance,
for the splash screens, you can still use a launch screen with a storyboard if
that's what you prefer. If you have designers that created this crazy cool
storyboard that you were using with your Xamarin app and now you want to port
that to your .NET MAUI app, you can still absolutely do that. So
in this video, that's what we're going to see. We're going to leave the splash
screen intact for Android and any other platforms that might
support it. And we're going to see how to use a custom iOS storyboard for our
.NET MAUI app. So we have the best of both worlds. So here I am.
Not in Visual Studio this time. If you've been watching my channel,
then I usually jump straight into Visual Studio. But now we're going to do
things a little bit different. So I'm going to go to Xcode. Don't be scared. We're
going to jump into Visual Studio in a little bit. But you need Xcode for
this because I just want to tell you, if you want to use a storyboard
and you need to start one from scratch, how to do it. But if you
already have an existing one, you can skip this step and you
can just go to the next part where I'm going to use that actual
storyboard. But if you want to create a new one for whatever reason, you just
start Xcode. Do File > New > File. And there you have a
template for actually creating a launch screen. You can see
it right here. So we have User Interface. You have all these kinds of things.
Don't go with the default storyboard. You want to go with the launch screen
that has some specific settings for the launch screen. So just go next. You can
save it wherever you want. We're going to put it in the right place in a
little bit. I typically don't want to use spaces in my file names here.
So I'm just going to remove that and I'm going to call it
LaunchScreen.storyboard. Click Create. And now you can start
designing here on Xcode with your storyboard. Now, I'm not
great with Xcode, I'll tell you that. So I'm just going to give this a very
quick and basic design right here. So let's just make this a
little background here. With a, I don't know, system
purple. I actually have a storyboard prepared. So you can do a couple of
things here. You can add content to this if that's what you
want. You can add labels, you can add images, you can add all that stuff
here, create a cool storyboard. You're probably a much better designer
than I am. If you've done that, we can now switch over to Visual
Studio. So let's just do that. And I have here prepared Visual Studio
Code because that's where you can run your .NET MAUI apps from as
well right now. And I have mirrored my physical iOS
device. Why that is, I'll tell you that in a
little bit. So we've got that in place and I'm going to show you
where the storyboard goes first. So here in the kind of like
File Explorer, I'll zoom that in a little bit. It won't be prettier, but
it will make it more clear hopefully. So let me zoom in here a little bit. I
have the Solution Explorer and here on the resources. So this is your
.NET MAUI project, right? The single project. You can see the csproj file
open right here. And we have the resources. And I have my LaunchScreen.storyboard
just added right there in the resources. You can stick it in a subfolder if
that's what you want, as long as you get the path right in. The next
step that I'm going to show you. But I just stuck it in like the root
of the resource folder right here. So my LaunchScreen
storyboard is in here. And now let's zoom out. And now
we want to go to our csproj.
So the csproj file, you have all this stuff in here.
I'm targeting .NET 7 right now. That will be .NET 8 really
soon. I'm going to scroll down because there is a node here for the
MauiSplashScreen, right, that's in the default template,
the .NET MAUI splash screen. It's going to use that splas.svg file, it's going to have a
background color, super cool stuff. Whenever you set this up, it will just
use that splas.svg. It will put that in the center of your screen, give
this the background color. And you have a super basic, but enough for a lot of
people, splash green. Right now we don't want to do that for
iOS anymore. So what I did is add this condition. This is
something that is available throughout the build system in net throughout all
kinds of projects. You can have these conditions and do all kinds
of cool stuff. You can already see it here in the default template. We're
doing this for making differences between Android and Windows and Tizen and do
all that kind of stuff. Now I'm going to add one of myself condition and I'm
going to check if the target platform identifier is not iOS. So whenever
we're not going to build for iOS, I'm going
to still use this splash screen. So this is still going to work for
Android this way. Perfect. That's what we want. Now what we do want to do is add
that storyboard for only iOS because Android doesn't know
how to handle storyboards. So I'm going to scroll down a little
bit further. And here I have this new item group. Now you can set this
up in a couple of different ways. A new item group seems to make sense
for this. And we can also add a condition on that item group. So
here I did condition if it is iOS. So if it's equal to iOS. So
here you can see it's not equal to iOS. Here you can see
it's equal to iOS. And what I want to do is then add this file
under Resources LaunchScreen.storyboard. If you've put
it in a subfolder, add that here and you're going to add that
storyboard. And here this makes up what the build action is going to be. So typically in
full Visual Studio or whatever you want to call the other visual
Studio on Windows, you could go to right click Properties. You can set the
build action. And that basically sets this tag right here. So we're going to
set this to InterfaceDefinition. This is still something that lives on the
Xamarin iOS, which is now called .NET for iOS layer. It's still there.
You can still use it even though we kind of like made an abstraction on
top of that with .NET MAUI. InterfaceDefinition, Include file. And
we have that launch screen which is going to be
incorporated in the right way in our iOS app right here. So we got all
of that set up. And there is one more thing that you
want to do because now we have to specify where our launch screen is
specifically for iOS. So let's go back to our File Explorer and I'm
going to go to Platforms. Let me just zoom this in a little bit for
you again. Platforms/iOS. And we need to go into the info.plist. Now if
you've been doing this for Xamarin before, then you know what is coming
probably. So we're going to do this. I'm going to zoom out again
and in the info.plist you will have this entry where
we're going to specify the key UILaunchStoryboardName. This is
typically something if you use that MauiSplashScreen, we do
that for you. We generate this for you. But now you will have to do
it manually because we're going to have to specify that Launch Screen. And
this is just the file name without the storyboard extension. So if you choose
to call it whatever, something else than LaunchScreen,
that's totally up to you. But you have to input that name here. So you could
also do a name it SplashScreen if that's what you want. But you have
to make sure that this name corresponds with the file name of your
storyboard. This key is always going to be the same. So now that we have
this set up, we can actually run it. So I have my physical device
set up here. I have selected it here in the VS Code interface so that
it's going to run on this thing right here and I
can actually start it. Now the reason why I'm doing this on a
physical device is that you can have a black splash screen whenever
you're going to run this on a simulator. As of iOS 16.4, from the top of my
head, Apple, this is not something that we
at Microsoft with .NET MAUI have thought up. This is something that
Apple is now requiring us to do. I don't know why, you have to enable code
signing to make your splash screen show up. So there's that apple
being apple. So the easiest way to kind of make
sure that you're signing your app is to run it on a device
because only code signed apps can run on a device. So that's
why I'm doing it on my physical device. I think we have work underway
to also by default code sign apps that go to the
simulator. You can totally do that so you can
have the full experience again and you're not worried and concerned that your
splash screen is not working. But for now I'm just going to show you on a
physical device. So let's go over to this run menu. Run this on my device.
It's going to come up here in a little bit. So let's just get
this out of here. It's building, it's deploying and
we'll see in a little bit that the icon is going to actually install
it on my device right here. And then whenever I start you can see
my beautiful designed splash screen. Finally, I haven't showed you because
we didn't design it together in this video. And you can
see here it is custom launch screen for .NET MAUI. Now you're going to believe
me that this is my storyboard that you've just seen that I added to this
project. I've designed this as a storyboard in Xcode and that's how to use a custom
storyboard in iOS. Now this video gives you some very
practical skills how to use a storyboard on iOS with your .NET MAUI project. But
I think there is a deeper meaning here. You still have
the power to reach into the platform and use all the stuff that is
available there that was available for Xamarin. We've made it easier with net
Maui and the single project to do all this stuff, to have an easy splash
screen, to have an app icon. But if you want to do that custom thing so
that it will feel much more like it's supposed to be on
this platform and not have some abstracted way that feels just a little bit off, you can totally still do that with .NET
MAUI. If you have any questions about that, how to do this thing with .NET
MAUI, please let me know down in the comments below and I'll be sure to
answer with another video or maybe just in a comment. See you for the
next one.
