Making the most of shinobiplayPosted on 9 Jun 2015 Written by Alison Clarke
A new and improved version of shinobiplay, the app that demonstrates the power of shinobicontrols, has been released. As well as a new look, it is now easier to find the examples you’re looking for, but for a developer, arguably the most exciting feature is that you can now access the source code for every example.
As you’re browsing through the samples in shinobiplay, if you see one you’d like to reproduce, open it and click the ? button to see information about it:
On the bottom right you’ll see a link to GitHub (you can also find a GitHub link for each example at the bottom of the Featured Gallery). Tap that and you’ll be taken to the relevant GitHub project in Safari. The best thing to do from here is to log in to GitHub and star the project so you can find it again from your Mac.
You can also browse all the shinobiplay repos directly.
The examples from the Featured Gallery, which contains more complex examples, each have their own repo on GitHub:
The examples from the Full Gallery, which are simpler and show each feature of the controls, share repos:
- play-charts-gallery contains the shinobicharts samples
- play-gauges-gallery contains the shinobitoolkit gauges examples
- play-essentials-gallery-accordion contains the shinobitoolkit essentials accordion examples
- play-essentials-gallery-sliding-overlay contains the shinobitoolkit essentials sliding overlay examples
- play-essentials-gallery-tabs contains the shinobitoolkit essentials tabs examples
- play-essentials-gallery-indicators contains the shinobitoolkit essentials progress and activity indicator examples
- play-essentials-gallery-flowlayout contains the shinobitoolkit essentials flow layout examples
- play-essentials-gallery-carousel contains the shinobitoolkit essentials carousel examples
- play-essentials-gallery-pulltoaction contains the shinobitoolkit essentials pull to action examples
- play-grids-gallery contains the shinobitoolkit grids examples
Within each project, each example has its own view controller.
Looking at the source code
Each shinobiplay repo has a README which explains how to get the project up-and-running. This includes details of how to clone or download the project’s dependencies, and how to make sure the project finds your shinobicontrols libraries.
Each repo uses git submodules to link to its dependent projects: either the play-utils repo, or the play-charts-utils repo (which itself depends on play-utils). As I mentioned above, each repository’s README explains how to fetch the dependencies.
play-utils contains a base view controller class which enables us to include the view controller inside shinobiplay, alongside some extensions for fonts, colors and text views which are common to various shinobiplay projects.
play-charts-utils contains code to manage the lifecycle of the charts. Due to the large number of charts in shinobiplay, we tear the charts down when the view controller is moved from its parent, to save on memory. However, we save the current state of the chart (e.g. zoom level, selected points, rotation of pie/donut charts) and restore it when the view controller is loaded again, so it appears as though the chart has continued running in the background. It’s unlikely you’ll have to worry about doing anything like this in most cases when using shinobicharts, but if you do have a large number of charts in your app then it might be worth a look.
Finally, you might have spotted some .podspec files in the repos. You can safely ignore these, but in case you’re interested they allow us to use cocoapods to manage the dependencies within our shinobiplay app.
Using the source code
As usual with GitHub, you can fork our repos to make your own changes, and if you’ve got any improvements you’d like us to see, feel free to submit a pull request; or you can just browse the code and pick and choose any interesting bits to use in your own projects.
We’ve tried to make the code as clear as possible but do get in touch if you have any questions. And if you’d like to see a more detailed tutorial about a particular project, let us know and we’ll see what we can do!
AlisonBack to Blog