Programming: Sidebar Menu Prototype

For the app, we wanted to create a sidebar menu so the user will be able to select certain clauses within the app and hide other clauses. These categories included; the main clauses, church related, money orientated, justice, peace, women and royalty. As we are using a very high quality image of the Magna Carta for the basis of the Magna Carta, we were very keen on creating a function that will allow the user to hide the overlays, that display the translation and contextualisation for each clause.The reason behind this is that there are tiny details within the app that aren’t visible until you zoom into the document; for example a piece of wood stuck into the parchment. We feel that these details are valuable to the heritage of  the document and an interesting factor that people may not consider. Also as all the clauses will be highlighted using overlays it could be very distracting and may take away the impact and power of the document, therefore this function will limit this.

Some of the examples of different side bars that we have looked include;

2
Spotify Side Bar Menu
3
Peterest Side Menu
4
BBC Weather Side Bar

        

 

 

 

 

 

 

From these examples we found that the applications use libraries that have been already coded and import them into the app, very similarly to the map kit Apple supply to create apps with maps. We looked at an open source library called SWRevealViewController to build the sidebar menu. Though the library was written in Objective-C,  however it is possible to integrate it into any Swift project. This is done by accessing and interacting with Objective-C classes using Swift.

As we hadn’t created side bar menu’s before we decided to create a separate project working out how the side bar would programmatically work then after we had a prototype for the side bar, we would amalgamate the two together.

Below is a screenshot of the Storyboard for the prototype. It uses the side bar menu as a new screen which which is then navigated through the navigation controller to the views of the various screens. The custom SWRevealViewControllerSeguePushController (which is the side bar menu view) segue automatically handles the switching of the controllers. This can be seen from the lines connecting the view controller to the navigation controller to the clause views.

Storyboard
Storyboard

Below we can see, the SWRevealViewController provides a method called revealViewController() to get the parent SWRevealViewController from any child controller. It also provides the revealToggle: method to handle the expansion and contraction of the sidebar menu. We set the target of the menu button to the reveal view controller and action to the revealToggle: method. So when the menu button is tapped, it will call the revealToggle: method to display the sidebar menu.

Implementation of side bar
Implementation of side bar

The premise behind this side bar menu is that it uses segues to navigate from one screen to another which works well for the majority of Apps however our Magna Carta app will be using UIview’s within the same screen therefore the Side menu Bar that we have created here won’t be able to simply pull together with our original prototype. Therefore hopefully with the help of Marc or Kyle we will be able to use the menu that we have created, adapt it a little and be able to have a menu that works within our Magna Carta app.

Advertisements