将UIBarButton项目的点击区域延伸到屏幕边缘 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

背景材料延伸到显示器的边缘，并且UI元件被适当地插入和定位。...确保背景延伸到显示器的边缘，并且垂直可滚动的布局（如表格和集合）一直延续到底部。插入必要内容以防止剪辑。...避免将交互式控件明确放置在屏幕底部和角落。人们使用显示屏底部的滑动手势访问主屏幕和应用程序切换器，这些手势可能会取消您在此区域中实现的自定义手势。屏幕的两个角落可能是困难的地方让人们舒适地到达。...当启用自动隐藏时，如果用户没有触摸屏幕几秒钟，指示灯将熄灭。当用户再次触摸屏幕时，它会重新出现。这种行为应该只能用于被动观看体验，如播放视频或照片幻灯片。请参阅适应性和布局。...手势 iPhone X上的显示屏使用屏幕边缘手势来访问主屏幕，应用程序切换器，通知中心和控制中心。避免干扰系统范围的屏幕边缘手势。人们依靠这些手势在每个应用程序中工作。

3.6K5 0

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

iPhone X iPhone X 拥有一个宽大的而且高分辨率的屏幕，从外观看是圆角的，并且扩展到屏幕的边缘。这提供了前所未有的沉浸式体验，可以使我们体验更加丰富的内容。 ?...背景材料可以延伸到屏幕的边缘，而且 UI 元件也能够被适当地插入和定位。 ? ? 如果你的的应用程序具有自定义布局，那么支持 iPhone X 也应该比较容易。...要确保背景延伸到屏幕的边缘，并且垂直可滚动的布局（例如表格或集合）能够一直延续到底部。 ? 插入必要内容以防止裁剪。...避免将交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换，这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。...手势 iPhone X 支持使用屏幕边缘手势来访问主屏幕、应用程序切换器、通知中心与控制中心。避免使用干扰系统功能的屏幕边缘手势。人们可以在每个应用程序中使用这些手势。

2.8K2 0

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

是的

没有找到

Simple Control:无需Root为设备添加导航栏

相反，向屏幕边缘方向滑动即可隐藏导航栏。应用还支持自定义呼出区域，使用者可定义屏幕左/下/右三个边缘的呼出区域，并且呼出区域的长度/宽度/位置可调。...(呼出区域就是屏幕边缘的粉色区域，仅在此应用设置界面才会显示，在其他状态下你是看不到屏幕边缘有粉色区域的存在的~) 　　Simple Control支持修改导航栏背景颜色/图标颜色/透明度，导航栏长度/...应用还支持自动隐藏导航栏特性，可设置点击导航栏按钮后延时自动隐藏和点击导航栏外部自动隐藏两种方式(自动隐藏和透明度可调这两个功能很贴心，因为导航栏会覆盖到屏幕边缘的内容嘛)。　　...Simple Control还支持悬浮按钮触发方式(悬浮按钮在屏幕右边缘中间)，当使用者点击停靠在屏幕边缘的悬浮按钮时会以悬浮按钮为参考位置，展开横向或者纵向导航栏，方便使用者灵活控制导航栏出现位置。...(这个特性可以说是见仁见智了，有些情况挺有用，比如屏幕摔坏了，有一部分不能点击的情况下，但是小苏觉得，一般情况下用不到这个功能吧~) 　　总的来说这款应用的设置项已经非常详尽了，可以兼顾使用者各种苛刻的要求

1.5K2 0

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

用与容器相同长度的dividers将组分开；不要将每个目的地都分开 ---- Header（标题） Navigation drawer 的 header 区域是一个灵活的空间，可用于品牌表达（如 app...如果优先考虑进行帐户切换，则可以将帐户切换器放置在导航抽屉的 header 区域 ?...Modal drawers 可以通过以下方式被关闭： ·选择一个 drawer 项目 ·点击遮罩 ·朝 drawer 的锚定边缘滑动（例如，从右向左滑动从左边出现的 navigation drawer）...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边缘的 modal drawers。...·如果抽屉内容低于屏幕高度的50％，则 drawer 全部打开 ·如果 drawer 内容大于屏幕高度的50％，请先将其打开至50％，然后允许用户将 drawer 向上拖动至其全高或屏幕高度（以先到者为准

