文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

请参阅图像大小和分辨率和自定义图标。 布局 在设计iPhone X时，您必须确保布局填满屏幕，并且不会被设备的圆角，传感器外壳或用于访问主屏幕的指示灯遮蔽。...如果您的应用假定固定状态栏的高度用于将内容定位在状态栏的下方，则必须更新您的应用，才能根据用户的设备动态定位内容。...同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上，确保重要的视觉内容保持在两种显示尺寸上。 避免将交互式控件明确放置在屏幕底部和角落。...人们使用显示屏底部的滑动手势访问主屏幕和应用程序切换器，这些手势可能会取消您在此区域中实现的自定义手势。屏幕的两个角落可能是困难的地方让人们舒适地到达。 不要掩盖或特别注意关键显示功能。...请勿尝试隐藏设备的圆角，传感器外壳或通过在屏幕顶部和底部放置黑色条来访问主屏幕的指示器。不要使用像括号，边框，形状或教学文字等视觉装饰，也要特别注意这些区域。 允许自动隐藏指示灯，以便轻松访问主屏幕。

2.5K50

vivo悟空活动中台-基于行为预设的动态布局方案

，初步满足了“满屏”的需求，但是仍然存在不足： 不够灵活 固定定位的问题在于元素始终是以自己的某条边相对于视口的对应边框进行定位（如：只能是元素顶部相对于窗口顶部位置固定，而不能实现元素底部相对于窗口顶部位置固定的需求...锚点的设置可以让元素的定位更加灵活：如果将元素的锚点设置为其底边的中点，那么令锚点吸附视口顶部即可实现元素底部相对视口顶部距离固定，这是常规固定定位无法实现的。...3.2、吸附性 不同视口内，页面元素的 锚点 相对于视口的某一个边的位置是定值，称该元素 吸附 于该条边，视吸附的边的不同，可以分为 吸顶 、 吸底 、 靠左 和 靠右； 对于某个元素，若其在水平或竖直方向并...，即 不同视口中，元素的 高度的一半 与 元素底部到到屏幕底部 的距离的 和 是不变的。...，即 不同视口中，元素 高度的一半加上元素顶部到屏幕顶部的距离的和 的值，与元素 高度的一半加上元素底部到屏幕底部的距离的和 的值，这两个值 相等。

