How to create this customized UITableViewCell

Question

I'm trying to create a table view like this

I'm not sure on how to do it though. I am subclassing UITableViewCell and have a separate .xib file for my cell. This seems to be the cleanest way to do it.

The issues are on how to make the margin on the sides/top/bottom, how to add the dashed line and creating the border/radius/shadow.

Idea 1: Add the entire cell as an image and make the actual cell in a gray color. Should work as my cells will all be of the same dimensions. (Not that fun though ;) )

Idea 2: Make the cell gray, add a new UIView which is the actual box in my image and make the view white, add a border, border-radius and shadow to this programmatically (which I think is possible?). How do I create the dashed line then? Programmatically or just using an Image?

I'm using iOS6 if that matters.

Any ideas and input is appreciated.

Answer 1

A couple of thoughts:

First, I think using storyboards makes subclassing UITableViewCell even easier. No code required to load the NIB. You design the subclassed cell right in place.

Second, I'd consider using Quartz 2D to configure your cell's inner border programmatically. Quartz 2D has features like dashed lines, shadows, etc.

Basically, you can programmatically tweak your user interface. So, add the QuartzCore.framework to your project, and make a subclass for the cell's inner border, perhaps something like:

#import <QuartzCore/QuartzCore.h>

@interface CellInnerBorderView ()

@property (nonatomic, strong) CAShapeLayer *shapeLayer;

@end

@implementation CellInnerBorderView

// this adds shadow and border to the cell

- (void)configureBackgroundView
{
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowRadius = 2.0;
    self.layer.shadowOpacity = 0.8;
    self.layer.shadowOffset = CGSizeMake(0.0, 2.0);

    self.layer.borderColor = [UIColor blackColor].CGColor;
    self.layer.borderWidth = 1.0;
}

// this adds a dashed line, half way down, inset by 5 points left and right

- (void)addDashedSeparator
{
    UIBezierPath *path = [UIBezierPath bezierPath];

    CGPoint startPoint = CGPointMake(5.0, self.frame.size.height / 2.0);
    CGPoint endPoint = CGPointMake(self.frame.size.width - 10.0, self.frame.size.height / 2.0);

    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];

    if (self.shapeLayer)
        [self.shapeLayer removeFromSuperlayer];

    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.path = path.CGPath;
    self.shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    self.shapeLayer.lineDashPattern = @[@1, @1];
    self.shapeLayer.fillColor = [UIColor blackColor].CGColor;
    self.shapeLayer.lineWidth = 1.0;
    self.shapeLayer.strokeStart = 0.0;
    self.shapeLayer.strokeEnd = 1.0;

    [self.layer addSublayer:self.shapeLayer];
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    [self configureBackgroundView];
    [self addDashedSeparator];
}

@end

Then you can add a view in Interface Builder that represents the UITableViewCell inner border, specify it's class to be CellInnerBorderView (or whatever you choose to call it), and you get this behavior.

Answer 2

You might want to use an image for the background. I would use two separate UILabels for the two date components. You can make the label backgrounds transparent, but if they don't have to be then you will get better performance. The margins are simply the x,y coords of the labels.

An alternative to the background image is using Core Graphics, which has a pretty steep learning curve.

Answer 3

This is how I would do it.

Make the backgroudView of your cell to be the white area with it's shadow.
(That view will be a full view hierarchy with it's root view having it's backgroundColor set to clear, so you can have your margin)
You will need to provide a selectedBackgroundView that match the shape and shadow.
Make Content view with clearColor background to place your text there.

The dashed line, depending on it's display behaviour when selecting the cell it may be appropriate to place it in the content view or in the background view.

The TableView should be set to provide the grey background.

That would be the logic, I leave the detail of implementation to you.

Answer 4

The design of the cell is quite simple, but still looking good on the other hand (I'm a fan of simplistic but effective design).

For that reason it can be accomplished either way i think. The most performant and easy way would be to have the image (with the shadow and dotted line) pre-rendered and for example assigned to the backgroundView property of your custom UITableViewCell implementation.

If you want to draw the "background" entirely in code (i.e. programmatically), take a look at my answer for background shadows in UITableView.

From my current perspective, i'd opt for the solution involving a pre-rendered image designed in photoshop or so.