5.3K4 0

Android 15新特性，强制edge-to-edge全面屏体验

其实简单来讲，就是让App的界面延伸到手机屏幕的全部空间，这样可以带来更加沉浸式的用户体验。事实上，绝大多数的App都没有将界面延伸到手机屏幕的全部空间，因此它们本可以提供更好的用户体验。...https://github.com/guolindev/Edge2EdgeTest 需要注意的是，一开始我将项目的targetSdkVersion指定的是34，也就是默认不会强制启用edge-to-edge...从这个效果上我们也可以看出，3按键导航栏在edge-to-edge全面屏体验方面是完全落后的，这种模式后面就会逐渐被Android系统边缘化了。...另外从Android 10开始，Google引入了手势导航，这使得手机屏幕的左右两侧可以用于触发Back键操作，手机屏幕的底部可以用于触发Home键操作，触发区域如下图中的黄色部分所示。...但是由于它影响到的是所有的项目，而每个项目的UI界面复杂度都各不相同，因此具体会对大家带来多少影响可能还得要大家自己去评估了。

3.5K1 1

iPhoneX 适配实践

2、提供全屏用户体验，这里主要是指列表要延展到屏幕底部。 3、避免将可交互控件放在屏幕底部或者屏幕圆角区域，防止视觉遮挡和系统边缘手势冲突。... 4、不要刻意遮挡和和引导屏幕的关键位置，比如用纯黑色的navigationbar和toolbar遮住上下区域，或者用闪亮的背景强调底部指示器区域。...上图为官方标准的黑色背景，注意不是纯黑色的，还能分辨传感器区域三、SafeArea安全区域安全区域是指在屏幕顶部和底部区域之间能正常显示内容的区域。...3、TableView布局如果底部区域不存在可交互的固定组件，那么tableView需要延伸到屏幕底部。...4、横屏交互适配主要涉及到视频播放的边缘交互按钮。内容内容只需放置在SafeArea之内。同样底部如果没有固定可交互组件也要延伸到屏幕底部。

4.6K4 1

iPhone X的UI设计技巧

因此，您最好将背景扩展到显示屏的边缘(包括状态栏)，以及垂直可滚动的区域。...建议将导航栏的颜色延伸到状态栏的背景，否则看起来会很奇怪，并且App在试图将它与传感器外壳进行手动混合时可能会遇到一些奇怪的情况。用户界面的“全屏”体验是非常重要的，让用户不再受屏幕边缘的干扰。...以下是苹果为设计师定义安全区域的方式。（如下图示） ? 如果您的App应用平台标准组件和自动布局，您的用户界面也应适当地缩放以适应iPhone X屏幕。 ? PS:只能隐藏状态栏以换取附加值。...在iPhone X的内容被显示在一个小于4.5英寸设备上的情况下，该设计甚至可以把多余的屏幕留白（图中两边垂直的白边）收起来。为了交付这样的好图像，为不同的长宽比创建独立的屏幕适配也是值得的。 ?...如此高的像素密度意味着切图将需要以@3x而不是@ 2x的资源输出。最好使用Display P3 颜色空间（而不是sRGB）为iPhone X创建UI界面。

1.6K4 0

iOS OC swift 自定义 popover 泡泡

.+ 开头首先先看效果： popover.gif 灰色区域底层视图棕色 popover 泡泡不能超出的区域，popover 是不能超出屏幕或者离屏幕太近，否则效果不好。...棕色区域是可以设置的红色底层箭头视图的边框白色底层箭头视图的背景颜色蓝色自定义内容区域，在此区域（contentView）可以添加希望展示的内容加号按钮模拟了 sourceView...touchThrough: Bool /// 点击穿透 /// 设置为 true 点击空白地方，穿透点击 touchDismiss: Bool /// 是否点击空白地方自动消失 /// 设置为 true...arrowDirection 设置为 any（按照此顺序查找合适的方向，如果查找不到，则按照最合适(智能)的方向） /// 相当于增加了方向的优先级 minScreenEdg: CGFloat = 10 /// 到屏幕边缘的最小距离...perferArrowDirection 时，查找 perferArrowDirection 内部合适的方向使用 open class KKPopoverArrowView: UIView 箭头视图的配置项

