ios autolayout overlay view on edge of another view (layering), programmatically

Question

Here I have designs for a custom arrow which will function as a share button. It is supposed to be pinned to the lower edge, with its center point being anchored to the bottom view as pictured.

How would I do this using VFL?

This is what I attempted

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[_whiteSquare(160)]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:elementDict]];


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_shareButton(45)]-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:elementDict]];


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[_shareButton(45)]-20-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:elementDict]];



[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[_whiteSquare]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:elementDict]];

Where both whiteSquare and shareButton are appended to the superview. But this just puts shareButton at the bottom of the superview, not center anchored to the bottom of whiteSquare

Answer 1

You should position the share button relative to the white square and not the super view

This should do the trick:

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[_whiteSquare(160)]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:elementDict]];


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_whiteSquare]-22.5-[_shareButton(45)]"
                                                                  options: NSLayoutFormatDirectionRightToLeft
                                                                  metrics:nil
                                                                    views:elementDict]];


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[_whiteSquare]-10-|"
                                                                  options:NSLayoutFormatDirectionLeadingToTrailing
                                                                  metrics:nil
                                                                    views:elementDict]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[_whiteSquare]-22.5-[_shareButton(45)]"
                                                                  options:NSLayoutFormatDirectionRightToLeft
                                                                  metrics:nil
                                                                    views:elementDict]];