Skip to main content

Give Parse.com dialogs a modern look

I’ve been playing around with Parse.com, which is an excellent “mobile backend” framework.  It gives you an easy way to use database, user management, and some UI to get you started on all the major mobile devices.  As with all the frameworks that do a lot, it gets tricky when you need things to look or act differently than what you get “out of the box.”  I am going to share some customizations I have made to introduce a flat UI look (Fig 1) instead of the dark brushed metal look (Fig 2).


1. Before we begin,  follow the iOS guide to get the basic setup: https://parse.com/docs/ios_guide .
2. In order to do major customizations the UI for Login or Signup dialog you need to subclass the standard Parse.com classes.  Parse.com has a tutorial on how to do that here: https://parse.com/tutorials/login-and-signup-views .
3. If your app requires login in the viewDidLoad method of the first view you will need to see if there is an active user and display the login dialog if there isn’t.  An interesting fact about Parse is that it will keep the session between app launches which is very nice.  In the code below you can see that I am instantiating both the GCLoginViewController and the GCSignUpViewController.  They are both subclasses of the Parse framework classes.
    if( ! [PFUser currentUser]) {
        logInViewController = [[GCLoginViewController alloc] init];
        [logInViewController setDelegate:self];
        logInViewController.fields = PFLogInFieldsUsernameAndPassword
                                    | PFLogInFieldsLogInButton
                                    | PFLogInFieldsSignUpButton
                                    | PFLogInFieldsPasswordForgotten
                                    | PFLogInFieldsFacebook;
        
        GCSignUpViewController* signUpViewController = [[GCSignUpViewController alloc] init];
        [signUpViewController setDelegate:self];
        [logInViewController setSignUpController:signUpViewController];
        
        
        [self presentViewController:logInViewController animated:YES completion:nil];
    }
4. The real styling is happening in the viewDidLoad function of the subclasses.  Here is my GCLoginViewController method.  You can see that button styling happens often enough that I actually created a class to style buttons with images and buttons without images.

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.logInView setLogo:[[UIImageView alloc] 
initWithImage:[UIImage imageNamed:@"MainIcon-small"]]];
    self.view.backgroundColor = [UIColor whiteColor];
    
    // Remove text shadow
    CALayer *layer = self.logInView.usernameField.layer;
    layer.shadowOpacity = 0.0f;
    layer = self.logInView.passwordField.layer;
    layer.shadowOpacity = 0.0f;
    layer = self.logInView.externalLogInLabel.layer;
    layer.shadowOpacity = 0.0f;
    layer = self.logInView.signUpLabel.layer;
    layer.shadowOpacity = 0.0f;
    
    [self.logInView.usernameField setTextColor:[UIColor blackColor]];
    [self.logInView.passwordField setTextColor:[UIColor blackColor]];
    [self.logInView.externalLogInLabel setTextColor:[UIColor blackColor]];
    [self.logInView.signUpLabel setTextColor:[UIColor blackColor]];
    
    // login button
    UIColor* gold = [UIColor colorWithRed:177.0f/255.0f green:117.0f/255.0f blue:0.0f alpha:1.0f];
    UIColor* facebookBlue = [UIColor colorWithRed:59.0f/255.0f green:89.0f/255.0f blue:152.0f/255.0f alpha:1.0f];

    [GCButtonStyles colorButton:self.logInView.logInButton 
background:gold textColor:[UIColor whiteColor]];
    [GCButtonStyles colorButton:self.logInView.facebookButton 
background:facebookBlue textColor:[UIColor whiteColor]];
    [GCButtonStyles colorButton:self.logInView.signUpButton 
background:[UIColor lightGrayColor] textColor:[UIColor whiteColor]];
    [GCButtonStyles colorButton:self.logInView.passwordForgottenButton 
background:[UIColor lightGrayColor] textColor:[UIColor whiteColor]];
    [GCButtonStyles colorButtonWithImage:self.logInView.passwordForgottenButton 
background:[UIColor lightGrayColor] textColor:[UIColor whiteColor]
      image:[UIImage imageNamed:@"forgot-image"]];
}

5. The GCSignUpViewController is using the same functions

- (void)viewDidLoad {
    [super viewDidLoad];
 
    [super viewDidLoad];
    [self.signUpView setLogo:[[UIImageView alloc]
initWithImage:[UIImage imageNamed:@"MainIcon-small"]]];
    self.view.backgroundColor = [UIColor whiteColor];
 
    // Remove text shadow
    CALayer *layer = self.signUpView.usernameField.layer;
    layer.shadowOpacity = 0.0f;
    layer = self.signUpView.passwordField.layer;
    layer.shadowOpacity = 0.0f;
    layer = self.signUpView.emailField .layer;
    layer.shadowOpacity = 0.0f;
 
    [self.signUpView.usernameField setTextColor:[UIColor blackColor]];
    [self.signUpView.passwordField setTextColor:[UIColor blackColor]];
    [self.signUpView.emailField setTextColor:[UIColor blackColor]];

    // login button
    UIColor* gold = [UIColor colorWithRed:177.0f/255.0f green:117.0f/255.0f blue:0.0f alpha:1.0f];
 
    [GCButtonStyles colorButton:self.signUpView.signUpButton background:gold
textColor:[UIColor whiteColor]];
}

