Program Subview's Vertical Spacing to Bottom Constraint

Question

SecondViewController adds a UIView that contains a MKMapView as a subview inside an IBAction method:

if(_tagTwo == 4){
    seg2_buttonImg = @"Maps.png";

    UIImage *btnImage1 = [UIImage imageNamed:seg2_buttonImg];
    [_left_button setImage:btnImage1 forState:UIControlStateNormal];
    [_table removeFromSuperview];
    [mapVC layoutMapView];
    [self.view addSubview:mapVC.view];
    return;
}

mapVC is created in ViewDidLoad with mapVC = [[CollectionMapViewController alloc] init];

Edit: new code for adding constraints, taken from @Reinier Melian:

@implementation CollectionMapViewController

@synthesize mapView;

- (void)viewDidLoad
{
    if (floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1) {
        //[segmentedControl setBackgroundColor:[UIColor whiteColor]];
        //[segmentedControl setBackgroundColor:[UIColor leafletBrown]];
        [segmentedControl setBackgroundColor:[UIColor leafletLightBrown]];
        segmentedControl.layer.cornerRadius = 5;
    }
    self.mapView.translatesAutoresizingMaskIntoConstraints = NO;
    NSArray * verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[mapView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(self.mapView)];
    NSArray * horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mapView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(self.mapView)];


    //Add constraints to the Parent
    [self.view addConstraints:verticalConstraints];
    [self.view addConstraints:horizontalConstraints];
}

CollectionMapViewController.h:

@interface SecondViewController : UIViewController <NSFetchedResultsControllerDelegate, CollectionMapViewControllerDelegate>{

    CollectionMapViewController* mapVC;
}

@property (nonatomic, retain) CollectionMapViewController* mapVC;

The problem is that it adds the MKMapView to the top of the screen:

I tried to constrain the MKMapView to the bottom of the screen by adding following code to viewDidLoad of MapViewController

   mapView.translatesAutoresizingMaskIntoConstraints = NO;

    NSLayoutConstraint *bottom =[NSLayoutConstraint
                                 constraintWithItem:mapView
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                 toItem:self.view
                                 attribute:NSLayoutAttributeBottom
                                 multiplier:1.0f
                                 constant:0.f];


    //Add constraints to the Parent
    [self.view addConstraint:bottom];

But it just makes the map go black (or more likely moves it completely off the screen?).

What I am trying to get is this:

I would appreciate any help! Thank you so much!

When you add `mapView.translatesAutoresizingMaskIntoConstraints = NO;` your map rect size is equal to zero if there are not enough constraints to define the correct frame, that is why you have your screen black, you need define all the constraints needed by your `MKMapView` — Reinier Melian, Sep 03 '17 at 00:36

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

When you add mapView.translatesAutoresizingMaskIntoConstraints = NO; your map rect size is equal to zero if there are not enough constraints to define the correct frame, that is why you have your screen black, you need define all the constraints needed by your MKMapView

Updated using dynamic height constraints

try with this code

self.mapView.translatesAutoresizingMaskIntoConstraints = NO;
CGFloat mapHeigthValue = self.view.frame.size.height/3; //setting the mapView heigth = 1/3 of view height this is an example
NSArray * verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:[mapView(%f)]|",mapHeigthValue] options:0 metrics:nil views:@{@"mapView":self.mapView}];
NSArray * horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mapView]|" options:0 metrics:nil views:@{@"mapView":self.mapView}];


//Add constraints to the Parent
[self.view addConstraints:verticalConstraints];
[self.view addConstraints:horizontalConstraints];

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 03 '17 at 00:59

Reinier Melian

20,519
3
38
55

What does `|-[mapView]-|` mean? Right now I am getting an error related to it, `mapView is not a key in the views dictionary` – maddie Sep 03 '17 at 02:16
Sorry check again typo error with H:|[mapView]| I am making your mapView leadingConstraint to superView leading constraint and trailing to superView trailing – Reinier Melian Sep 03 '17 at 02:48
It makes sense what youre suggesting, but I get the same error with your revised code :/ – maddie Sep 03 '17 at 03:00
@Matt check again, was the macro the problem I had changed that and my code now was tested, should work now, let me know – Reinier Melian Sep 03 '17 at 03:12
Where would I add value for the constraints (similar to how one does in Storyboard if that makes sense) ? It is at the top of the screen like in the first photo in my post – maddie Sep 03 '17 at 03:19
Your MapView Size is fixed? If is that the case you need modify `@"V:|[mapView]|"` by `@"V:[mapView(YourMapHeight)]|"` – Reinier Melian Sep 03 '17 at 03:24
Yes the height and width of mapView are fixed. But your revised code sends mapView straight to the top of the screen. Now replacing with the above comment gives me the error, `Encountered metric with name "YourMapHeight", but value was not specified in metrics or views dictionaries` – maddie Sep 03 '17 at 03:29
You need replace the YourMapHeight by your map height desired size, as test try with a value like this `@"V:[mapView(150)]|"` @Matt – Reinier Melian Sep 03 '17 at 03:34
@Matt I had updated my answer check it and let me know – Reinier Melian Sep 03 '17 at 03:39
It makes the mapView smaller - but what I'm trying to do is keep the (fixed) size of the mapView, but move it down the screen. I updated my post with a photo at the bottom of what I'm trying to do – maddie Sep 03 '17 at 03:47

score 0 · Accepted Answer · answered Sep 06 '17 at 00:21

In viewDidLoad:

mapView.translatesAutoresizingMaskIntoConstraints = NO;



    /*Set width and height of mapview */
    NSLayoutConstraint *widthConst = [NSLayoutConstraint constraintWithItem:mapView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:400];
    NSLayoutConstraint *heightConst = [NSLayoutConstraint constraintWithItem:mapView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:300];
    [self.view addConstraint:widthConst];
    [self.view addConstraint:heightConst];


    /*creater X and Y constraints for mapview */
    NSLayoutConstraint *centreHorizontallyConstraint = [NSLayoutConstraint
                                                        constraintWithItem:mapView
                                                        attribute:NSLayoutAttributeCenterX
                                                        relatedBy:NSLayoutRelationEqual
                                                        toItem:self.view
                                                        attribute:NSLayoutAttributeCenterX
                                                        multiplier:1.0
                                                        constant:0];

    [self.view addConstraint:centreHorizontallyConstraint];

    NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint
                                            constraintWithItem:mapView
                                            attribute:NSLayoutAttributeBottom
                                            relatedBy:NSLayoutRelationEqual
                                            toItem:self.view
                                            attribute:NSLayoutAttributeBottom
                                            multiplier:1.0
                                            constant:140];

    [self.view addConstraint:bottomConstraint];

Program Subview's Vertical Spacing to Bottom Constraint

2 Answers2

Updated using dynamic height constraints