Question

I have a BoardViewController (UIViewController) and need to draw centered coordinate lines into its background. For these coordinate lines I created a custom UIView class CoordinateView which are added as subView. The coordinateView should be centered and fill the whole screen even when changing the device orientation.

To do this I’d like to use Auto Layout implemented in code. Here’s my current setup:

In the CoordinatesView (UIView) class a custom draw method for the coordinate lines

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(context, 1.0);

    CGContextMoveToPoint(context, self.bounds.size.width/2,0);
    CGContextAddLineToPoint(context, self.bounds.size.width/2,self.bounds.size.height); 
    CGContextStrokePath(context);
    CGContextMoveToPoint(context, 0,self.bounds.size.height/2);
    CGContextAddLineToPoint(context, self.bounds.size.width,self.bounds.size.height/2); 

    CGContextStrokePath(context);
}

Initializing this coordinatesView object in the BoardViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
...
        coordinatesView = [[CoordinatesView alloc]initWithFrame:self.view.frame];
        [coordinatesView setBackgroundColor:[UIColor redColor]];
        [coordinatesView clipsToBounds];
        [coordinatesView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.view addSubview:coordinatesView];
        [self.view sendSubviewToBack:coordinatesView];
...
}

Adding the auto layout magic to the coordinateView in the BoardViewController’s viewWillAppear function

-(void)viewWillAppear:(BOOL)animated{
...
NSLayoutConstraint *constraintCoordinatesCenterX =[NSLayoutConstraint
                                              constraintWithItem:self.view
                                              attribute:NSLayoutAttributeCenterX
                                              relatedBy:NSLayoutRelationEqual
                                              toItem:coordinatesView
                                              attribute:NSLayoutAttributeCenterX
                                              multiplier:1.0
                                              constant:1];

NSLayoutConstraint *constraintCoordinatesCenterY =[NSLayoutConstraint
                                                   constraintWithItem:self.view
                                                   attribute:NSLayoutAttributeCenterY
                                                   relatedBy:NSLayoutRelationEqual
                                                   toItem:coordinatesView
                                                   attribute:NSLayoutAttributeCenterY
                                                   multiplier:1.0
                                                   constant:1];

[self.view addConstraint: constraintCoordinatesCenterX];
[self.view addConstraint: constraintCoordinatesCenterY];
...
}

Note: This approach worked for me using an UIImageView Image as coordinates but it doesn’t work with the custom UIView coordinateView.

• How do I make it work again? As soons as I apply the Auto Layout/NSLayoutConstraint my coordinatesView UIView seems disappears

• Is this actually a good approach to add a background drawing to a UIViewController or is it better to directly draw into the UIViewController. (If so how would that look like?)

I appreciate your help with this.

Answer 1

Your view disappears because you set no size constraints — you generally need 4 constraints to fully express the position and size of a view. Some views, like buttons have an intrinsic content size, so you don’t need to explicitly set the size. The same is true for image views, which get their size from the image they display.

So, in your case, you can set the width and height equal to the width and height of the superview. This is something that I do often, so I’ve created a category on UIView that contains various constraint methods, so I don’t have to write this over and over. I have one method constrainViewEqual: that does what you want to do:

#import "UIView+RDConstraintsAdditions.h"

@implementation UIView (RDConstraintsAdditions)

-(void)constrainViewEqual:(UIView *) view {
    [view setTranslatesAutoresizingMaskIntoConstraints:NO];
    NSLayoutConstraint *con1 = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeCenterX relatedBy:0 toItem:view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
    NSLayoutConstraint *con2 = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeCenterY relatedBy:0 toItem:view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
    NSLayoutConstraint *con3 = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeWidth relatedBy:0 toItem:view attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
    NSLayoutConstraint *con4 = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeHeight relatedBy:0 toItem:view attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    NSArray *constraints = @[con1,con2,con3,con4];
    [self addConstraints:constraints];
}

Then, in your main code, you can call it like this:

[self.view constrainViewsEqual:coordinatesView];