简体   繁体   English

适用于iPhone 5、6、6+的iOS自动版式

[英]iOS autolayout for iphone 5, 6, 6+

I'm developing an app which will is only directed towards iphone 5, 6 and 6+ devices. 我正在开发一个仅针对iPhone 5、6和6+设备的应用程序。 Since all of these devices have the same dimension ratio, how do I setup auto layout to resize everything exactly the same for all the different iphone sizes - or should i not use auto layout at all? 由于所有这些设备都具有相同的尺寸比例,我如何设置自动版式以针对所有不同的iPhone尺寸完全调整所有内容的大小-还是我根本不应该使用自动版式?

Trying size classes "any w/any h", i am not able to get the desired result: 尝试大小类“任何w /任何h”,我无法获得所需的结果:

在此处输入图片说明

You'll get a lot of different answers on this topic, but I think Autolayout is the easiest route to go. 您将在此主题上获得很多不同的答案,但是我认为自动布局是最简单的方法。 At the bottom of the Interface Builder screen, you can switch between different screen sizes. 在Interface Builder屏幕的底部,您可以在不同的屏幕尺寸之间切换。 It looks this: 看起来像这样: 像这样 .

First, you'd set up your constraints for "w: Any h: Any" . 首先,您需要为“ w:Any h:Any”设置约束。 If there are any "special circumstances", such as screen that are compact, you would switch that button to select the size you wish to configure constraints for and update them accordingly. 如果存在任何“特殊情况”,例如紧凑的屏幕,则可以切换该按钮以选择要为其配置约束的尺寸,并相应地对其进行更新。

Update 更新资料

If you want to keep items proportionally in the same place on different screens, you can add some UIView objects to your storyboard that will serve as spacing placeholders. 如果要在不同屏幕上将项目按比例放置在同一位置,则可以将一些UIView对象添加到情节提要中,用作间隔占位符。 There's need to specify class or anything like that for these placeholders (though you might want to change the background of them). 需要为这些占位符指定类或类似的东西(尽管您可能想更改它们的背景)。 Then, configure your constraints. 然后,配置您的约束。

Update 2 Looking at the images you posted, it appears you might not have constraints set (correctly?) for the buttons at the bottom (cancel, connect, done). 更新2查看发布的图像,您可能没有为底部的按钮(取消,连接,完成)设置约束(正确?)。 You want those buttons to display at the bottom on every screen size, right? 您希望这些按钮显示在每种屏幕尺寸的底部,对吗?

Did you set up any Constraints? 您设置了任何约束吗? Either you didn't set any and that's the problem, or you forgot to set some. 您可能没有设置任何东西,这就是问题所在,或者您忘记了设置一些东西。

Here's a tutorial that might help you: http://www.raywenderlich.com/113768/adaptive-layout-tutorial-in-ios-9-getting-started 这是一个可能对您有帮助的教程: http : //www.raywenderlich.com/113768/adaptive-layout-tutorial-in-ios-9-getting-started

As others have noted, autolayout is a good solution for this. 正如其他人指出的那样,自动布局是一个很好的解决方案。 You could also consider using table views with static content. 您还可以考虑使用具有静态内容的表视图。 iOS will automatically adjust the size of your table view and its contents to fit the available space. iOS会自动调整表格视图的大小及其内容以适应可用空间。 See this article for an example: 请参阅本文的示例:

http://www.oliverfoggin.com/using-a-static-uitableview-as-a-layout-device/ http://www.oliverfoggin.com/using-a-static-uitableview-as-a-layout-device/

MarkupKit is an open-source framework that can help you with either approach (I'm the project's author). MarkupKit是一个开源框架,可以通过两种方法帮助您(我是项目的作者)。 It provides classes that abstract the details of autolayout so you don't need to deal with it yourself. 它提供了抽象自动布局细节的类,因此您无需自己进行处理。 Here's the same example as above implemented using MarkupKit: 这是使用MarkupKit实现的上述示例:

http://gkbrown.org/2015/11/01/using-a-static-uitableview-as-a-layout-device-markupkit-edition/ http://gkbrown.org/2015/11/01/using-a-static-uitableview-as-a-layout-device-markupkit-edition/