6. The actual styling functions have a bunch of code because Apple exposes a bunch of elements that you can customize.  Parse puts the background and foreground images and colors so in order to completely reset the styles I am setting all those properties.
@interface GCButtonStyles : NSObject
+(void) colorButton:(UIButton*) button background:(UIColor*)
background textColor:(UIColor*) textColor;
+(void) colorButtonWithImage:(UIButton*) button background:(UIColor*)
background textColor:(UIColor*) textColor image:(UIImage*)image;
@end


#import "GCButtonStyles.h"

@implementation GCButtonStyles

+(void) colorButton:(UIButton*) button background:(UIColor*) background textColor:(UIColor*) textColor {
    [button setBackgroundImage:nil forState:UIControlStateNormal];
    [button setBackgroundImage:nil forState:UIControlStateHighlighted];
    [button setBackgroundImage:nil forState:UIControlStateSelected];
    [button setTitleColor:textColor forState:UIControlStateNormal];
    [button setTitleColor:textColor forState:UIControlStateHighlighted];
    [button setTitleColor:textColor forState:UIControlStateSelected];
    [button setTitleShadowColor:
[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.0f] forState:UIControlStateNormal];
    [button setTitleShadowColor:
[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.0f] forState:UIControlStateHighlighted];
    [button setTitleShadowColor:
[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.0f] forState:UIControlStateSelected];
    [button setBackgroundColor:background];
}

+(void) colorButtonWithImage:(UIButton*) button background:(UIColor*) background textColor:(UIColor*) textColor image:(UIImage*)image
{
    [self colorButton:button background:background textColor:textColor];
    [button setImage:image forState:UIControlStateNormal];
    [button setImage:image forState:UIControlStateHighlighted];
    [button setImage:image forState:UIControlStateSelected];
}


@end

These functions can be used on almost any buttons that you get in UI elements regardless of whether they came from Parse or another framework.  In this particular situation the resetting of the styles and backgrounds gives the user interface a more modern, flat look.   Enjoy!

PS: If you liked this post you might also like other hands on blog posts like the TestFlight one: http://www.mikebz.com/2014/08/testflight-and-importance-of-private.html or the 4 Page Guide to Core Data: http://www.mikebz.com/2014/06/4-page-guide-to-core-data.html

Post a Comment

Popular posts from this blog

SDET / QA Engineer Interview Checklist

After interviewing and hiring hundreds of engineers over the past 12+  years I have come up with a few checklists.  I wanted to share one of those with you so you could conduct comprehensive interviews of QA Engineers for your team.

I use this checklist when I review incoming resumes and during the interview.  It keeps me from missing areas that ensure a good team and technology fit.  I hope you make good use of them.  If you think there are good questions or topics that I have missed - get in touch with me!


SDE/T or QA Engineer interview checklist from Mike Borozdin
If you like this checklist you might want to check out these posts:
Emotional Intelligence in Software Teams  and Good-bye manual tester, hello crowdsourcing!

There are Only Two Ways to Treat Your Team

There are only two ways to treat your team: take care of them or let them go.  Early in my management career there have been times when someone has been underperforming on the team.  Before I knew better I let my emotions get the best of me: I’d give them the cold shoulder, avoid including them in conversations and look like I was upset with them. Thankfully with some good mentorship I came up with a simple rule: we are helping each other or you are off the team.

One of the biggest mistakes that folks make a lot of times is letting people linger on for too long.  Hiring good engineers is hard and getting new folks up to speed is hard.  You feel like you are going to miss your product delivery plan if you let someone go.

Letting folks linger when you are unhappy with each other creates a toxic environment.  This toxic environment is generally contagious and brings the entire organization down.  Of course you can’t have a constant state of euphoria on your team, but if a productive and…

Highly Effective Software Teams

A few weeks ago our Board of Directors asked me to present my assessment of the state of software.
 I was hired to organize and grow the software team and the directors wanted to know what kind of a team we needed to build.  I was hoping that I can just reference an article somewhere that would give me the answer, unfortunately I didn’t find anything suitable. During my research I did find some great material that will be helpful if your job is to put together a highly effective software team.
A highly effective software team has the following key characteristics: dependable, committed to shared goals, passionate about technology, respectful and compassionate.  These are not limited to technology industry, it can easily apply to finance, medicine, or sports as well.  Below is the summary and references that I found. Dependable If you are creating a software product, you need to deliver your software to your users.  Your users need to know that you are able to solve their problems on …