Programming: Styling the Side Menu and Navigation bar

With the navigation and Side Menu the styling for this was a little bit more tricky than the styling that we had done for the rest of the App. As majority of the app was made programatically it was easy to see where we needed to add/change the styling eg colour, font size, font style etc but there were elements in the side bar that were created in storyboard.

The navigation bar was done programatically. Using the same colour scale that we used for the detail view all we needed to do was specify the exact RGB values. The line of code “barTintColor = UIColor(r: 76, g: 61, b: 61, a: 1) ” Is the code that changes the background colour for the navigation bar. From this we were able to speciy the colour for the burger  ( menu button), The line for that is “tintColor = UIColor.whiteColor()”. As there is an image within the navigation bar, you need a UIImage and from there you can frame how big you want it too be and what image to use. See below on the code that implemented the logo and the colour of the bar.

Screen Shot 2015-05-19 at 00.03.10From this it achieved the logo we wanted and the colours scheme to match our designs.

Screen Shot 2015-05-19 at 00.12.19The title for ‘filter categories” was styled in the same manner as before. The line of code “barTintColor = UIColor(r: 239, g: 233, b: 211, a: 1)” Is the code that changes the background colour behind the text. From this we were able to specify the colour for the text that was being displayed. The line for that is “.titleTextAttributes = [NSForegroundColorAttributeName: UIColor(r: 76, g: 61, b: 61, a: 1)]” See below full code. Note this is very similar to the styling of the navigation bar as it is but for the SideMenuController rather than ViewController.

Screen Shot 2015-05-19 at 00.21.18However to change the styling of the categories was needed to be done in the storyboard. This was only tricky because we had’t been using storyboard which meant I was a little bit ropy on how to change elements. Once I had realised where to go and how to change this elements it was plain sailing from there.

StoryBoard make it very easy to change the colours of each of the cells. You just need to click on the particular cell that you want to add some styling too then on the right hand side there are attributes such as background colour, tint, alpha levels which can all be adjusted to change the colour of each element you want to change.Note: you must make sure that you select the correct element you want to change colour.

Screen Shot 2015-05-19 at 00.25.55As you can see from above all the different cells have been coloured in. By selecting these cells you can also change any labels (text) that you have. This is done in the same way.

Screen Shot 2015-05-19 at 00.34.50It was important to make sure that the styling for the app matched the designs that were created and that we made sure that the colours and style conformed to the original style guidelines that were given to us by salisbury Cathedral and Red Balloon. We believe that the overall look for the navigation bar and side bar with the design icons that were made, meet the criteria of these guidelines.

Screen Shot 2015-05-19 at 00.38.40

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s