3.4K7 0

从混合云到分布式云（下篇）

图3 AWS区域和可用区 2、AWS Region 延伸到非中心城市 - 本地区域 Local Zone 本质上来讲，每个AWS Local Zone 都是一个特定AWS Region向更靠近用户方向上的延伸...图4 AWS 本地区域 3、AWS Region 延伸到5G网络 - Wavelength Zone AWS Wavelength Zone的性质类似于Local Zone，本质上都是一个AWS Region...这就避免了因应用程序流量遍历互联网中的多个跃点才能达到其目的地而导致的延迟，从而使客户能够充分利用现代 5G 网络提供的低延迟和带宽优势。...）：Amazon CloudFront 是一项加快将静态和动态 Web 内容（例如 .html、.css、.js 和图像文件）分发给用户的速度的 Web 服务。...一种是将Amazon EKS Cluster部署在父区域，在Outposts 中部署自管理的节点组（self-managed node groups）。

1.8K5 0

为安卓Chrome加入自定义手势控制

移除完成后，点击右下角的"+"按钮进入手势添加界面，比如我们要添加一个从屏幕左边缘右划返回上一页面的手势，可以如下设置: 　　手势选择:右划　　触点个数:1 　　起始区域:左侧边缘　　操作:无　　...单个应用操作:Chrome - 操作 - 浏览 - 返回　　高级选项:将"离开屏幕后识别"打勾 ? 　　...其他选项保持默认，设置完成后，点击右上角的"√"图标即可保存配置。...注意事项: 　　这里需要说明:上文中的"操作"这一项适用于全局，因为我们要设定的"返回"手势只需要对Chrome起作用，所以"操作"这一项我们将其设置为"无"。　　...启用"离开屏幕后识别"这一项可以防止GMD手势将我们对屏幕的正常操作"误判"为手势触发条件，如果禁用这一项，GMD手势会检测到用户在屏幕上操作的趋势，当趋势满足某手势触发条件时，GMD手势便相应预先设定好的响应动作

4.5K3 0

【软件开发规范七】《Android UI设计规范》

通过这个动画，将点击的位置与所操作的元素关联起来，体现了 Material Design 动画的功能性。 ** 转场效果 ** 通过过渡动画，表达界面之间的空间与层级关系，并且跨界面传递信息。 ...2.8 布局所有可操作元素最小点击区域尺寸：48dp X 48dp。栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。...编辑菜单原地展开，盖住当前选项，当前选项应该成为菜单的第一项。编辑菜单的当前选项，始终与当前选项水平对齐。编辑编辑靠近屏幕边缘时，位置可适当错开。 ...编辑简单一根横线就能代表输入框，可以带图标编辑激活状态和错误状态，横线的宽度变为2dp，颜色改变输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。 ...编辑编辑输入框提示文字，可以在输入内容后，缩小停留在输入框左上角编辑整个点击区域增高，提示文字也是点击区域的一部分编辑通栏输入框是没有横线的，这种情况下通常有分隔线将输入框隔开

8.6K2 0

【HarmonyOS Next】原生沉浸式界面

背景在实际项目中，为了软件使用整体色调看起来统一，一般顶部和底部的颜色需要铺满整个手机屏幕。因此，这篇帖子是介绍设置的方法，也是应用沉浸式效果。...如下图：底部的绿色延伸到上面的状态栏和下面的导航栏UI在鸿蒙应用中，全屏UI元素分为状态栏、应用界面和导航栏。...一般实现应用沉浸式效果由两种方式：窗口全屏布局方案：调整布局系统为全屏布局，界面元素延伸到状态栏和导航条区域实现沉浸式效果。组件延伸方案：组件布局在应用界面区域，通过接口方法延伸到状态栏和导航栏。...SafeAreaType枚举类型，SYSTEM是系统默认非安全区域，包括状态栏、导航栏；CUTOUT是设备的非安全区域，例如刘海屏或挖孔屏区域；KEYBOARD是软键盘区域，组件不避让键盘。...startMargin: 20, endMargin: 20 }) // 每行之间的分界线 .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为

5191 0

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