You can achieve this by disabling size class and using proportional width and height constraint for elements and UIView with dynamic size for the spacing between the elements. 您可以通过禁用大小类,并对元素使用比例宽度和高度约束,并对元素之间的间距使用动态大小的UIView来实现此目的。 Also those dynamic UIView will be created by using proportional width and height constraints. 同样,将通过使用比例宽度和高度约束来创建那些动态UIView。 I have made several apps which were looks exactly same in iPhone 5, 6, 6 Plus, 6S, 6S Plus simulators. 我制作了几个与iPhone 5、6、6 Plus,6S,6S Plus模拟器完全相同的应用程序。 I have measured by taking screenshots of simulator. 我已经通过拍摄模拟器的屏幕截图进行了测量。 The answer of this question will be too huge if i explain everything. 如果我解释一切,这个问题的答案将太大。 But an not able to explain anything as i don't have any requirement mockup regarding which i can suggest you things. 但是我无法解释任何事情,因为我没有任何关于我可以向您推荐的东西的要求模型。 If you have the mockup for iPhone 5 post it here. 如果您有iPhone 5样机,请在此处发布。 I will create a sample Git repo and i will add constraints to elements and you will analyse that. 我将创建一个示例Git回购,并为元素添加约束,然后您将进行分析。 Also most complex screens with hide show popup elements inside screens can be made dynamic size using my method. 使用我的方法,还可以将大多数隐藏在屏幕内部的具有隐藏显示弹出窗口元素的复杂屏幕设为动态尺寸。 Problem is i cannot explain everything. 问题是我无法解释一切。 I have answered some questions in the below links. 我已经在以下链接中回答了一些问题。 You can watch them to get idea what i am trying to explain. 您可以观看他们以了解我要解释的内容。

https://stackoverflow.com/a/31336272/4030971 https://stackoverflow.com/a/31336272/4030971

https://stackoverflow.com/a/31156987/4030971 https://stackoverflow.com/a/31156987/4030971

https://stackoverflow.com/a/31915676/4030971 https://stackoverflow.com/a/31915676/4030971

https://stackoverflow.com/a/31870625/4030971 https://stackoverflow.com/a/31870625/4030971

https://stackoverflow.com/a/31447103/4030971 https://stackoverflow.com/a/31447103/4030971

https://stackoverflow.com/a/31431519/4030971 https://stackoverflow.com/a/31431519/4030971

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 iOS-iPhone 6和6+中出现空白 - iOS - Whitespace appearing in iPhone 6 and 6+ iOS 8 Today Extension不适用于iPhone 6和6+设备 - iOS 8 Today Extension not working on iPhone 6 and 6+ devices iOS 隐藏 iPhone 6 和 6+ 的状态栏 - iOS Hide status bar for iPhone 6 and 6+ ios限制iPhone 6和6+部署中的应用 - ios restrict app from iPhone 6 and 6+ deployment 如何使iOS应用在iPhone 5,iPhone 6和iPhone 6+中的外观相同 - How make iOS app look same in iPhone 5, iPhone 6 and iPhone 6+ iOS,自动版面设计可为iPhone 5但不为iPhone 4添加边距/分隔符? - iOS, autolayout to add a margin / spacer for iPhone 5 but not iPhone 4? 哪些特定的UIView对象必须使用自动布局才能在iPhone 6/6 +上正确缩放应用程序? - What specific UIView objects must use autolayout to have the app scale properly on the iPhone 6/6+? 当设置了 preferredMaxLayoutWidth 时,自动布局在 UILabel iPhone 6/6+ 的顶部和底部添加额外的填充 - Autolayout adding extra padding on top and bottom of UILabel iPhone 6/6+ when preferredMaxLayoutWidth is set Adobe AIR iOS应用程序中iPhone 6和6+的初始屏幕错误 - Wrong splash screen for iPhone 6 and 6+ in Adobe AIR iOS application iPad / iPhone上带有IOS 6+的多个输入文件标签 - Multiple input file tags with IOS 6+ on iPad/iPhone
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM