iPhone 上通用故事板的约束

Posted

技术标签:

【中文标题】iPhone 上通用故事板的约束【英文标题】:Constraints for universal storyboard on iPhones 【发布时间】:2015-12-22 11:02:35 【问题描述】:

如今,我在 ios 上遇到了不同屏幕尺寸的限制。

我尝试 google 和 *** 寻找解决方案,但我的英语似乎不够流利,无法找到答案。

我有 4 个垂直对齐的按钮,第一个和最后一个受屏幕边缘的约束(有点简单)。但我真的在为 2 个中间按钮的限制而苦苦挣扎。我无法找到一种方法使它们与每个尺寸屏幕上的左右按钮等距。

是否有一些简单而棘手的方法可以使这些约束正确?还是我做错了,我应该尝试以编程方式进行吗?

谢谢

【问题讨论】:

按钮宽度呢?它需要是固定的或动态的 我使用 50 作为宽度,我希望它能够被修复,但我可以通过编程方式更改它 也许这个链接对你有用....***.com/questions/32862142/… 【参考方案1】:

在每个按钮的中间添加三个不可见的视图,通过约束使它们的宽度彼此相等,然后您的四个按钮将等间距。对于 Y,您只需将其固定在您想要的位置即可。

如果您打算只支持 iOS 9 及更高版本,请使用UIStackView

【讨论】:

【参考方案2】:

这个问题的解决方法很简单。这可以使用“间隔视图”的概念来解决。您必须在每个红色视图之间放置不可见的视图。在您的情况下,您将需要 3 个。然后将它们的背景设置为清晰的颜色。 . 接下来,使它们的宽度相等并将它们的边缘约束到该视图之后和之前的视图。然后定义红色视图的大小。 记住不要给“清晰的彩色视图”任何固定宽度。它将由运行时确定。这将解决问题。如果需要更多信息,请告诉我。

这是解决此问题的博客文章 http://adamdelong.com/fluid-layouts-with-auto-layout-size-classes-spacer-views-and-constraint-priorities/

这是这个的 youtube 视频 https://www.youtube.com/watch?v=eSG-3-QpmWk&feature=youtu.be

【讨论】:

您也可以按照以下答案中的解决方案进行操作。 ***.com/questions/13075415/… 这是adamdelong.com/… 的解决方案的博客文章这是youtube.com/watch?v=eSG-3-QpmWk&feature=youtu.be 的 youtube 视频 知道了,成功了。您链接的视频和教程确实向我解释了一切,并且支持 iOS9 之前的版本。完美回答我,谢谢。 pssst.... 对 iOS9 的另一项建议:iOS 9 引入了更多 UIAutolayout 概念,这些概念通过引入其他一些概念来消除对间隔视图的需求。您可以对此进行更多搜索。干杯。 :) 其他人的更多链接:packtpub.com/books/content/evenly-spaced-views-auto-layout-ios【参考方案3】:

除了 Tj3n 回答按钮之间的视图之外,您还可以使用

用于设置的 UIStackView (iOS 9!) Axis: horizontal, Distribution: equal spacing 工具栏(取决于您要对按钮执行的操作),其中包含工具栏项目和它们之间的灵活空间

【讨论】:

【参考方案4】:

为什么不分类大小? Apple 在 iOS 8 中引入了自适应用户界面的概念,它依赖于自动布局和尺寸类的组合。

如果您不知道什么是大小类,有很多可用的教程,请找一个。

总结:Apple 非常巧妙地去掉了 iphone 和 ipad 的两个故事板,并为通用应用制作了一个故事板。不,您不必费力尝试应用满足所有屏幕尺寸的自动布局约束:)

以下是一些尺寸等级及其含义:) 常规宽度 x 常规高度 ----> iPad Potrait 模式/ipad 横向模式 Compact width x Regular Height ----> iPhone 6 plus,iPhone 6,iPhone 5s,iPhone 5,iPhone 4s 肖像模式 Compact width X Compact Height ----> iPhone 6,iPhone 5s,iPhone 5,iPhone 4s 横向模式 常规宽度 x 紧凑高度 ----> iphone 6 plus 横向模式。

您可以从情节提要中选择您想要支持的尺寸类别 :) 并开始应用特定于每个尺寸类别的约束(例如中间的按钮),或者如果您有通用的约束(例如您的按钮固定在屏幕上),则适用于所有尺寸等级。

您可以部署、移除、重用或删除各种尺寸类别的约束。

总结:哥们,如果你还没有使用 size class,那么现在是开始使用它的好时机:) 我相信在 2014 年苹果 WWDC 会议上有一个精彩的视频。下载、观看、开始玩吧。

编码愉快:)

【讨论】:

感谢您的信息,我听说过一些关于尺寸等级的信息,但还没有检查它,因为我认为处理通用应用程序的最佳方法是约束。我会调查的! 嘿 Bryan,你不必再编写适用于所有大小类别的约束了 :) 不要在这上面浪费你的精力 :) 差不多一年前我犯了同样的错误,然后我开始了了解大小类:) 看看它相信我的开发会更简单:) 更快:) 快乐编码:) @BryanORTIZ 请注意,在我看来,只有当您不能为所有设备做通用的事情时(比如您的问题),尺寸等级才是可取的。理想情况下,您只需编辑 一个 大小类(Any:Any,默认值)并在其中完成所有操作。【参考方案5】:

您可以使用方程式来获得这种外观。 使用视图的尾随点来获得这个。

View1.trailing = superview.trailing*(2.0f/9.0f)

View2.trailing = superview.trailing*(4.0f/9.0f)

View3.trailing = superview.trailing*(6.0f/9.0f)

View4.trailing = superview.trailing*(8.0f/9.0f)

如果你制作View1.width = superview.width*(1/9.0f),你可以实现你想要的。

这个问题有很多类似的解决方案。但基地正在使用尾随点。 也可以使用 View 的 centerX 位置来完成。

View1.centerX = superview.trailing*(3.0f/15.0f)

View2.centerX = superview.trailing*(6.0f/15.0f)

View3.centerX = superview.trailing*(9.0f/15.0f)

View4.centerX = superview.trailing*(12.0f/15.0f)

【讨论】:

【参考方案6】:

感谢 LearneriOS 的回答,我解决了我的问题。

为了得到我想要的结果,我创建了 3 个宽度为 10 的视图。

我的第一个和最后一个按钮已经受到限制。我将我的第一个额外视图限制为我的第一个带有水平间距的按钮,然后我将我的第一个额外视图限制为在容器中垂直居中。然后我将我的额外视野限制在他自己的宽度和高度上。

重要的部分来了:我确实进入了约束菜单并选择了宽度约束。里面的值仍然是 10,但我确实将优先级从 1000 更改为 750。

然后我确实复制了我的第一个额外视图并将它们全部约束到最近的按钮,就像我对第一个内视图所做的那样,但我删除了它们的宽度约束(除了第一个视图之外的所有额外视图)并约束插入第一个视图的额外视图:等于宽度。

然后我得到了我的结果,我希望它足够清楚,再次感谢。

【讨论】:

以上是关于iPhone 上通用故事板的约束的主要内容,如果未能解决你的问题,请参考以下文章

用于通用故事板的 PSD

如何在iphone中从一个视图转到故事板的第一个视图

带有故事板的 CollectionView 样式

来自故事板的原型单元不创建 UILabel 等

iOS 故事板视图约束问题

Xcode 故事板的默认设计尺寸是多少?