在2016年的时候，小米推出了MIX一代手机，将屏幕做到了接近18:9的比例，并首次提出了全面屏的概念。...和小米MIX的做法不同，iPhone X采用了将屏幕切出一个凹口的方式来放置前置摄像头以及其他传感器硬件，因此形成了一种非标准矩形屏幕。由于切出的凹口很像人的刘海，又被大家戏称为刘海屏。 ?...这种属性允许应用程序的内容在竖屏模式下自动延伸到刘海区域，而在横屏模式下则不会延伸到刘海区域。...这个时候，手机的刘海区域会整个变成一条大黑边，应用程序的内容是不允许延伸到这部分区域里的，这样也不会产生内容被遮挡的情况。...可以看到，程序进入了全屏沉浸式体验的效果，并且我们在布局文件中设置的背景图是可以延伸到刘海区域的，这就使得手机屏幕的空间得到了更充分的利用。现在旋转一下手机屏幕，效果如下图所示： ?

1.3K1 0

HarmonyOS NEXT实战：窗口沉浸式效果

在移动端应用中，全屏窗口元素包括状态栏、应用界面和导航栏（如下图），沉浸式页面开发常通过将应用页面延伸到状态栏和导航栏的方式，来达到以下目的：使页面和避让区域的色调统一，为用户提供更好的视觉体验。...最大程度利用屏幕可视区域，使页面获得更大的布局空间。提供完全沉浸的体验，让用户沉浸其中，不被其他事物所干扰。...实现沉浸式效果的两种方案方案一：设置窗口全屏模式方案二：扩展组件安全区域推荐使用方案一，好处是可以针对整个应用（所有页面）实现沉浸式效果。...从API version 14开始，该接口在2in1设备或平板设备的自由多窗模式（可点击设备控制中心中的自由多窗按钮开启）下调用不生效。...沉浸式布局生效时，布局不避让状态栏与底部导航区域，组件可能产生与其重叠的情况。非沉浸式布局生效时，布局避让状态栏与底部导航区域，组件不会与其重叠。

2691 0

Material Design — 菜单（Menus）

可以内部滚动的菜单级联菜单（仅限pc）级联菜单可根据菜单与屏幕垂直和水平边缘的接近程度放置菜单。 ?...将菜单放置在触发菜单元素的下方会将其与上下文环境分开（如下图）。 ? 关闭菜单可以通过点击菜单外部或点击触发菜单的元素（如果可见）来关闭菜单。选择一个菜单项后也应该关闭菜单。...垂直对齐靠近屏幕边缘时，简单菜单将垂直重新对齐，以使所有菜单项完全可见。...·但在靠近屏幕边缘时，简单菜单会重新定位其垂直对齐方式，以便所有菜单项都完全可见。 ? ·简单菜单也应该应该显示在其触发元素上，而不是下面（如下图）。 ?...这确保了可点击简单菜单之外的区域来关闭菜单。 ·不在菜单中重复展示已选项（同Menus）。 ·简单的菜单总是与列表项文本的开头左对齐，并且不会基于点击位置重新水平定位（如下图）。 ?

8K10 0

AJP：大脑功能连接的内在模式在调节重度抑郁患者抗抑郁治疗反应中的作用

本研究的目的是确定大脑各区域之间的静息态连接模式是否能预测抗抑郁药物(舍曲林)与安慰剂的疗效差异。...17项条目的加和作为总分，总分越高表示抑郁症状越重。 MRI数据采集用3-T核磁系统进行MRI扫描。T1结构和静息态功能磁共振成像(rsfMRI)数据在同一扫描时段获得。...为便于观察，将杏仁核与边缘网络归于一组，将腹侧纹状体与它们各自的代表性网络分别归为一组。海马和丘脑不归于任何皮质网络。...网络间调节变量分布最多的区域在海马和LN（边缘网络）；海马和SMN；LN和丘脑；海马和ECN；丘脑和VN。大多数网络内调节变量(18/26)都在DMN中。...DAN=背侧注意网络;DMN=默认网络;ECN =执行控制网络;HAM-D =汉密尔顿抑郁量表(17项);HIPPO=海马;LN =边缘网络;SMN=感觉运动网络;SN =突显网络;THAL=丘脑;VN

1.8K2 0

