iOS UI Customization optimization

Question

I'm about to begin a big project which will contains a lot of UI customization. For example, I need an UIView which will look like that :

So I wrote an UIView custom class but i really don't know if my code is optimized and if there are best ways to do that, so could you give me some advice plz ?

Here's my code :

// DPIViewHeader.h

#define     HEADER_HEIGHT   30.0f
#define     HEADER_COLOR    [UIColor colorWithRed:161.0f/255.0f green:209.0f/255.0f blue:249.0f/255.0f alpha:1.0f]

#define     BORDER_WIDTH    2.0f
#define     BORDER_COLOR    [[UIColor colorWithRed:82.0f/255.0f green:159.0f/255.0f blue:210.0f/255.0f alpha:1.0f] CGColor]

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface DPIViewWithHeaderTest : UIView

// properties
@property (strong, nonatomic) NSString *title;
@property (strong, nonatomic) UIColor *headerColor;

@property (strong, nonatomic) UIView *headerView;
@property (strong, nonatomic) UIView *contentView;

// methods
- (id)initWithFrame:(CGRect)frame title:(NSString *)title;
- (id)initWithFrame:(CGRect)frame title:(NSString *)title headerColor:(UIColor *)headerColor;

@end

// DPIViewHeader.m

#import "DPIViewWithHeaderTest.h"

@implementation DPIViewWithHeaderTest

- (id)initWithFrame:(CGRect)frame title:(NSString *)title {
    self = [super initWithFrame:frame];
    if (self) {
        self.title = title;
    }
    return self;
}

- (void)layoutSubviews {
    // set header view and content view
    self.headerView = [[UIView alloc] initWithFrame:CGRectMake(self.bounds.origin.x, self.bounds.origin.y, self.frame.size.width, HEADER_HEIGHT)];
    self.contentView = [[UIView alloc] initWithFrame:CGRectMake(self.bounds.origin.x, self.bounds.origin.y + HEADER_HEIGHT, self.frame.size.width, self.frame.size.height - HEADER_HEIGHT)];

    // add title label
    UILabel *label = [[UILabel alloc] init];
    label.text = self.title;
    [label sizeToFit];
    label.center = CGPointMake(label.frame.size.width/2 + 10, self.headerView.frame.size.height/2);
    label.backgroundColor = [UIColor clearColor];
    [self.headerView addSubview:label];

    // set color header
    self.headerView.backgroundColor = HEADER_COLOR;

    // set border attributes
    self.layer.borderWidth = BORDER_WIDTH;
    self.layer.borderColor = BORDER_COLOR;

    self.headerView.layer.borderWidth = BORDER_WIDTH;
    self.headerView.layer.borderColor = BORDER_COLOR;

    // add subviews
    [self addSubview:self.headerView];
    [self addSubview:self.contentView];
}

@end

Answer 1

It really depends (like everything :) ) . Let me tell you why using two scenarios:

---

• The View is non-customisable:

  • If DPIViewWithHeaderTest is going to be embedded in a UITableViewCell, then well, scroll performance will be terrible due to high memory usage. Therefore improper for this purpose.

  • The next scenario: just a simple view, somewhere, with a static background, and some data. It's OK than, but not the best solution.

Good Solution

For both purposes I would suggest creating images. A prerendered image is cached and leaves very small memory footprint. Moreover in this case you could even create strechable one. Isn't this great ?

---

• What if a UIView has to be customisable (like colour, size) ? Then this is the only solution but I would consider rewriting the implementation depending on purpose.

  • If there are going to be lots of such views, they are animated, for example this is a background of UITableViewCell you should consider drawing them using QuartzCore/Core Graphics for better performance.

  • For just one (or few) view, this implementation is just fine :) .

Last piece of advice

Generally, unless the view is to be customisable, I would suggest creating images. For three reasons: performance, look and easiness of creation. Believe me, well crafted images look way better than custom drawing :)