Sunday, 18 January 2015

Xamarin Forms–Using background images on iOS

Following on from my last post on creating A Light status bar for iOS, I wanted to go one step further and add in a full-screen background image to my application. This is very easy without a navigation bar, but with one it’s a bit more involved so I thought a blog post would be in order.

If you have no navigation bar then all you really need to do is create an image of the right size (for each physical phone you want to support, such as 4S, 5S, 6, 6 Plus), add images to the resources directory and use them in code or XAML. With a navigation bar it’s a bit more involved as you need to split your source image into two separate images (one for the navigation bar and one for the remainder of the screen).

Then when you have the images defined you need to hook the images to the correct controls, and this is where it gets a little more complex. With a NavigationPage we need to set the navigation bar’s background to an image – but we can’t do this in regular Xamarin Forms code as the property is only available in a custom renderer, so we’ll need to create one.

First off though we need an image – I chose one I took in 2006 whilst on holiday with my family – this is the last time we were all together and it was a beautiful day. Anyhow, I extracted four images in total as shown in the following…

Original Marked Up

The red outline contains the navigation bar image (640px * 128px) and the background image (640px * 1008px) – these are both for an iPhone 5S which is what I have to develop on at the moment.

The green outline contains the two images for the landscape view, the navigation bar being 1136px * 64px, and the background image being 1136px * 576px. The navigation bar is shorter by default in landscape mode as the status bar is switched off. I believe it’s possible to override this and display the status bar, but I don’t need that so haven’t looked into it further.

I named those images as follows…

  • PortraitNavBar@2x.png
  • PortraitBackgrouns@2x.png
  • LandscapeNavBar@2x.png
  • LandscapeBackground@2x.png

With that done I then needed to write a bit of code. First up I had to ensure that the correct background image was shown for the content page – this was simply a job of overriding the OnSizeAllocated member of my content page…

    protected override void OnSizeAllocated (double width, double height)
{
base.OnSizeAllocated (width, height);

if (width < height)
this.BackgroundImage = "PortraitBackground.png";
else
this.BackgroundImage = "LandscapeBackground.png";

}

The OnSizeAllocated method is called when the size changes on the phone and it provides the size of the page, so this seemed like a reasonable place to determine which image to load up.


Then I needed to add in a custom render so added a deriver navigation page as shown below…

    public class CustomNavigationPage : NavigationPage
{
public CustomNavigationPage (Page content) : base(content)
{
}
}

With that defined I could then add the renderer. The purpose of this renderer is to render the background image of the navigation bar...

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(XamFormsTestbed.iOS.Renderers.CustomNavigationPageRenderer))]

namespace XamFormsTestbed.iOS.Renderers
{
public class CustomNavigationPageRenderer : NavigationRenderer
{
public override void ViewDidLoad ()
{
base.ViewDidLoad ();

var img = UIImage.FromBundle ("PortraitNavBar.png");
this.NavigationBar.SetBackgroundImage (img, UIBarMetrics.Default);

img = UIImage.FromBundle ("LandscapeNavBar.png");
this.NavigationBar.SetBackgroundImage (img, UIBarMetrics.Compact);
}
}
}

Originally I'd tried responding to size changes here, but then read an article that discussed the above mechanism and it appeared to work.


With all that in place I can now display a background image in the navigation bar and also have a correctly formatted image for both landscape and portrait orientations...

IMG_1302

IMG_1303


And there you have it – a full background image with a navigation bar. Hopefully this will help someone with their application.

20 comments:

http://www.superiorpaper.net/ said...

I think that it will not be a difficult task for you and you will get it done efficiently in no time. I will also use it as practice and will show you my work as well.

Oliver Maurice said...
This comment has been removed by the author.
Oliver Maurice said...

You could also check this site for some helpful tips about compare and contrast essay writing. Check them out

Michael Jones said...


Students could often find it tough to write their academic tasks. It could lead to they not getting desired grades in the academics. Opting for our
Assignment help could be ideal for such students and they can get a complete assignment solution from us.