2.1K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

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

    例如：无论可用的屏幕空间多大，你都可以约束一个按钮，使其始终水平居中并定位在距离图像下方8pt的位置。 当检测到某些环境变化（称为特征）时，自动布局会根据指定的约束自动调整布局。...将控件放在屏幕的顶部和底部时，请使用匹配的插图，并在“Home”指示器周围留出足够的空间，以便人们在尝试与控件进行交互时不会意外地将其作为目标。...由于“Home”指示器仍在屏幕上居中，因此它相对于应用程序界面的位置可能会发生变化。 插入全角按钮。延伸到屏幕边缘的按钮可能看起来不像按钮。遵守全角按钮两侧的标准UIKit边距。...屏幕底部出现一个全角按钮时，如果该按钮具有圆角并与安全区域的底部对齐，则该按钮最佳，这也确保了它与“Home”指示器不冲突。 ? 对于关键的显示功能，不要掩盖或特殊强调。...全屏iPhone型号的状态栏比其他型号高。如果你的APP采用固定的状态栏高度将内容定位在状态栏下方，则必须更新APP以便于根据用户的设备来动态的定位内容。

    8.1K30

    未来布局之星——ConstraintLayout

    Button控件约束 如将按钮下边圆圈拖至ConstraintLayout底部，则按钮移动至底部；再将按钮上边圆圈拖动至ConstraintLayout顶部，垂直方向上有两个约束的按钮控件就会实现垂直居中...如下图所示，在调整按钮宽度后，将两个按钮的左右两边添加约束，然后将下方按钮的上边与上方按钮的下边添加约束，拖动下方的按钮，可设置两个按钮之间的外边距。 ?...此时ConstraintLayout展现了其强大的优势，通过其特性优雅地完成需求。 ?...如下图所示，单击打开工具栏中Autoconnect功能按钮，将控件拖至屏幕中心，然后约束就会自动添加了，这个相信使用过墨刀设计过APP原型的读者们会感到很熟悉。 ?...Inference是手动添加约束后，对当前界面所有控件的位置关系添加整体约束关系，感觉和Photoshop里面不同布局中的图像调整好位置后合并可见图层很像。Inference操作如下图所示： ?

    1.9K20

    绝对定位bottom值为0的位置问题

    有一个position值为absolute的div，他的祖先元素里没有任何定位属性，或者他的父元素就是body。 当这个div的bottom值为0的时候，他应该被定位到哪个位置？...现在条件稍微修改一下，给body和html一个height的值，给大一些，就10000px吧。 现在这个div的位置应该在哪？...就像下面的代码，这个div依然被定位在了屏幕的底部，和fixed值“一样”的表现。只不过这个“一样”是暂时的，拖动滚动条就露底了，div滚动了上去，死死的定位在了第一屏底部的位置。 的元素bottom为0的时候会定位到屏幕底部。但是细问原理的时候都没能讲出来。 为什么他没有定位到文档的最底部？...传送门 这一条刚入门的时候就知道，绝对定位的元素相对于他的包含块位移。现在的问题是div的包含块是谁，于是我继续去扒包含块。

    2.2K60

    【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

    一、固定定位概念语法 ---- 固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中的位置 , 漂浮在任何元素上方...; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位 与 滚动条滚动没有任何关系 ;...固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 的 本质是一种 特殊的绝对定位 ;...固定定位语法 : 选择器 { position: fixed; left: 0px; top: 0px; } 固定定位元素举例说明 : 在下面的网站 , 顶部的导航栏 , 与 右侧的 三个按钮 ,...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码的基础上 , 将中心的标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;

    1.8K20

    手把手教你使用Pygame制作飞机大战小游戏，4万字超详细讲解！

    # 绘制飞船 spaceship.blitme() # 将完整显示Surface更新到屏幕 pygame.display.flip() 注意其顺序 现在这个好看的小飞船已经出现在了屏幕的左上角...我们的游戏的屏幕宽度在settings.py中的screen.width存储，但需要在屏幕两遍都留下一定的边距，把它设置为小飞船的宽度。...) 还需要在飞船之间留有一定的宽度，即飞船宽度。...，仅仅是将其重新放回中间 检测飞船到达屏幕底部 将创建一个新的函数来完成这项任务，名为check_spaceship_bottom() def check_spaceship_bottom(setting...想要退出的话在else子句中调用sys.exit()即可 完善项目 现在这个小游戏的基本雏形已经出来了，但是还称不上一个完整的游戏，现在为其增加一个开始按钮，用于启动游戏和结束游戏；随着游戏时间的增长游戏难度也将进行增长

    6.1K10

    手把手教你使用Pygame制作飞机大战小游戏，4万字超详细讲解！

    # 绘制飞船 spaceship.blitme() # 将完整显示Surface更新到屏幕 pygame.display.flip() 注意其顺序 现在这个好看的小飞船已经出现在了屏幕的左上角...我们的游戏的屏幕宽度在settings.py中的screen.width存储，但需要在屏幕两遍都留下一定的边距，把它设置为小飞船的宽度。...) 还需要在飞船之间留有一定的宽度，即飞船宽度。...，仅仅是将其重新放回中间 检测飞船到达屏幕底部 将创建一个新的函数来完成这项任务，名为check_spaceship_bottom() def check_spaceship_bottom(setting...想要退出的话在else子句中调用sys.exit()即可 完善项目 现在这个小游戏的基本雏形已经出来了，但是还称不上一个完整的游戏，现在为其增加一个开始按钮，用于启动游戏和结束游戏；随着游戏时间的增长游戏难度也将进行增长

    12K30

    CSS背景定位属性——background-position

    /images/bg.jpg') no-repeat center; } 最后的那个center其实就是background-position值，就是告诉浏览器我这个背景图片要定位在元素box的中间位置...偏移值 上面这些貌似挺好用，但是却还不够灵活，包括下面即将讲到的长度值和百分值也同样不够灵活（都是相对左侧或顶部定位），如果我想要距离右侧和底部定位且还需有一定距离该怎么办呢？...例如，你想要让背景图定位在距左边10px、距顶边20px的位置，就可以这么写： background-position: 10px 20px; 2....单个值 这个其实跟上面讲关键字时的单个取值基本是一样的，都是将第二个值默认设置为center，唯一区别就是这个center只能放在这个长度值后面，也就是在纵轴方向居中。...如果是长度值的话，那么背景图是拿其左上角来相对盒子的左上角进行定位，但百分数值不是，它是拿其自身的(10%,50%)这个位置的点来相对盒子的左上角进行定位，上面这个例子的效果其实和下面这个效果是一样的。

    2K20

    安卓Chrome使用技巧合辑

    Version)" 写在前面: 　　Android端的Chrome相对于我们熟知的国产浏览器而言，看起来似乎不那么"易用"，但是Chrome作为"大公司"的"大产品"，在提升用户体验这一点上还是下了很多功夫的...同时，这一特性也适用于菜单项上方的导航按钮，因为Chrome的菜单键和菜单弹出后的"刷新按钮"位置是重合的，所以按住菜单按钮后保持一秒左右再松开，可以进行刷新网页的操作。 　　2....双击屏幕，在第二次点击屏幕时按住屏幕不放，以双击屏幕的位置定为原点，把手指向三象限或者四象限方向滑动，即可以原点为中心，快速放大页面，如果想要缩小页面，只需要双击屏幕，在第二次点击屏幕时把手指向一象限或者二象限方向滑动...底栏模式(Chrome Home): 　　chrome://flags/#enable-chrome-home 　　启用Chrome Home模式后，默认位于屏幕顶部的地址操作栏将会移至屏幕底部...，将在屏幕底部显示一个快速填充底栏，点击底栏中的快速填充项可以快速将此项填充到输入框。

    9.6K30

    基于Python的飞机大战复现

    self.rect = self.image.get_rect(center=(screen_width/2, screen_height - 50))：获取飞机图像的矩形区域，并设置飞机的初始位置在屏幕底部中央...self.rect = self.image.get_rect(center=(random.randint(0, screen_width), -50))：随机设置敌机的初始位置在屏幕上方的随机水平位置...if self.rect.y > screen_height: self.kill()：当敌机移出屏幕底部时，从精灵组中移除敌机。...(self.text_rect.get_width() / 2), self.y + (self.height / 2) - (self.text_rect.get_height() / 2)))：将按钮文本绘制在按钮矩形的中心位置...优化碰撞检测算法：目前的碰撞检测可能存在一定的性能开销，可以考虑使用更高效的碰撞检测算法，如基于空间划分（如四叉树）的算法，提高游戏性能。

    8510

    CSS | 视差滚动 | 笔记

    background-attachment： 决定 背景图像的位置 是在 视口内固定 ，或者 随着包含它的区块滚动 。 它的属性值的含义如下： 属性值 含义 fixed 背景相对于视口固定。...结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。 如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏， 因此屏幕底部被切断。...在上图中，应该在屏幕底部的按钮被隐藏了。 更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部， 因此用户体验是很糟糕的。...因此 50% 的值表示水平或垂直居中背景图像，因为图像的 50% 将位于容器的 50% 标记处。...类似的，background-position: 25% 75% 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。

    81521

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    - 普通流 / 浮动 / 定位 CSS 三大盒子布局方式 : 普通流 : 又称为 标准流 , 盒子按照从上到下的顺序进行排列 ; 浮动 : 另多个盒子水平排成一列 ; 定位 : 将盒子定位在某个位置...; 在 使用 定位 时 , 几乎不适用 静态定位 ; 6、相对定位 相对定位 是 盒子模型 相对于 其在 标准流中的位置 设置的 ; 如 : 盒子模型 在标准流 中 , 原来的位置是 (0 , 0)...相对定位 ; 子元素使用 绝对定位 , 在布局中不会保留其位置 , 子元素完全依赖 父容器 的位置 , 此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素...这时父元素建议使用相对定位 , 这样能保证页面的稳定性 ; 父级元素 需要 占位 , 必须使用 相对定位 ; 子元素 需要 任意摆放 , 必须使用绝对定位 ; 9、固定定位概念语法 固定定位 是 固定在屏幕中的某个位置...: 0px; top: 0px; } 固定定位元素举例说明 : 在下面的网站 , 顶部的导航栏 , 与 右侧的 三个按钮 , 就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素的位置 ;

    35710

    运维：推荐一款开源免费的多显示器管理工具Dual Monitor Tools

    在自由模式下，光标可无障碍移动；粘滞模式下，光标在屏幕间移动会有阻力；锁定模式则将光标固定在单一屏幕上。此外，用户可通过热键或鼠标按钮临时解除模式限制，使光标自由移动。...2.3 Launcher - 启动器 Launcher是一款通过快捷键快速启动应用程序并将其定位在多显示器预设位置的实用工具。用户可为每个应用设置“魔法词”并定义多达四个启动位置。...DMT内的一个模块，可以设置几个按键启动你平常使用频率较高的软件，并将它们定位在任何一个显示器的预配置位置。还可以设置经常访问的网站，方便快速启动。...此外，工具还支持最小化、最大化及恢复窗口，以及将窗口扩展至覆盖所有屏幕。特别的是，用户可以交换两个活动窗口的位置，或将窗口精确捕捉至屏幕的特定区域（如半屏）。...屏幕快照显示：在副屏幕上显示主屏幕的快照。 快速启动应用：使用关键词快速启动应用程序。 屏幕分割：将显示器划分为多个区域，便于多任务操作。

    14230

    Material Design — 按钮（ Buttons）

    Button 按钮能传达用户触摸它们时发生的操作。 Buttons被按时被触发墨水扩散效果。 他们可能会显示文字，图像或两者都有。 平面按钮和浮动按钮是最常用的类型。...其他按钮类型包括： ·底部固定按钮（Persistent footer buttons）是可用于屏幕底部或提示框的平面按钮。 ·下拉按钮（Dropdown buttons）显示多个选择。...推荐的按钮放置 标准提示框 屏幕上的按钮对齐方式：右边 将肯定性按钮放在右侧，否定性的放在左边。 表单 屏幕上的按钮对齐：左边 将肯定性按钮放在左侧，否定性的放在右边。...卡片 按钮最好放在卡的左侧以增加其可见度。 但是，由于卡片具有灵活的布局，因此可以将按钮放置在适合内容和上下文的位置，同时保持产品内的一致性。...可以在以下位置使用扁平按钮： ·在 toolbars上 ·在提示框中，将按钮操作与对话框内容统一起来 ·Inline, with padding，因此用户可以轻松找到它们 ?

    3.9K160

    iOS OC swift 自定义 popover 泡泡

    棕色区域是可以设置的 红色 底层箭头视图的边框 白色 底层箭头视图的背景颜色 蓝色 自定义内容区域，在此区域（contentView）可以添加希望展示的内容 加号按钮 模拟了 sourceView...所在的位置。...可以看到当 sourceView（加号按钮） 在不同地方的时候，popover 自动更改方向、调整箭头方向、位置以适应不同的 sourceView 类说明 open class KKPopover: UIView...防止内容覆盖圆角 targetSize: CGSize /// 需要展示内容的大小，此字段一定需要重新设置 /// 并且宽高大小加上 minScreenEdg contentInset 不能大于屏幕宽高...CGSize) -> UIPopoverArrowDirection /// sourceRect： sourceView 相对于 self (KKPopover) 的位置 /// size：self

    2.7K70

    圣诞快乐，手绘CSS圣诞老人，DIY浪漫圣诞礼物！

    通过这种方式，我们可以确保无论脸部大小或位置如何变化，眼睛和脸颊都能保持在正确的位置。 响应式设计： 在CSS中使用相对单位（如%）确保我们的绘制可以在不同尺寸的屏幕上保持响应性。...尽管在原始版本中，眼睛和脸颊的位置是相对于整个画布的，但在这个版本中，我们将它们放置在脸部内部，这样做可以更容易地进行管理。...使用伪元素的好处在于它们的大小和位置将相对于帽子元素，这意味着我们只需修改帽子元素，就可以同时更新所有三个部分。...然后我们就得到了那个弯曲的底部。为了让它更适合头部，我们可能需要对其进行一点旋转。...腰带的绘制略微复杂：它是一个圆形（径向）渐变，我们必须玩转这些值以确保它精确地定位在我们想要的位置。

    19110

    例说 Constraint Layout：初探

    简单粗暴地说，就是你可以在任意位置，相对于任意东西，放置任意 View。这只是 CL 增加的能力中很小的一部分，却增加了不少灵活性和可控性。而更难得的是，这是在性能提升的同时做到的！ 3....当一个 View 的可见性被设置为 GONE时，相对于它的那些 View 仍能保持在正确的位置上，也能根据情况重新布局（详见续作《例说（二）》）。 5....安装完成后，打开一个布局 XML 文件，将编辑器窗口底部的标签页从 Text 切换到 Design，既可以从传统的 XML 编辑模式切换为可视化操作模式。...自动转换后的顶部栏 可以看到，第二个按钮的位置莫名地跑到了最右边（被第五个遮挡了），而且这时候如果我们关注一下组件树（Component Tree）的话，可以发现这个转换后的约束布局，第五个按钮还是存在嵌套结构...3.2.2 所见不一定即所得 如果我们使用可视化工具，通过拖曳 & 释放将一个控件添加到 RelativeLayout 中，它相对其它元素的位置关系会自动被推断并应用上，App 运行起来后呈现的效果就我们在编辑器中看到的样子

    2.1K10

    最新iOS设计规范九｜10大系统能力（System Capabilities)

    例如，博物馆指南应用程序可以请求允许使用定位服务来确定某人所在的博物馆部分，然后仅查找显示在该区域中的图像。 限制需要精确位置的参考图像的数量。更新参考图像的位置需要更多资源。...启用重新本地化后，ARKit会尝试使用新信息将这些虚拟对象还原到其原始的实际位置。 考虑使用系统提供的教练视图来帮助人们重新定位。...如果人们没有将设备放置在靠近中断之前的位置或将其定位在附近，那么重新定位将无限期地继续，而不会成功。如果指导人们恢复其会话不成功，请考虑提供一个重置按钮或其他方法来重新启动AR体验。...例如： 将应用程序的Dock图标拖到屏幕的一侧，以选择其当前窗口之一或创建一个新窗口 将一个对象拖到屏幕的一侧，然后将其拖放到系统提供的放置目标上 触摸并按住主屏幕或Dock上的应用程序图标，在出现的上下文菜单中点击...在未锁定的设备上，向上滑动通知或让其消失将取消该通知，并可能将其从通知中心中删除。 通知还可以包括可自定义的详细信息视图，该视图提供更多信息和最多四个按钮。

    4.3K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券