案例| 腾讯WeMake工业互联网平台的边缘容器化实践：打造更高效的工业互联网

边缘计算将计算、网络、存储、带宽等能力从云延伸到网络边缘的新型架构模式，其能效友好、带宽充足、延迟低等特性很好地补充了集中化计算模式遇到的问题。...TKE Edge架构图 TKE Edge的核心组件已开源到SuperEdge项目： https://github.com/superedge/superedge 点击链接了解项目详情 ? ...通过使用TKE Edge，将平台数据落到客户机房，就近落地，实现了将客户数据本地化落地和低时延等需求。...在云边断连的情况下，利用这些缓存对Kubernetes组件和业务容器提供服务，达到边缘自治的目的。...02 边缘场景下的镜像加速在WeMake工业互联网平台的边缘计算场景下，大量的容器副本和超GB级别的容器需要被分发到不同区域的边缘节点当中，会耗费大量的时间及公网的流量。

2.5K2 0

二维布局：Grid Layout

值： start - 将其与单元格上边缘对齐 end - 将其与单元格下边缘对齐 center - 将其与单元格中间对齐 stretch - 竖向延伸到整个单元格 .container { align-items...值： start - 将网格与网格容器的起始边缘齐平 end - 将网格与网格容器的结束边缘齐平 center - 将网格与网格容器的中间齐平 stretch - 调整网格项的大小以允许网格填充网格容器的整个宽度...值： start - 将网格对齐在网格容器的上起始边缘线 end - 将网格对齐在网格容器的下边缘线 center - 将网格对齐在网格容器的中心 stretch - 讲网格拉伸充满整个网格容器 space-around...值： start - 将网格项对齐以与单元格的起始边缘齐平 end - 将网格项对齐以与单元格的结束边缘齐平 center - 对齐单元格中心的网格项 stretch - 填充整个单元格的宽度 .item...值： start - 将网格项与单元格的上边缘齐平 end - 将网格项与单元格的下边缘齐平 center - 将网格项与单元格的中心对齐 stretch - 填充整个单元格的高度 .item {

5.3K2 0

大屏时代的生态变迁，看平板手机的拇指热键与界面布局

但是，鉴于平板手机巨大的屏幕尺寸，单手状态下又难以触及屏幕顶部区域，所以权衡下来，将一部分控件移到底部的做法还是合理的，哪怕要冒一定的风险，也至少可以让人们在单手操作的时候能够轻松点击。...从这个角度讲，将导航菜单放置在主要内容的下方，让用户在最需要的时候能够用到，也是非常合理的做法，同时不会使拇指受苦。避免手指跨屏操作。多数人的拇指长度不够在平板手机上进行横跨屏幕的点击。...在单手持机的情况下，不用说对角线，即便让右手拇指去点击位于屏幕左端的元素也是相当困难的。所以，要尽量避免将重要的交互元素紧贴左右两侧边缘放置。...与系统提供的上下移动界面的方式不同，在App或网页内部，一种更具实践性的做法是在界面边缘放置某种“抽屉把手”，形如按钮或Tab，点击之后即可展开整个面板。 ?...TIME在其移动版页面侧边放置了一个“抽屉把手”，点击之后会展开一个完整的近期新闻面板。在屏幕左右边缘放置的交互元素很可能处于平板手机的拇指热区之外，但无论怎样也比放置在顶部更加容易操作。

3.2K1 0

点击加载更多

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

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

Simple Control:无需Root为设备添加导航栏

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

Android 15新特性，强制edge-to-edge全面屏体验

iPhoneX 适配实践

iPhone X的UI设计技巧

iOS OC swift 自定义 popover 泡泡

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

从混合云到分布式云（下篇）

为安卓Chrome加入自定义手势控制

【软件开发规范七】《Android UI设计规范》

【HarmonyOS Next】原生沉浸式界面

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

HarmonyOS NEXT实战：窗口沉浸式效果

Material Design — 菜单（Menus）

AJP：大脑功能连接的内在模式在调节重度抑郁患者抗抑郁治疗反应中的作用

案例| 腾讯WeMake工业互联网平台的边缘容器化实践：打造更高效的工业互联网

二维布局：Grid Layout

大屏时代的生态变迁，看平板手机的拇指热键与界面布局

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