在今天的 2017 主题演讲和 iPhone X 发布之后,我对新 iPhone 既感到担忧又感到兴奋。这个问题更多的是关于用户界面、设计指南或界面设计方法,而不是技术问题。
我的问题是如何支持1125px × 2436px (375pt × 812pt @3x)分辨率?
如苹果在其 Human Interface Guidelines for iPhoneX 上的这张图片所示,这里说会支持3x图片扩展。但是在顶部有 185 点额外以及考虑到 iphone 7 plus 分辨率的 414 * 736 点,宽度减少了 414 - 375 = 39 点。
您可以在此处查看分辨率比较:- https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions .
我们如何才能为这个新的设计解决方案设计我们的应用程序?
一些问题场景:
如何支持:
- 水平 ImageView 缩放设备的整个宽度和固定高度。
- ImageViews 缩放整个宽度和高度(如电子商务应用中的整页产品图片)。
- 有额外的 185 点高度,如果我在页面上显示有限的内容,会显示很多空白区域。例如,我如何设计一个高度为 400 像素并缩放整个宽度的 View 。我应该保持顶部对齐居中垂直对齐吗?
我认为 185 分对于高度来说是一个很大的空间。我们需要重新考虑很多设计和屏幕。我们如何设计和解决这些场景?我希望我的问题现在已经很清楚了。
我的个人意见:- 无论多么艰难或困惑,当我们习惯了这个解决方案时,最终用户体验都会变得更好并且更大。
请分享很棒的技术和设计过程。干杯!!!
最佳答案
在查看针对不同 UI 问题的可能解决方案后,我发现苹果在 iOS 11 中引入的安全区域布局指南可以提供很多帮助。
注意:- 即使您的部署目标低于 iOS 11,也可以使用安全区域布局指南。
safeAreaLayoutGuide 取代了 topLayoutGuide 和 bottomLayoutGuide,作为在 View 和父 View 之间创建约束的新方法。
为 iPhone X 添加分辨率为 1125px × 2436px 的启动图像
如果您将 uiview 固定到 View 的顶部,您可以将其顶部约束链接到安全区域而不是父 View 。
类似地,对于底部 View ,将底部约束提供给安全区域而不是父 View 。
如果您知道如何创建编程约束,您可以使用布局 anchor 在顶 View 上方包含安全区域。因此,您可以通过编程将您的布局链接到安全区域。
topView.topAnchor.constraint(
+ equalTo: view.safeAreaLayoutGuide.topAnchor
).isActive = true
更新:另一种情况 - 假设您的屏幕顶部有一个 UIView。您希望此 View 从 iPhoneX 的刘海下方开始。我们需要计算所有 iOS 11 设备和低于 iOS 11 的设备的最高利润率,如下所示:-
if (@available(iOS 11, *)) {
UIWindow *window = UIApplication.sharedApplication.keyWindow;
toppadding = 0.0;
if (window.safeAreaInsets.top > 0)
{
toppadding = window.safeAreaInsets.top - 20;
}
// CGFloat topPadding = window.safeAreaInsets.top;
bottomPadding = window.safeAreaInsets.bottom;
self.navigationViewTopConstraint.constant = toppadding;
}
else
{
bottomPadding = 0;
self.navigationViewTopConstraint.constant = 0;
}
进一步阅读:- Here
关于ios - 应用程序如何支持 iPhone X 分辨率或屏幕尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46184318/