Align UIImageView to bottom of UIScrollView

Question

I want to align red image at bottom of scrollview. In portrait orientation it looks fine as the height of scrollview is equal to view height.

But in landscape mode it looks like this, when in landscape I want it to be completely hidden until the user scroll till the bottom of scrollview, so that the red image is always at the bottom of scroll view. Currently it looks like this in landscape mode.

I have added red image as a subview of scrollview and applied bottommarginautoresizingmask to it.

Answer 1

If you are using autoresizing then you need to set left, right, bottom and flexibleWidth masks to both UIImageView and UIScrollView. Take a look at the images attached here.

If your UIScrollView covers the whole screen then set all the resizing masks for it but for UIImageView set only the ones stated above.

Hope it helps.

Output in simulator:

Answer 2

Simply add this method in your view controller.

-(void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    CGSize contentSize = self.scrollView.contentSize;
    CGRect frame = self.imageView.frame;
    frame.origin.x = 0;
    frame.size.width = self.scrollView.frame.size.width;
    frame.size.height = Expected_Height;
    frame.origin.y = contentSize.height - frame.size.height;
    self.imageView.frame = frame;
}

Answer 3

You can't solve the "problem" using IB only, because you have to change scrollview's content size regarding the orientation. If you want your image view to be overlapped by tabbar, you have to manually set the content size for your scrollview equal to screen_height + abs(tabbar_height - imageview_height).

Answer 4

Autoresizingmask won't work with auto layout, in you IB, Add a Top space constraint on the image it will show your image at then end of scrollview.

Answer 5

Autoresizingmask does not work when you use auto layout. AutoLayout will turn off translatesAutoresizingMaskIntoConstraints of views decoded from storyboard file. But you can still set it to YES in code if you want to. But I don't recommend you to do that. Stick to AutoLayout if you want to keep it simple and elegant. What you should do is to use AutoLayout to layout the image view.

What you want to do here can't be done only in IB. AutoLayout layout views based on their edges. In your case, the relation between image view and scroll view is different in portrait and landscape orientation. In portrait orientation, the image view's bottom edge is aligned with scroll view's bottom edge. But in landscape orientation, the image view's top edge is aligned with scroll view's bottom edge. There is no way to use only one set of constraints to achieve your goal. You can add a constraint to image view in IB which aligns image view's bottom edge with scroll view's bottom edge like the first picture in your question. Then IBOutlet that constraint to your view controller. When device's orientation changed, you can just change the constant of the constraint. It is something like this:

@interface ViewController ()

@property (nonatomic, weak) UIImageView *imageView; // the image view
@property (nonatomic, weak) NSLayoutConstraint *imageBottomToScrollView; // the constraint you added in IB to the image view

@end

@implementation ViewController


- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
    UIDeviceOrientation orientation = [UIDevice currentDevice].orientation;
    if (UIDeviceOrientationIsLandscape(orientation)) {
        self.imageBottomToScrollView.constant = -CGRectGetHeight(self.imageView.frame);
    } else if (UIDeviceOrientationIsPortrait(orientation)) {
        self.imageBottomToScrollView.constant = 0;
    }
}


@end

It's very easy~

Answer 6

You have to pin the uiimageview to the bottom of you scrollview and it will take into account the contentSize. Hope that helps