将UIImageView与UIScrollView底部对齐

Question

我想将红色图像对齐到滚动视图的底部。在纵向方向上，由于滚动视图的高度等于视图的高度，因此它看起来很好。

但是在横向模式下，它看起来像这样。当处于横向模式时，我希望在用户滚动到滚动视图底部之前完全隐藏它，以便红色图像始终位于滚动视图底部。目前在横向模式下，它看起来是这样的：

我已将红色图像作为滚动视图的子视图添加，并对其应用了bottommarginautoresizingmask。

- hariszaman

---

设置自动布局/自动调整大小。 - Vineesh TP

我已经在使用自动调整掩码底边距。 - hariszaman

不仅需要底边距，还需要灵活的宽度、高度、左右遮罩。 - Vineesh TP

那个不起作用，所以我才发了这个问题。 - hariszaman

@hariszaman 如果您使用自动布局，那么问题将很容易解决，否则您必须明确设置框架以便在正确的位置显示视图。 - Adeel Ur Rehman

你尝试过使用纯自动布局吗？ 你添加了图片，然后将图片标记到滚动视图的底部，并在滚动视图内创建了图像视图。 有没有特定的原因你没有使用自动布局？如果你提供更多信息，我就能够发布更有帮助的答案！ - Nour Helmi

Answer 1

当您使用自动布局时，Autoresizingmask不起作用。自动布局将关闭从storyboard文件解码的视图的translatesAutoresizingMaskIntoConstraints。但如果您想要的话，仍然可以在代码中将其设置为YES。但我不建议这样做。如果您想保持简单优雅，请坚持使用AutoLayout。您应该使用AutoLayout来布局图像视图。

在此处想做的事情无法仅通过IB完成。AutoLayout会根据它们的边缘布置视图。在您的情况下，图像视图与滚动视图之间的关系在纵向和横向方向上是不同的。在纵向方向上，图像视图的底部边缘与滚动视图的底部边缘对齐。但在横向方向上，图像视图的顶部边缘与滚动视图的底部边缘对齐。没有办法只使用一组约束来实现您的目标。您可以在IB中添加一个约束，将图像视图的底部边缘与滚动视图的底部边缘对齐，就像您问题中的第一张图片一样。然后将该约束的IBOutlet连接到您的视图控制器。当设备的方向改变时，您只需要更改约束的常数即可。它像这样：

@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

非常简单~

- wcd

---

谢谢您的回答，我已经使用编码完成了这个任务，但是正如我所指出的，我正在寻找仅使用界面构建器的解决方案。 - hariszaman

@hariszaman，这不仅仅可以在IB中完成。一些布局任务必须在代码中完成。 - wcd

Answer 2

如果您使用了autoresizing，则需要将left、right、bottom和flexibleWidth掩码设置为UIImageView和UIScrollView。请查看此处附加的图像。

如果您的UIScrollView覆盖整个屏幕，则为it设置所有调整大小掩码，但对于UIImageView仅设置上述掩码。

希望对您有所帮助。

在模拟器中输出：

纵向： 横向：

- z22

Answer 3

只需在您的视图控制器中添加此方法。

-(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;
}

- sahara108

---

为什么？提问者正在使用autoresizingmask，所以这是唯一的方法。 - sahara108

我只是引用了这个注释。 - kas-kad

啊，抱歉我没有注意到。 - sahara108

Answer 4

Autoresizingmask在使用自动布局时无法起作用。在IB中，为图像添加一个顶部间距约束，这将使您的图像显示在滚动视图的末尾。

- sajjeel

Answer 5

您不能仅使用IB解决此“问题”，因为您需要根据方向更改scrollview的内容大小。如果您希望图像视图被选项卡栏覆盖，您必须手动设置滚动视图的内容大小等于screen_height + abs(tabbar_height - imageview_height)。

- kas-kad

Answer 6

你需要将UIImageView固定在UIScrollView的底部，它会考虑到contentSize。希望这能帮到你。

- vibrazy