Home

Material

Material is a UI framework for IOS that is built using the principles of Material Design. As most of you might already know, Material Design is a set of UI/UX design principles introduced by Google. For more information about Material Design’s philosophy, visit the Material Design website. Here at CosmicMind, we have built a framework that allows iOS developers to use Material Design principles in an easy, user-friendly, and intuitive manner. As we proceed through this guide, you will find that we focus on empowering you with beautiful, organic software. Once you become comfortable with our frameworks, you will be able to build very complex and beautiful apps while writing simple and intuitive code.

To get the most out of this course, it would be advisable for you to have a basic understanding of Swift and IOS development on Xcode. If you are completely new to either, I would suggest playing around with the technologies for a few hours before you start the series.

Lesson 1: Setup

In this lesson, I’ll be showing you how to get started with using Material in your Xcode project. I will try my best to articulate all my thoughts and actions in a verbose manner but if you ever feel lost, you can always contact us for help! Let's jump right in...

1. Let's create a folder on our desktop called 'Demo'.

2. Download the latest Material framework.

3. Extract the 'Material-master' folder in the .zip and move it into the 'Demo' folder we just created.

4. Open up Xcode and create a new workspace (File > New > Workspace) or (⌃⌘N).

5. Save the workspace in the 'Demo' folder. Let's name it 'CosmicMind'.

6. Inside the 'Material-master' folder that we downloaded and moved to the 'Demo' folder, there will be a file named 'Material.xcodeproj'. Drag and drop this file into the Navigator Area in Xcode.

7. In the toolbar, change the build device to 'Generic iOS Device'. Building on Generic Device allows us to use the framework in a device agnostic manner in our projects (it allows compatibility with any iOS device).

8. Clean and Build Material. (Product > Clean followed by Product > Build) or (⇧⌘K followed by ⌘B).

9. We are now ready to embed Material into our project. So let's create a new project. (File > New > Project) or (⇧⌘N)

10. Material can be used with any kind of iOS application but for the purpose of this tutorial, I'll be using a 'Single View Application'. Select the same if you'd like to follow along.

11. Set the Project Name to 'HelloCosmos' (or anything you like really). Set the Language to 'Swift' and Devices to 'Universal'.

12. Save the project to the 'Demo' folder and Add To: 'CosmicMind' workspace.

13. We now have our application and the Material framework in the same workspace. Time to hook it up. Before we do so however, you have to make an important decision as to what version you want to set your project's deployment target to. By default, Xcode will set your deployment target to the most recent version of iOS. Material is compatible with any application that targets iOS 8.0 or higher. For the purpose of this demonstration, click on 'HelloCosmos' in your Navigator Area and then click 'HelloCosmos' under 'Projects' from the left panel in the Editor Area. Set the 'iOS Deployment Target' to 8.0.

14. Click on 'HelloCosmos' under 'Targets' on the left panel in the editor area and under 'Deployment Info', delete the 'Main' text from the 'Main Interface' field. We will not be using the storyboard feature for this app since we will be generating our views programatically.

15. In the 'Embedded Binaries' section in the Editor Area, click on the little plus button and add 'Material.framework'. This will embed the framework into our project. It should automatically appear in the 'Linked Frameworks and Libraries' section. (If this does not happen for you, it may be possible that there was a problem with building the framework. Try to build on 'Generic iOS Device' again and repeat the step.

16. As I mentioned earlier, we will not be using Main.storyboard for our views, so go ahead and delete that. In the navigator area, right click on Main.storyboard, hit 'delete' and 'Move to Trash'.

17. Now that we no longer have Main.storyboard, we need to do some additional setup in the AppDelegate.swift file. Open up the file by clicking on it in the Navigator Area. We are now ready to start writing some code. Just under import UIKit, add: import Material. Simple enough - we are just importing the Material Framework.

18. Under the func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) function, add the following code before return true:

    window = UIWindow(frame: UIScreen.mainScreen().bounds)
    window!.rootViewController = ViewController()
    window!.makeKeyAndVisible()

18. The above code uses the window variable of type UIWindow? that AppDelegate.swift file had by default. We assign it an instance of UIWindow, set the rootViewController to the default ViewController that we can access through the ViewController.swift file (we can change this to any ViewController in future). Lastly, we set the window as our app's view, giving us the ability to generate views programatically.

19. For our final step, we are going to use the Material framework to make changes to the UI. In the ViewController.swift file, add import Material just under import UIKit. We can now use any of Material's components in our view. Let's start by changing the background color to white using MaterialColor. in the viewDidLoad() function, under the super.viewDidLoad() line (and under the following comment), add the following line:

    view.backgroundColor = MaterialColor.white

20. If you run the app now (Select 'HelloCosmos' in the toolbar and set deployment device to 'iPhone 6s Plus' followed by Product > Run or ⌘R), you will see that the background color has changed. At this point we know that our app is running with the Material framework and its components. Awesome job! Let's do a little more to amp up the coolness factor. Add the following piece of code right under the line you just added:

    let button: FlatButton = FlatButton(frame: CGRectMake(107, 107, 200, 65))
    button.setTitle("Hello Cosmos", forState: .Normal)
    button.titleLabel!.font = RobotoFont.mediumWithSize(20)
    button.backgroundColor = MaterialColor.white
    view.addSubview(button)

21. Try running this again (Product > Run or ⌘R). Woah! We have a button with animation right out of the box! Well, that's the power of CosmicMind's Material. If you look at the code we just added, all we did was create a button using Material's FlatButton Class; position it on the screen, set its title, font, color and add it to the view.

22. This is as far as we will go with Lesson 1. Feel free to play around with the framework a bit. We are going to build many more beautiful things in the upcoming lessons, so stay tuned.

Lesson 2: Playing With Colors

In our previous lesson, we used MaterialColor to change some background colors. Let's take a closer look at this class and learn how to use it to its full potential.

The one benefit of using MaterialColor is that we have already curated a library of beautiful colors congruent with the Material Design philosophy. Every color in the library has a base color, along with accents and a range of lighter and darker shades. The only exceptions being .white, .black and .clear, which do not have any accents. Let's see a practical example of this. Head back to the 'HelloCosmos' app you created in Lesson 1 and in your ViewController class file, change the view.backgroundColor as follows:

    view.backgroundColor = MaterialColor.red.lighten2

When you type MaterialColor., Xcode automatically gives you a list of all available color options. After you select your color and add a ., in this case MaterialColor.red., it gives you another list of options to select a more specific tone/shade of the color. In this case I have selected the lighten2 shade. Go ahead and build the app (⌘R) to check it out.

You can change base to an accent, or use a lighter or darker shade. The number after .lighten or .darken determines how much lighter or darker you would like the color to be. In other words, MaterialColor.red.lighten4 will be lighter than MaterialColor.lighten3 and so on.