iPhone自动布局图像排列问题

Posted 2023-02-26

【中文标题】iPhone自动布局图像排列问题

【英文标题】：iPhone auto layout images arrangement issue

【发布时间】：2014-05-16 13:26:35

【问题描述】：

我想在 iPhone 和 iPad 上使用自动布局排列 3 张图片。

3 幅图像应在保留纵横比的情况下调整大小，并且所有 3 幅图像的宽度应相同。 所有 3 张图像的左侧和右侧空间相同。

请参阅此链接上的示例图（图显示横向和纵向模式）：

肖像：http://i.imgur.com/9KVXATE.png

横向：http://i.imgur.com/tDjj9K6.png

可以通过编程方式获取屏幕/视图的宽度和高度，但我想使用自动布局来实现

以编程方式：

//Inside this method
//- (void) didRotateFromInterfaceOrientation:
(UIInterfaceOrientation)fromInterfaceOrientation

//Main_View is the view in which the 3 images are kept
//ImageView1, ImageView2, ImageView3 are 3 image views

ImageView1.frame = CGRectMake(Main_View.frame.origin.x + 3, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));


ImageView2.frame = CGRectMake(ImageView1.frame.size.width + 6, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));


ImageView3.frame = CGRectMake(ImageView2.frame.size.width + ImageView1.frame.size.width + 9, Main_View.frame.origin.y + 30, ((Main_View.frame.size.width / 3)-4), ((Main_View.frame.size.width / 3) - 4) * (82.0/75.0));

Main_View 改变它的大小（宽度，高度）。那么 (ImageView1 width) 就是 (Main_View width / 3)，它也保留纵横比。

以编程方式完美运行

【问题讨论】：

你的问题是什么？你现在怎么样？什么不起作用？

感谢 jrturton 的重播让我更清楚 答案 1：我想使用情节提要自动布局约束（意味着在情节提要上使用自动布局来排列这些图像）。回答 2：当屏幕旋转时，它也会管理相同的间距并调整设备屏幕的高度和宽度。 Answer3：当我对这些图像应用约束时，它的高度和宽度不会根据设备进行调整。

【参考方案1】：

使用 interfacebuilder 中的自动布局也很容易做到这一点。但是，在界面生成器中使用自动布局时，您可能不得不牺牲一些东西。您可能希望在情节提要中安排项目。具体步骤如下：

向界面生成器添加三个视图，像这样，

选择所有三张图片并在界面生成器中使用|---|这样的按钮添加新约束，并选择等宽和等高。

然后，再次选择所有三个视图，然后从菜单中选择 Editor -> Align -> Top Edges

选择最左边的视图并给它左边一些偏移，

选择最右边的视图并向右偏移一些，

选择一个视图并在顶部和底部设置一些偏移量。

选择第二个视图控件 + 将其拖动到第一个并选择水平分隔并给出一些恒定值，并对第二个和第三个视图执行相同的操作。

现在，约束已完成。当您同时选择多个视图并添加一些约束时，可能会发生这种情况，它可能尚未添加到其中一个视图中。因此，如果我们添加的所有约束都存在，那么可能必须解决这个错误并查看视图的约束。

您可以保留将视图与上边距或下边距分开的约束，并为其创建出口，然后根据需要进行更改，或者您可以在情节提要本身中设置一些参数。

李>

这是我的 ipad 模拟器水平方向的屏幕截图。

这里是垂直方向，

我希望我已经回答了你的问题。如果您对此有任何疑问，请告诉我。

【讨论】：

您好，非常感谢您的分步指导，它运行良好，但现在问题是在这种情况下，横向模式下图像会拉伸。我已经更新了与问题相关的图片肖像：i.imgur.com/9KVXATE.png 风景：i.imgur.com/tDjj9K6.png

对我来说看起来不错。图片有什么问题。尝试正确使用 contentMode 以正确适应内容。

我每次都按照您的步骤进行了很多次，每次只有一个问题是三视图根据需要正确排列，但三视图的高度或三视图的高度不会随着横向模式下宽度的增加而增加。所以图像看起来像拉伸。除了相等的高度之外，它们是我需要的其他任何高度约束吗？

【参考方案2】：

(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation 持续时间:(NSTimeInterval)duration

// i assume here that you have three imageviews img1, img2, img3

float viewWidth = [UIScreen mainScreen].bounds.size.width; float viewHeight = [UIScreen mainScreen].bounds.size.height;

如果（toInterfaceOrientation == UIInterfaceOrientationPortrait） // 你的肖像模式代码在这里 别的 NSLog(@"bounds are (%f,%f)", viewHeight,viewWidth);

img1.width = viewHeight/3; //i used "viewHeight" because of landscape mode
img2.width = viewHeight/3;
img3.width = viewHeight/3;
    // and then set centre of imageview according to your requirement

【讨论】：

感谢 Nitesh Borad 的重播，但这是我几周前已经完成的图像的程序化排列。我想知道这种布局是否可以在带有约束（自动布局）的情节提要上实现？