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

Programming: Styling the detail view

As we already have a basic skeleton of the app (prototype) and the designs of how the app will look like once completed, we got to work with putting some of the styling into the app that the designers had produced and intended.

As we hadn’t incorporated the menu bar into the application yet, we started with styling the detail view which can be found in the detailView.swift. The detail view is where all the information about the different clauses are going to be displayed; the english translation and contextualisation.  In the detail view there are two elements to the view. The title which is detailTitle and the text as detailText. Originally we had both of these elements as UILabel but with a label it required constraints for the text. However as we had decided to make the app programatically, it was easier to make the detailText a UITextView. The reason this made it easier as UITextView has already got constraints within the view to stop the text going further than the boundaries.

The UITextView is primarily designed for areas of text that can be edited or added too therefore to allow the text to fill the area and not go over the restricted boundaries but to not be edited by users there were some statements that we had to add in. As you can see from the screenshot below, I have disabled the user interaction, this stops the text being editable and by setting the background colour to nil this makes the text field use the defined background colour for the whole detail view.

Screen Shot 2015-05-03 at 20.33.29

The main styling for the detail view, seen below, was designed on having the background as the dark brown of the colour guideline, with the main body of the text in a yellow/gold colour and the title in a different font family in a off-white colour

Detail View Design

To achieve we had to change the UIColor from a default colour guide that is set within Xcode for certain colour eg. white is UIColor.whiteColor() and red is UIColor.RedColor(). However as these colours aren’t default colours, you have to define the RGB’ colour values. This had to be done through an extension. This is due to each RGB value needs to be represented as a decimal value, which is 255 divided by the original number for Xcode to produce the exact colour code. Therefore if the first value in the RGB scale is 57 (for the RED) then the decimal will be 0.224 however instead of having to work that out every time you can implement the extension so that it will allow you to enter all the values as a whole number. See below of the extension and below that is the colour for the text of the body represented as an RGB using the extension.

Screen Shot 2015-05-03 at 21.36.08

Colour Extension

Screen Shot 2015-05-03 at 21.47.38
RGB Colour Values

The different font families and font size were all done in a similar way however these didn’t need an extension as it is already an element the Xcode recognises. This is changed by giving the detailText and detailTitle a UIFont. The main body also needed to be justified which is done the same by giving the detailText a NSTextAlignment. Which can also be seen below.

Screen Shot 2015-05-03 at 21.59.43
UIFont and NSTextAlignment

As you can see below, from the iOS Simulator,  by adding the styling to the detail view it looks very similar to the designs that were made.

Screen Shot 2015-05-03 at 22.18.25
Detail View in the Simulator

Next step is to get the logo of the Magna Carta embedded within the detail view for each of the clauses and to style the navigation bar so it looks the same as the designs that have been made for the application. Our initial thoughts are to possibly load an image slightly over the text or implement each clause title as an image. Then once the menu has been programmed within the app, styling will be applied to the side menu. This will take us further into icon and element styling looking at how users interact with them.