iOS Programming Recipe 17: Using UISS To Theme Your Application

This Week I thought I would explore A nice iOS library which allows you to customize the look and feel of your application. While this library is built on UIAppearance, it extends it by introducing a CSS like way of defining the look and feel. We already had a recipe on UIAppearance, so we’ll start by creating the same thing and then explore customizations.

Assumptions

Setting Everything Up

Creating the Project

To get started we’ll need to create a new project and add the UISS library to it using cocoapods.

  • Create a new project and title it “Recipe17UsingUII”. Make sure to use ARC and select iPhone from the devices.

Setting Up CocoaPods

  • Close down the project you just created.
  • Open the Terminal and Navigate to the directory containing Recipe17UsingUII.xcodeproj
  • Make Sure CocoaPods is installed on your system then type pod install. This will fail with the following error if you have CocoaPods properly installed:

Image1

The line “subl Podfile” is using the command line tools installed with the Sublime text editor to open a new file titled “Podfile” for editing.

As mentioned before in the weather app Recipe, for more good information on CocoaPods check out NSScreenCast’s CocoaPods Video Tutorial.

  • Edit your podfile as follows and save to the project root as “Podfile” without an extension.
    
    
      platform :ios, '6.0'
      pod 'UISS'
  • Then from the terminal type “pod install” again and you should see a bunch of status code. type “ls” and enter and you should see the new files that were added.

Image2

  • From now on you’ll want to open the .xcworkspace file for the project dependencies to work correctly.
  • Open up the “Recip17UsingUISS.xcworkspace” project by locating to the file location in finder and double clicking it.

Now we should be ready to dive in. We’ll start by making a new view.

Setting up new View

This section should feel pretty familiar as it is exactly the same as Recipe 8.

  • Create a new UIView subclass (CMD + N), choose Objective-C class, name it MyView. Make sure you add it to the target when prompted as shown:

Image 3

Image 4

  • Now open MyView and the following property decleration. This part does not change from the UIAppearance method:@property (nonatomic, strong) UIColor *dotColor UI_APPEARANCE_SELECTOR;
  • Now open up MyView.m and add the following drawRect: implemtation before the “@end”. This will draw the same target from Recipe 8.
    
    
      - (void)drawRect:(CGRect)rect
      {
     UIColor *fillColor  = (self.dotColor != nil) ? self.dotColor : [UIColor      whiteColor];
     CGContextRef ctx    = UIGraphicsGetCurrentContext();

     //draw outer rings (demo only i.e. not great code here!)
     [fillColor setFill];
      CGContextFillEllipseInRect(ctx, self.bounds);

     [[UIColor whiteColor] setFill];
      CGContextFillEllipseInRect(ctx, CGRectInset(self.bounds, 10.0, 10.0));

      [fillColor setFill];
      CGContextFillEllipseInRect(ctx, CGRectInset(self.bounds, 20.0, 20.0));

     [[UIColor whiteColor] setFill];
      CGContextFillEllipseInRect(ctx, CGRectInset(self.bounds, 30.0, 30.0));

     [fillColor setFill];
      CGContextFillEllipseInRect(ctx, CGRectInset(self.bounds, 40.0, 40.0));
      }

Now open up “ViewController.m” and add an import statement for MyView


#import "MyView.h"
  • Now open “ViewController.xib” and add a UINavigationBar and a UIView to the view
  • Select the UIView and opent the IDentity Inspector (CMD + Option + 3). Change the class property to “MyView”.
  • Center the “MyView” object in the containing view, giving it a size of 100×100. If you are using auto layout(on by default) you will need to create both a width constraint and a height constrint in order to stop it from stretching.
  • finally, with the MyView object selected open the attributes inspector (CMD + Option +4) and cahnge the background color to “Clear”.

Now we’ll need to implement the pieces needed to get the UISS library working. From CoacoPods we have the dependencies but we’ll need to do a bit of extra work.