petterson said...

I like the helpful information you provide in your articles. I’ll bookmark your blog and check again here regularly. I’m quite certain I will learn a lot of new stuff right here! Best of luck for the next!
cheap-dissertation-writing-service

james cook said...

Great post! I am actually getting ready to across this information, is very helpful my friend. Also great blog here with all of the valuable information you have. Keep up the good work you are doing here.
myassignmenthelp reviews

Jijo said...

Did you know the number of courses offered in the Universities here? The number is over 30,000. Is not it amazing? From science to business, everything and every subject personal statement help and essay writing service is taught here.

Jijo said...

Persuing MBA from international universities, here we provide best MBA Help at affordable prices. Buy Term Papers for your MBA online and get higher grades in your academics.

alvin hopkins said...

In finance dissertation a wrong selection of topic, the writer may have thought about scrapping the content and starting all over again from the scratch. Thus, a lot of time will be wasted to find finance dissertation topics.To make it easier for you, we have listed 30 brilliant topics, which can make the whole process of writing finance dissertation much easier.

Raihan Mohammad said...

Best Homework Helper is home to more than 3000 online live college homework tutors who are quite impressive in solving various primary homework related issues. In fact, some of these tutors hold a PhD degree, which clearly shows how competent they are at handling various school and college homework problems.

Students Assignment Help said...

Best and skilled writers at Students Assignment Help are providing Buy assignment Singapore services. We never miss any of the deadlines. Our professional writers are available online always for students help. To get homework help services from us email us at info@studentsassignmenthelp.com

MyAssignmentHelpAu said...

This post is not just informative but impressive also. The post is so convincing that it created an urge to choose Assignment Help services. You can email us at Info@Myassignmenthelpau.Com or Phone Number: +61-2-8005-8227

Students Assignment Help said...

Students Assignment Help provides the expert assignment help services outstandingly to the college students. Our online assignment writers are qualified, and you can hire our online assignment writers at info@studentsassignmenthelp.com

Adam Hebrew said...

The students have very little idea of how they can complete these assignments within a proper time. This is why they go to the Dissertation Writing services that will solve their queries. It has been observed in many cases that the students do not have the sufficient time to write the thesis or make the proper background research work for themselves. This is why the professional experts help the students to write the dissertations.

Dave Leena said...

If you are in need for online writing assistance for an intricate thesis topic, then avail our assignment writing service in U.S. and save your time to relax and do your studies properly. Our assignment help online service in USA has earned huge popularity among both domestic and international students. There’s no better place in the USA than MyAssignmenthelp. Contact us now to buy assignments online in the USA Leave your tensions to us and enjoy your free time.

Harrison Aiden said...

Thank you for posting such a great blog! I found your website perfect for my needs. It contains wonderful and helpful posts. Keep up the good work. Thank you for this wonderful Blog!
Visit: Homework Help

Saivy Hopkins said...

UAE Assignment Help will be delighted to take your worries, anxieties and stress far away from you and make it easy for you to complete your papers as quickly as you want. Turning to custom assignment help uae is the best solution to end your problems and if you find custom thesis writing stressful and time consuming, then you do not need to worry because you are not alone. Our custom thesis writing service using their knowledge and expertise developed over years to make sure that the thesis our customers will get the best.

Vikash Singh said...

I like your working style. Your blog is interesting and informative to me. This article is really good for all newbie here. Thank you for sharing with us! Good luck!. Get more info on top 10 YouTube downloader

Vikash Singh said...

Your resource is so interesting and informative for me and this article explained everything in detail. You have done superb job thanks for sharing this kind of stuff with us and also We're excited about our exclusive report on the top augmented reality development companies of 2018. Have a look at the at theaugmented reality app development companies

satyendra singh said...

Good news. Appreciate this post. Thank you for compiling and sharing it.
We provide breaking coverage for the Mobile App Marketing and update.