effective UI styling for iOS app [closed]

Answer 1

You could create your own styles using enums. By placing enums inside the Styles enum you get a nice grouping:

enum Styles {
    enum Labels {
        case Standard
        case LargeText

        func style(label: UILabel) {
            switch self {
            case .Standard:
                label.font = UIFont.systemFontOfSize(12)
            case .LargeText:
                label.font = UIFont.systemFontOfSize(18)
            }
        }
    }

    enum Buttons {
        case RedButton

        func style(button: UIButton) {
            switch self {
            case .RedButton:
                button.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
            }
        }
    }
}

Then you can use it like this:

Styles.Labels.Standard.style(yourLabel)

You can also then make extensions for the styles you have setup:

extension UILabel {
    func style(style: Styles.Labels) {
        style.style(self)
    }
}

extension UIButton {
    func style(style: Styles.Buttons) {
        style.style(self)
    }
}

And then use the extensions like this:

yourLabel.style(.Standard)
yourButton.style(.RedButton)

Answer 2

You can use Classy to define a styles for your UI in a more CSS like fashion. It's used and maintained byt the people at Wire

Answer 3

you can use UICategory class for UIView for that purpose. create different methods for set borders, border colors , pass bazier-paths, corner radius and so many . this is just few of them. category is of UIView so you can use on buttons,lables,textview,textedits etc;

UIView+category.h

@interface UIView (category)
-(void)makeToRoundEdgeWithBorder:(CGFloat )borderwidth bordecolor:(UIColor *)color;

@end

UIView+category.m

@implementation UIView (category)

-(void)makeToRoundEdgeWithBorder:(CGFloat )borderwidth bordecolor:(UIColor *)color
{
   NSLog(@"height %f width %f",CGRectGetHeight(self.frame),CGRectGetWidth(self.frame));
    self.layer.cornerRadius=CGRectGetHeight(self.frame)/2;
    self.layer.masksToBounds=YES;
    self.layer.borderColor=[color CGColor];
    self.layer.borderWidth=borderwidth;
}

@end

Use it

[yourlable makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];

[yourbutton makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];

[yourTextview makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];

[yourTextfield makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];

Answer 4

You should also look into UIAppearance. It's a design proxy available for most UI elements where you only set the styling once.