iPhone X-安全区域布局指南-我希望我的应用程序全屏显示，而不仅仅是在安全区域 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

iPhone X 适配指南 (官方翻译版)

4.7寸 iPhone iPhone X 对于具有自定义布局的应用，支持iPhone X也应该比较容易，特别是如果您的应用使用自动布局并遵守安全区域和边距布局指南。...在iPhone X上预览您的应用程序。您可以使用Simulator（Xcode附带）来预览应用程序，并检查剪辑和其他布局问题。一些功能，如宽彩色图像，最好在实际设备上预览。提供全屏体验。...所有应用程序都应遵循UIKit定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。注意状态栏的高度。...同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上，确保重要的视觉内容保持在两种显示尺寸上。避免将交互式控件明确放置在屏幕底部和角落。...在极少数情况下，像游戏这样的沉浸式应用程序可能需要自定义的屏幕边缘手势，优先于系统的手势 - 第一个滑动会调用特定于应用的手势，而第二次滑动则会调用系统手势。

4.1K5 0

最新iOS设计规范七｜10大视觉规范（Visual Design）

（从左到右/从右到左的布局方向，日期/时间/数字格式，字体变化，文本长度）系统功能可用性（3D Touch）布局指南和安全区域布局指南中定义的矩形区域实际上在屏幕上不可见，但有助于内容的定位，对齐和间距...该系统包括预定义的布局指南，可轻松在内容周围应用标准边距并限制文本的宽度，以实现最佳的可读性。您还可以定义自定义布局指南。 ? ? 遵守UIKit定义的安全区域和布局边距。...这些布局指南可确保根据设备和上下文进行适当的插入。安全区域还可以防止内容重叠在状态栏，导航栏，工具栏和选项卡栏上。系统提供的标准视图将自动采用安全区域布局指南。...为了获得最佳结果，请使用系统提供的标准界面元素和“自动布局”来构建您的界面，并遵守布局指南和安全区域定义。...与旧款iPhone相比，全屏iPhone的内容垂直空间更大，状态栏占据了你APP可能根本无法充分利用的屏幕区域。状态栏还显示用户认为有用的信息。它只在可以换取附加价值的时候才隐藏起来。

12.8K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

【最新】iPhone X 交互设计官方指南

如果你的的应用程序具有自定义布局，那么支持 iPhone X 也应该比较容易。如果你的应用程序使用 Auto Layout 并且遵守安全区域和边距布局指南的话。...所有的应用程序都应遵循 UIKit 中定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还能够防止内容把状态栏、导航栏、工具栏和标签栏覆盖掉。注意状态栏的高度。...iPhone 上的显示高度为 4.7 英寸，并且它的屏幕上提供了更多的垂直空间内容，状态栏占据了你的应用程序本来可以使用的屏幕区域，状态栏还显示了对人们有用的信息，只有在交换附加值时候才能被隐藏。...同样的道理，iPhone X 上的图稿在全屏显示时会被裁剪或者添加黑边。如果要继续使用在 4.7 英寸 iPhone 上全屏显示的图稿，一定要注意在两种显示尺寸上的兼容性问题。...避免将交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换，这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。

3K2 0

iPhone X的UI设计技巧

作为一名UI设计师，我总结了一些在设计iPhone X App时有效的技巧供大家参考： 1. ...因此，您最好将背景扩展到显示屏的边缘(包括状态栏)，以及垂直可滚动的区域。...以下是苹果为设计师定义安全区域的方式。（如下图示） ? 如果您的App应用平台标准组件和自动布局，您的用户界面也应适当地缩放以适应iPhone X屏幕。 ? PS:只能隐藏状态栏以换取附加值。...提供全屏体验与大多数宽高比不匹配一样，适用于旧款iPhone屏幕的设计要么被裁剪，要么被添加白边。...在iPhone X的内容被显示在一个小于4.5英寸设备上的情况下，该设计甚至可以把多余的屏幕留白（图中两边垂直的白边）收起来。为了交付这样的好图像，为不同的长宽比创建独立的屏幕适配也是值得的。 ?

1.7K4 0

七个用户体验设计小秘诀，打造最舒服的互动流程

与标签栏一样，所有选项都可以立即显示，只需点击一下即可访问。 ? 全屏导航这可能听起来与我所说的节省屏幕空间相矛盾，但全屏导航或许是一个不错的选择。...（研究：Steven Hoober）据史蒂文·霍伯（Steven Hoober）的研究，85％的用户用一只手使用手机。以下热图显示了自2007年以来每个iPhone显示屏尺寸的拇指区域。...确保你的应用程序可以轻松地（完全）在一个大屏幕（如iPhone 6或7）上使用。共同操作和导航的绿色区域将顶级菜单，常用的控件和常用操作项目放在屏幕的绿色区域中，用一个拇指就可以轻松地达到。 ?...（图片：Dmitry Kovalenko）破坏操作的红区由于你不希望用户不小心点击这些操作，请在难以达到的红色区域中放置破坏性的操作（例如删除和清除）。 ?...而不是显示一个加载指示器，使用屏幕架构来专注于实际进度，并创造对将来的预期。这意味着事情正在发生，随着信息逐渐显示在屏幕上，人们看到应用程序在等待时正在进行中。

3.8K6 0

鸿蒙开发实战案例：沉浸式适配案例

，默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠，默认情况下开发者开发的界面都被布局在安全区域内。...而要实现沉浸式效果，则需要设置组件绘制内容突破安全区域的限制。...目前系统提供了两种方案：组件安全区方案窗口全屏布局方案(此方案比较适合整个应用进行沉浸式使用，单个页面沉浸式建议使用“组件安全区方案”)两种方案的实现案例如下：1、通过设置expandSafeArea这个组件属性...，可支持组件在不改变布局情况下扩展其绘制区域至安全区外。...setWindowLayoutFullScreen()这个接口实现窗口强制全屏布局，再通过接口getWindowAvoidArea()和on('avoidAreaChange')获取并动态监听安全区域的高度信息

7992 0

iPhoneX 适配实践