Implementing UISS

  • Open AppDelegate.m and modify it as follows:
    
    
      #import "AppDelegate.h"
      #import "ViewController.h"
      #import "UISS.h" //added this to import the UISS header file

      @interface AppDelegate ()

      @property(nonatomic, strong) UISS *uiss; //craete UISS property

      @end

      @implementation AppDelegate

      - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
      {
      self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
      // Override point for customization after application launch.
      self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
      self.window.rootViewController = self.viewController;
      [self.window makeKeyAndVisible];

      self.uiss = [UISS configureWithDefaultJSONFile]; //Import From defualt uiss.json file in supporting files.
      self.uiss.statusWindowEnabled = YES; //enables status bar at top of app.
      return YES;
      }

Now we’ll need to add the defualt uiss.json file to the project.

  • Add a new file (CMD + N) with the title uiss and extension .json. To do this select “other” under iOS on the left side and choose “empty” and press next. When prompted type in “uiss.json”. The File will show up in your project navigator.Image 6
  • select “uiss.json” and edit it as follows:
    
    
      {
          "Variables": {
              "tint":"#3299cc"
          },
          "UINavigationBar": {
              "tintColor": "$tint"
          },
          "MyView": {

              "dotColor": "$tint"
          }

      }

Aside from the psuedo .json format what you’ll see in each argument looks very similar to CSS code. This is nice because all of the styling can be done from this file and it’s a familiar easy to follow format. Notice how we set a variable “tint” and called it using “$tint”.

  • Run the app and you should see something like the following:

Image 7

Expanding On It

Adding More Elements

Just for fun, Let’s add a few more elements to the view to give more examples:

  • Drag a Switch and a Tab Bar onto the view in the ViewController.xib:

Image 8

  • Now edit the UISS as follows:
    
    
      {
          "Variables": {
              "tint":"#022944"
          },
          "UITabBar": {
              "tintColor": "$tint",
              "selectedImageTintColor": "red",
              "UITabBarItem": {
                  "titleTextAttributes:normal": {
                      "textColor": "lightGray"
                  },
                  "titleTextAttributes:selected": {
                      "textColor": "white"
                  }
              }
          },
          "UINavigationBar": {
              "tintColor": "$tint"        
          },
          "UISSDemoFirstViewController": {
              "UIButton": {
                  "backgroundImage:normal": ["button-background-normal", [0,10,0,10]],
                  "backgroundImage:highlighted": ["button-background-highlighted", [0,10,0,10]],
                  "titleColor:normal": ["white", 0.8],
                  "titleColor:highlighted": "white",
                  "titleEdgeInsets": [1,0,0,0],
                  "UILabel": {
                      "font": ["Copperplate-Bold", 18]
                  }
              }
          }
      }

As you can see there wasn’t really much work involved in updating the styling. For more options and ways you can style go check out the documentation over at github.

You App should now look like:

Image9

Going further

I’m not going to get into here but I figured it was worth mentioning the functions that allow auto updating and remote stylesheets. By adding a couple lines of code to the AppDelegate.m file you can have the app update from a .json file stored at a web url.

To do this replace this item in the code:


self.uiss = [UISS configureWithDefaultJSONFile];//Import From defualt

To:


self.uiss = [UISS configureWithURL:[NSURL URLWithString:@"Some web url/yourfile.json"]];

To use the Live update method add these lines to your AppDelegate.m file:


self.uiss.autoReloadEnabled = YES;
self.uiss.autoReloadTimeInterval = 1;

Another cool thing about UISS is that it can update without reloading the view.

The last thing worth mentioning is if you click the UISS status bar you can access some settings which will let you change the auto reload setting and even the URL.

Image10

Well that’s it on this subject. Hopefully it helps make your life easier when it comes to styling. Also, just to let you know, the UISS Library had a couple of deprecated items that needed to be addressed. Your app wills still run with these, but there will be some warnings.

About Joe Hoffman

I am An Electrical Engineer that spends a lot of my off time doing web development and other programming. Currently I am trying to expand my knowledge with iOS and I find that writing tutorials helps me learn more thoroughly as well as provide some useful info to others.

Speak Your Mind

*

css.php
Privacy Policy