一、屏幕尺寸 1、规格： iPhone X 的屏幕宽度同 iPhone 6、iPhone 6s、iPhone 7 和 iPhone 8 的 4.7 英寸屏幕宽度相同，即 375pt。...上图为官方标准的黑色背景，注意不是纯黑色的，还能分辨传感器区域三、SafeArea安全区域安全区域是指在屏幕顶部和底部区域之间能正常显示内容的区域。...1、iPhoneX安全区域(全屏状态): 2、普通iPhone安全区域（包含所有状态）： 3、安全区域布局SafeAreaLayoutGuide /* The top of the safeAreaLayoutGuide...四、布局适配 1、自定义导航栏如果你的项目存在导航栏界面push到全屏界面，或者手势滑动做很炫的过场动画，那么你可能会用到自定义导航栏NavigationBar，每个ViewController维护自身的...: safeAreaInsets:{88, 0, 34, 0} 2、自定义工具栏可交互的固定组件是不能遮住home键指示器，需要放置在安全区域底部内。

4.8K4 1

鸿蒙开发实战：鸿蒙应用开发中的页面管理工具类详解

一、引言在鸿蒙应用开发的征程中，如何高效地管理页面布局与显示，以满足用户对于沉浸式体验、个性化StatusBar颜色等界面特性的需求，一直是开发者们关注的焦点。...借助这些功能，开发者能够轻松获取页面的关键信息，如顶部安全区域高度、底部安全区域高度，以及全屏开发状态和状态栏颜色等。这一工具类无疑是鸿蒙应用开发中不可或缺的一部分。...在初始化过程中，工具类会自动获取主窗口对象、设置全屏开发状态，并计算顶部和底部安全区域的高度，为后续的页面布局与管理提供基础数据。...传入true将启用全屏显示，而传入false则会禁用。...全屏显示模式可能会影响应用的布局和用户体验，请在使用时谨慎考虑。修改状态栏的样式和颜色可能会影响应用的整体视觉效果，建议在设计时保持与应用主题的一致性。

3521 0

【HTML5 理论知识】就H5调试技巧，浅谈：iPhone X 适配方案！

image.png 2017年9月苹果发布了iPhone X机型，对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下面就让我来逐一介绍吧！...客户端适配解决方案客户端直接将webview的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色webview内： image.png 利弊分析优点：H5前端开发没有任何适配工作量。...)和env(safe-area-inset-X) ，这些属性是与iOS11以上的所有iPhone机型（不仅仅包括iPhone X）都相关的，故以iOS版本为区别具体分析一下全屏下的H5页面： 1....针对于iOS11.0-iOS11.1的系统：当设置了viewport-fit=cover，H5页面会覆盖页面安全区域全屏展示，但是这样会带来页面元素会被“刘海儿”和底部Home Indicator遮挡问题...机型上，H5加入viewport-fit=cover后，safeArea的值是基于“如果布局接触了非安全区域才会赋值”。

3.8K8 0

SwiftUI 中的内容边距

前言SwiftUI 引入了一组视图修饰符，使我们能够有效地管理视图中的安全区域。在许多情况下，安全区域是你希望放置内容的地方。...在使用 UIKit 时，我们可以访问 readableContentGuide 布局指南。从字面上看，它是另一个安全区域，适应屏幕大小，但仅适用于文本内容。...使用 contentMargins我们需要一种区分视图的内容和工具栏，并仅移动内容而保持工具栏在原地的方法。...你可以在 Playground 中运行此代码以查看结果。总结本文介绍了 SwiftUI 中的内容边距管理，通过对比安全区域的概念，解释了内容边距的重要性。...随后，通过介绍 UIKit 中的 readableContentGuide 布局指南以及 SwiftUI 中的 safeAreaPadding 视图修饰符，展示了在 iPad 上适配内容边距的方法。

5.2K3 2

android:fitsSystemWindows 是什么意思？

一、属性定义android:fitsSystemWindows="true" 是一个布局属性（View 属性），用于告诉系统： “请把我的内容布局边界往内缩，让我不要被系统窗口（比如状态栏、导航栏）遮住...“系统窗口”指系统在屏幕上保留的区域，例如：状态栏（Status Bar）导航栏（Navigation Bar）刘海区域（Display Cutout）系统手势区域当这些存在时，系统布局的可用空间...四、举例对比属性行为android:fitsSystemWindows="true"内容会避开系统栏，布局在安全区域内android:fitsSystemWindows="false"内容会铺满整个屏幕...，可能被状态栏或导航栏遮挡举例：如果你希望全屏沉浸（例如背景图延伸到状态栏）：android:fitsSystemWindows="false"如果你希望内容避开状态栏（例如标题不被遮住）：android...手动处理安全区域。

4191 0

Android 9.0系统新特性，对刘海屏设备进行适配

这种属性允许应用程序的内容在竖屏模式下自动延伸到刘海区域，而在横屏模式下则不会延伸到刘海区域。...可以看到，在竖屏模式下应用程序的状态栏部分刚好占据了手机的刘海区域，并且系统还会根据刘海的高度来自动调整状态栏的高度，这样应用程序中的内容自然是不会被刘海部分遮挡到的。...可以看到，程序进入了全屏沉浸式体验的效果，并且我们在布局文件中设置的背景图是可以延伸到刘海区域的，这就使得手机屏幕的空间得到了更充分的利用。现在旋转一下手机屏幕，效果如下图所示： ?...很明显，这比之前在刘海区域空出一条大黑边的用户体验要好上太多了。不过，虽然现在我们已经实现了让应用程序的内容延伸到刘海区域的功能，却无法保证刘海部分不会影响到应用程序的正常使用。什么意思呢？...Android在9.0系统中提供了一套专门用于获取安全显示区域的API，我们只需要确认出哪些位置是有可能被遮挡到的，然后对可交互控件进行相应的位置偏移就可以了，示例代码如下所示： if (Build.VERSION.SDK_INT

1.3K1 0

手机QQ空间iPhone X适配总结

而全屏化主要修改的是启动页，如果启动页使用storyboard或者xib文件，那么全屏化无需添加任何操作，同时也推荐使用该方式，但是如果之前使用的images.xassets放置启动页，那么需要把原来的...状态栏到底还要不要隐藏在完成全屏化后我们得到的界面如下图所示。 [image.png] 由上图可知，状态栏展示内容其实非常少，而且不完整。...，当我们在全屏界面隐藏了状态栏之后，statusBarFrame获取到的size为0，可能会出现控件布局错乱，因此最稳妥的方法还是判断是否iPhone X返回一个常数，如下所示。...toolbar的显示现在适配比较纠结，那就是到底要不要修改toolbar的高度，如下面输入面板中表情滑动条的高度，根据内部适配规范我们只是把它往上提而不修改其高度，但这看上去悬空的感觉可能会有点奇怪。...需要注意的坑关于TabBar高度，在VC的viewWillAppear中获取到的是默认原始高度49，而到了viewDidAppear时获取到的高度为83，这就导致了在popVC时可能底部tabbar发生一个从下到上的跳动

2.7K3 0

iPhone 检测 iPhone X 设备的几种方式和分辨率终极指南

大家好，又见面了，我是你们的朋友全栈君。...方式三：通过底部安全区域的高度来判断方式四：通过是否支持 FaceID 判断方式五：通过 UIStatusBar 的高度判断结语原文链接参考连接 ---- 本文是我们前两天发的两条小集的汇总...后面我们想了一个简便的方法，即获取屏幕的宽度和高度，取较大一方进行比较是等于 812.0 或 896.0，代码如下：方式三：通过底部安全区域的高度来判断在去年 iPhone X 发布后，为了适配顶部的浏览和底部的操作条...，苹果在 iOS 11 上引入安全区域概念，建议开发者在安全区域内进行 UI 布局，因此我们可以获取屏幕 keyWindow 的 safeAreaInsets 值来判断设备是否 iPhone X。...方式五：通过 UIStatusBar 的高度判断在 iPhone X 之前，所有 iPhone 设备的 StatusBar（状态栏）高度都为 20pt，而 iPhone X 的为 44pt，因此我们可以通过获取状态栏的高度判断是否等于

2.6K2 0

Web App 一分钟适配 iPhone X

因为 iPhone X 的刘海设计，Web 在 iPhone X 横屏时，可能会有这些问题：默认情况，iPhone X 会将页面填充到安全区域(safe area)，就像上面的图一样，一般情况下是没有问题的...；但如果是全屏 Web App 就会有问题了，比如背景色和页面的契合程度之类的；有的 iOS app 内置 WKwebview 可能会为了避免一些bug，而采用统一的行为，就是禁用 iOS 11 自己的内容区域判断...默认全屏 ? 在 viewport 的 meta 属性中，添加 viewport-fit=cover 即可。...设置页面边距为安全区域边距 ?...当然，这里的padding只是用于匹配iPhone X默认的安全区域的，你可以设置任何值，不过建议要不小于默认的安全区域值。当前版本，横屏时，各属性的值： ? ?

9802 0

极速适配 iPhone X 秘笈

在适配过程中，我们尝试了这三种方案，如下。解决方案1 客户端适配客户端直接将 webview 的安全区域限制在除去安全区域的区域内。...缺点：页面会限制在客户端限制的 webview 区域内，没有满屏效果。...缺点：对于全屏 / 透顶标题栏 / 横屏情况都要用不同的 css 代码进行适配，不够灵活。另外，如果苹果下一年又发布了类似 iPhone X plus 这样的机型，适配工作就要重新来过。...针对 iOS 11.0 - iOS 11.1 的系统：当设置了 viewport-fit=cover，H5 页面会覆盖页面安全区域全屏展示，但是这样会带来页面元素被“刘海儿”和底部 Home Indicator...iOS 11 机型上，H5 加入 viewport-fit=cover 后，safeArea 的值是基于“如果布局接触了非安全区域才会赋值”。

1.8K4 0

HarmonyOS NEXT实战：管理避让区

：在页面显示或隐藏时，使用Window.setWindowLayoutFullScreen()方法设置窗口是否为全屏模式，使用Window.setWindowSystemBarEnable()方法设置状态栏和导航条显隐...安全区域概念：安全区域是指页面的显示区域，默认情况下开发者开发的界面都布局在安全区域内，不与系统设置的避让区比如状态栏、导航栏区域重叠。...提供属性方法允许开发者设置组件绘制内容突破安全区域的限制，通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外，通过设置setKeyboardAvoidMode来配置虚拟键盘弹出时页面的避让模式...页面中有标题栏等文字不希望和避让区重叠时，建议对组件设置expandSafeArea属性实现沉浸式效果，也可以直接通过窗口接口setWindowLayoutFullScreen设置全屏沉浸式。...说明KeyboardAvoidMode.RESIZE模式会压缩页面大小，页面中设置百分比宽高的组件会跟随页面压缩，而直接设置宽高的组件会按设置的固定大小布局。

2830 0

让你的WEB和APP一分钟适配 iPhone X

iPhone X昨日已经开抢了然而面对 iPhone X 这个奇葩的屏幕你和你的编辑器准备好了吗？...因为 iPhone X 的刘海设计，Web 在 iPhone X横屏时，可能会有些问题：默认情况，iPhone X 会将页面填充到安全区域(safe area)，就像上面的图一样，一般情况下是没有问题的...；但如果是全屏 Web App 就会有问题了，比如背景色和页面的契合程度之类的；有的 iOS app 内置 WKwebview 可能会为了避免一些bug，而采用统一的行为，就是禁用 iOS 11 自己的内容区域判断...在 viewport 的 meta 属性中，添加 viewport-fit=cover 即可。...当然，这里的padding只是用于匹配iPhone X默认的安全区域的，你可以设置任何值，不过建议要不小于默认的安全区域值。

1.5K8 0

Android P 凹口屏支持，打造全面屏体验

默认情况下，如果开发者在竖屏模式下未对状态栏设定任何特殊标志位，状态栏会根据屏幕缺口情况自行调整高度 (缺口高度 ≤ 状态栏高度)，而应用内容则会显示在状态栏以下区域；在横屏和全屏模式下，系统会在应用窗口四周保留黑边...△ 应用请求在缺口区域进行布局开发者可以调用 Android P 中的相关 API，判断设备是否具有凹口屏，然后在获取缺口的位置信息，并管理内容在缺口区域的布局。...您可以利用全新的窗口布局属性 layoutInDisplayCutoutMode 管理应用在凹口屏幕上的布局显示。...如果您希望利用到整个显示区域，而且不介意缺口位置无法显示应用内容，SHORT_EDGES 模式是个不错的选择，在该模式下，系统始终允许应用窗口延伸至缺口区域。...8.1 (API 27) 的设备上，您也可以在缺口区域对应用内容进行布局。

2.1K2 0

H5 页面 iPhoneX 刘海屏适配

但是为了比较，我这里给出一张苹果官方文档中，iPhone8之前的常规屏幕和刘海屏 Safe Area 区域的对比图。 ?...2、H5 页面在 iOS 中占据全屏页面，在这种情况下，除了要兼顾底部小黑条，我们还要处理页面上部跟状态栏接触的部分，避免内容出现在状态栏上。...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。...完美的显示在了 Safe Area 的区域中。...这里要注意的是，实测时，对于 iPhone XR 我用在 stackoverflow 上找到的 media query 条件来判断不生效，后来经过查找资料，我找到一个在 iPhone XR 上实际可用的条件

5.2K4 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