首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

假定键盘始终显示,放置UI元素的可用高度

是指在移动设备上,当键盘弹出时,界面上可供放置UI元素的有效高度。这个高度取决于键盘的高度和设备屏幕的总高度。

在移动应用开发中,了解键盘的显示状态对于设计和布局界面非常重要。当键盘弹出时,如果界面上的UI元素没有适当调整,可能会导致UI元素被键盘遮挡,影响用户的操作体验。

为了解决这个问题,可以采取以下几种方法:

  1. 自动调整界面布局:在键盘弹出时,动态调整界面布局,使得UI元素不被键盘遮挡。可以通过监听键盘的显示和隐藏事件,根据键盘的高度调整UI元素的位置或大小。
  2. 滚动界面:当键盘弹出时,将焦点所在的UI元素滚动到可见区域,确保用户可以看到正在编辑的内容。可以使用滚动视图控件或者手动计算滚动距离来实现。
  3. 提示用户:在键盘弹出时,给用户提供相关的提示信息,告知他们可以通过手势操作或其他方式关闭键盘,以便查看完整的界面内容。
  4. 调整输入方式:在设计界面时,可以考虑使用更合适的输入方式,如使用下拉选择框、日期选择器等,减少键盘的使用频率,从而避免键盘弹出对界面布局的影响。

腾讯云相关产品和产品介绍链接地址:

腾讯云移动应用开发平台(https://cloud.tencent.com/product/madp) 腾讯云移动推送(https://cloud.tencent.com/product/tpns) 腾讯云移动分析(https://cloud.tencent.com/product/ma) 腾讯云移动测试(https://cloud.tencent.com/product/mta) 腾讯云移动直播(https://cloud.tencent.com/product/mlvb) 腾讯云移动游戏加速(https://cloud.tencent.com/product/ga) 腾讯云移动智能(https://cloud.tencent.com/product/mi) 腾讯云移动推广(https://cloud.tencent.com/product/mas) 腾讯云移动支付(https://cloud.tencent.com/product/mpay) 腾讯云移动安全(https://cloud.tencent.com/product/ms) 腾讯云移动物联网(https://cloud.tencent.com/product/iot) 腾讯云移动存储(https://cloud.tencent.com/product/cos) 腾讯云移动数据库(https://cloud.tencent.com/product/cdb) 腾讯云移动服务器(https://cloud.tencent.com/product/cvm) 腾讯云移动网络(https://cloud.tencent.com/product/vpc) 腾讯云移动域名(https://cloud.tencent.com/product/dns) 腾讯云移动安全加速(https://cloud.tencent.com/product/ddos) 腾讯云移动区块链(https://cloud.tencent.com/product/baas) 腾讯云移动元宇宙(https://cloud.tencent.com/product/mu)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Material Design —卡片(Cards)

左:不同内容与布局的卡片集合    右:不同布局与不同内容层次的卡片集合 ---- 行为 卡片具有恒定宽度和可变高度。最大高度限于平台上可用空间高度,但可以暂时扩大(例如,显示评论)。...卡片不会翻转以显示背面的信息。 支持手势 卡片手势应始终在卡片集合中实施。 支持手势包括: 滑动手势(swipe gesture)可以在每张卡片上使用。限制视图内轻扫手势,使其不会彼此重叠。...对于依赖焦点遍历进行导航(手柄和键盘页面,卡片应具有主要操作或打开包含主要和补充操作新视图。 ? 选择操作 ?...在集合中的卡片中,始终展示操作。 补充操作 使用图标,文本和UI控件(通常放置在卡底部)明确调出卡内补充操作。 除了溢出菜单之外,补充操作限制为两个操作。 ? ?...UI控件 与主内容内联放置UI控件(如滑块)可以修改主内容视图。 例如,可以选择日期滑块,评分内容星星,或选择日期范围分段按钮。 ? ? ? 溢出菜单(可选) 溢出菜单通常放置在卡右上角。

4.3K100

Material Design — 菜单(Menus)

菜单项还可包含: ·图标和提示文本(如下图中展示键盘快捷键); ·如复选标记之类控件(已选择打勾),表明多个已选项目或状态。 菜单排序 带有静态内容菜单应该在菜单顶部放置最常用菜单项。...例如,重做在没有任何可重做操作时被禁用。 剪切和复制在没有选择内容时不可用。 ? 不可用例子 ---- 行为 菜单出现在app内所有其他UI元素之上。 ?...将菜单放置在触发菜单元素下方会将其与上下文环境分开(如下图)。 ? 关闭菜单 可以通过点击菜单外部或点击触发菜单元素(如果可见)来关闭菜单。 选择一个菜单项后也应该关闭菜单。...·简单菜单始终在屏幕左侧和右侧保持16dp留白(手机)或24dp留白(平板)。 ? ·如果简单菜单中文本长到需要换行,就改为使用Simple Dialogs,因为可以有不同高度行(如下图)。...·内容可滚动时,菜单一直显示滚动条。 ·简单菜单最大高度应小于页面高度一行或多行。 这确保了可点击简单菜单之外区域来关闭菜单。 ·不在菜单中重复展示已选项(同Menus)。

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

    大多数使用标准系统提供UI元素(如导航栏,表格和集合)应用程序会自动适应设备新外形。背景材料延伸到显示边缘,并且UI元件被适当地插入和定位。...如果您应用假定固定状态栏高度用于将内容定位在状态栏下方,则必须更新您应用,才能根据用户设备动态定位内容。...同样,全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上,确保重要视觉内容保持在两种显示尺寸上。 避免将交互式控件明确放置在屏幕底部和角落。...不要重复系统提供键盘功能。在iPhone X上,即使使用自定义键盘,Emoji / Globe按钮和Dictation按钮也自动显示键盘下方。...您应用程序不能影响这些按钮,因此避免在键盘中重复这些按钮造成混乱。请参阅自定义键盘。 资源 下载Photoshop和Sketch 资源中 iPhone X UI设计模板。 原文链接

    2.5K50

    Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    不要换行不要缩小 目的地icon(可选) Icon 可以对标签作为目的地进行补充。 使用时,应始终放置在文本之前。 App 内组件和内容应参考这些图标。 ?...如果 navigation drawer 占了页面的整个垂直高度,则可以在 header 区域放置品牌元素或产品名称 ?...如果 navigation drawer 被 top app bar 截断,请勿在 header 中放置品牌元素或产品名称。 在这种情况下, top app bar 是该内容更合适地方。...Modal navigation drawers 高于 app 大部分 UI,并且不会影响屏幕布局网格。...滚动 Bottom navigation drawers 一旦打开至全屏高度,就可以在内部滚动。 当最初打开到屏幕高度50%时,在显示其他项目之前,必须将 drawer 拖到屏幕高度

    3.8K40

    最新iOS设计规范四|3大界面要素:视图(Views)

    UI Kit是一种定义通用界面元素编程框架,这个框架不仅让APP在视觉外观上保持一致,同时也为个性化设计留有很大空间。...页面元素通常会显示有多少页面,多少屏,或者多少数量内容是当前可用及可见。如果你在滚动视图中显示页面控制元素,则需要关闭滚动视图中滚动条以免为用户带来困扰。...以上所有系统提供标准列表单元格样式,同样都支持图形元素,例如勾选图标或其他指示性控件。当然,添加这些元素会减少标题和子标题可用空间。 保持文本言简意赅,避免显示不全。...文本视图可以是任何高度,并可以通过滚动方式显示额外内容。 默认情况下,文本视图中文本是左对齐,并使用黑色系统字体。如果文本视图可编辑,则在视图内部点击时,屏幕下方会弹出键盘。 ?...还应该在启用了辅助功能选项(例如粗体文本)情况下测试内容单显示情况。 显示恰当键盘类型。iOS提供了几种不同键盘类型,每种键盘都对应着一种具体输入方式。

    8.4K31

    带你领略 ConstraintLayout 1.1 新功能前言带你领略 ConstraintLayout 1.1 新功能

    而在约束布局 1.1 版本中,通过允许您轻松地将任何视图限制为百分比宽度或高度,一切将变得很简单。 ? 使用百分比指定按钮宽度,以便在保持设计效果同时适应可用空间。...android:layout_height="wrap_content" app:layout_constraintWidth_percent="0.7" /> 链条 通过链条功能来放置多个元素可以让你配置它们该如何填充可用空间...在布置国际化字符串或显示用户生成无法预测大小内容时,屏障非常有用。 ? image 屏障允许您通过几个视图来创建一个约束。 屏障将始终将自己置于虚拟群组之外,并且您可以使用它来限制其他视图。...在上面这个例子中,右视图被限制为始终处于最大文本视图末尾。 群组 有时您需要一次显示或隐藏多个元素。为了支持这个,约束布局增加了群组功能。...当您有多个需要显示或陈列在一起元素时,这将很有用。

    1.7K20

    带你领略 ConstraintLayout 1.1 新功能

    而在约束布局 1.1 版本中,通过允许您轻松地将任何视图限制为百分比宽度或高度,一切将变得很简单。 ? 使用百分比指定按钮宽度,以便在保持设计效果同时适应可用空间。...android:layout_height="wrap_content" app:layout_constraintWidth_percent="0.7" /> 链条 通过链条功能来放置多个元素可以让你配置它们该如何填充可用空间...在布置国际化字符串或显示用户生成无法预测大小内容时,屏障非常有用。 ? 屏障允许您通过几个视图来创建一个约束。 屏障将始终将自己置于虚拟群组之外,并且您可以使用它来限制其他视图。...在上面这个例子中,右视图被限制为始终处于最大文本视图末尾。 群组 有时您需要一次显示或隐藏多个元素。为了支持这个,约束布局增加了群组功能。...当您有多个需要显示或陈列在一起元素时,这将很有用。

    1.5K20

    简单了解下无障碍设计模式

    改进产品无障碍功能可以增强所有用户可用性,这是非常值得做事情。 Material design 内置无障碍功能将帮助你应用适应所有用户。本节内容主要适用于移动端 UI 设计。...无障碍调色板 为应用选择支持可用主色、辅助色和强调色。确保元素之间有足够颜色对比度,以便视力低下用户也可以使用你应用。...视觉反馈(如标签、颜色和图标)和触摸反馈向用户显示可用 UI。 导航应该具有清晰任务流程,和最少步骤。在频繁使用任务上,应该实现聚焦控制、或控制键盘和读取焦点功能。...层次 根据项目的相对重要性,将项目放置在屏幕上。...错误示例 此命令 “点击” 是不准确,因为这不是激活此控件唯一方式(它也可以通过按下键盘、开关切换或盲文显示来激活)。

    4.8K40

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

    大多数使用系统提供标准 UI 元素(如导航栏、表格和集合)应用程序能够自适应设备新外形。背景材料可以延伸到屏幕边缘,而且 UI 元件也能够被适当地插入和定位。 ? ?...iPhone 上显示高度为 4.7 英寸,并且它屏幕上提供了更多垂直空间内容,状态栏占据了你应用程序本来可以使用屏幕区域,状态栏还显示了对人们有用信息,只有在交换附加值时候才能被隐藏。...避免将交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部滑动手势来访问主屏幕和对应用程序进行切换,这些手势可能会覆盖掉你在此区域中设定自定义手势。另外屏幕两个角落令人很难进行有效操作。...不要遮挡或突出显示关键显示特性。不要隐藏设备圆角和传感器外壳,也不要通过在屏幕顶部和底部放置黑色条方式来突出主屏幕指示器。...在键盘下方会自动显示Emoji/Globe 和 Dictation 按钮。你应用程序并不能影响这些按钮,所以不要在你自定义键盘中出现这些按钮,以免造成混乱。 请参阅 自定义键盘

    1.9K20

    SAP FioriABAP编程模型-在Fiori中使用Fiori Elements讲解

    有各种可用Fiori元素模板。以下是SAPUI5 App开发中最常用那些: 列表报告模板 –由列表和对象页面组成。...OData集合应该始终是整个数据模型主要实体。在这里,我们必须选择航空公司实体,因为它是主要实体。OData导航必须是必须在导航上显示下一个实体。 7.单击下一个选项卡中完成,将创建项目。...由于未放置任何UI元素,因此Fiori应用程序中不会显示任何标签或其相应值。为了在应用程序中显示智能表,窗体,字段等,我们利用UI批注将UI元素放置/放置在Fiori应用程序上。...将屏幕中编号与UI注释表中编号进行比较。 同样,我们为航班信息和航班时刻表创建元数据。以下是构建元数据并使用UI注释正确放置Fiori应用程序。...使用所有UI注释和Fiori元素模板,现在可以构建类似Display应用程序。

    1.1K10

    最新iOS设计规范三|3大界面要素:栏(Bars)

    UI Kit是一种定义通用界面元素编程框架,这个框架不仅让APP在视觉外观上保持一致,同时也为个性化设计留有很大空间。...搜索栏可以单独显示,也可以显示在导航栏或内容视图中。当显示在导航栏中时,可以将搜索栏固定在导航栏中,以便始终可以调用。也可以将其折叠,当用户向上滑动时展开显示。...有几种常见技术可以做到这一点: · 在APP中使用导航栏,该导航栏会自动显示状态栏背景,并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像,如渐变色或纯色 · 在状态栏背后放置模糊视图...所有页面的标签栏应保持相同高度,并且在弹出键盘时隐藏。 标签栏可能包含N个标签,但可见标签数量因设备大小和方向而异。...如果在某些情况下可以使用标签,但在其他情况下则无法使用,则应用程序界面将变得不稳定且不可预测。确保所有选项卡始终处于启用状态,并说明为什么选项卡内容不可用

    9.9K10

    iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

    这样能够保证在关联特定意义按钮改变了外观情况下,你应用中UI仍然是可用而有意义。...即使标签当前不可用,也不要把它从标签栏中删除。让某些标签时而出现时而隐藏,会让用户觉得你应用UI不稳定而且难以预测。最好解决方式是确保每个标签都可用,然后给用户解释某个标签内容不可用原因。...无论是平铺型还是分组性,用户点击某一行中某一项时都可以显示一个选项列表。当用户点选了一个不属于表格行按钮或者其他UI元素时候,可以使用平铺型表格视图来展示唤起选项列表。 展示层级信息。...,将唤起键盘键盘布局和类型取决于用户系统语言设置) 始终确保文字易读性。...想要了解可用键盘类型,可以参考UIKeyboardType.想要了解如何在管理你应用中键盘,请参考Managing the Keyboard. 4.2.13 网络视图 网络视图是一个可以展示丰富HTML

    10.1K51

    SAP FioriABAP编程模型-在Fiori中使用Fiori Elements讲解

    有各种可用Fiori元素模板。以下是SAPUI5 App开发中最常用那些: 列表报告模板 –由列表和对象页面组成。...OData集合应该始终是整个数据模型主要实体。在这里,我们必须选择航空公司实体,因为它是主要实体。OData导航必须是必须在导航上显示下一个实体。 7.单击下一个选项卡中完成,将创建项目。...由于未放置任何UI元素,因此Fiori应用程序中不会显示任何标签或其相应值。为了在应用程序中显示智能表,窗体,字段等,我们利用UI批注将UI元素放置/放置在Fiori应用程序上。...将屏幕中编号与UI注释表中编号进行比较。 同样,我们为航班信息和航班时刻表创建元数据。以下是构建元数据并使用UI注释正确放置Fiori应用程序。...使用所有UI注释和Fiori元素模板,现在可以构建类似Display应用程序。

    1.1K20

    30分钟了解所有引擎组件,132个Unity 游戏引擎组件速通!【收藏 == 学会】

    它还可以设置UI元素层级关系,用于控制UI元素显示顺序。在运行时,Canvas Renderer会根据UI元素层级关系和参数来渲染UI元素,并将其显示在屏幕上。...它是一个容器,可以包含其他UI元素,如文本、按钮、图像、滚动视图等。Canvas可以在场景中放置,并且可以在屏幕上显示出来。...垂直布局组越接近其偏好高度,每个子布局元素也越接近偏好高度。 如果垂直布局组高度大于其偏好高度,则会根据各子布局元素灵活高度按比例为子布局元素分配额外可用空间。...使用Aspect Ratio Fitter可以创建具有一致纵横比例UI布局,使UI元素纵横比例始终保持一致,无论屏幕尺寸和分辨率如何变化。...与其他交互控件一样,输入字段本身不是可见 UI 元素,必须与一个或多个可视 UI 元素组合才能显示。 用于在UI界面中显示可编辑文本框。

    2.4K34

    解决Android软键盘在全屏下设置adjustResize无效问题

    键盘显示时它未将ActivityScreen向上推动,所以你Activityview根树尺寸是没有变化。 在这种情况下,你也就无法得知键盘尺寸,对根view作相应推移。...} // 获取界面可用高度,如果软键盘弹起后,Activityxml布局可用高度需要减去键盘高度 private void possiblyResizeChildOfContent...() { //1、获取当前界面可用高度键盘弹起后,当前界面可用布局会减少键盘高度 int usableHeightNow = computeUsableHeight(...= usableHeightPrevious) { //3、获取Activity中xml中布局在当前界面显示高度 int usableHeightSansKeyboard...= mChildOfContent.getRootView().getHeight(); //4、Activity中xml布局高度-当前可用高度 int

    6.7K32

    Adobe Photoshop CC 2019最新版软件已更新(可下载)

    在您进行更改时,“预览”面板将显示输出结果实时全分辨率预览效果。...要将图像置入图框,只需从“库”面板或本地磁盘中拖放 Adobe Stock 资源或库资源即可 — 图像会自动进行缩放,以适应图框大小。置于图框中内容始终是作为智能对象,因而可以实现无损缩放。...改进了可用性默认情况下,参考点处于隐藏状态现在,变换项目时,您可以在画布上轻松地移动项目。变换项目时出现参考点。当前在默认情况下处于隐藏状态。...可用性改进现在您可以隐藏参考点,双击画布编辑文本,并利用自动提交功能更快、更高效地裁切、转换、放置并输入文本。此外,Photoshop 默认会按比例转换像素和文字图层,这样画板就更不容易意外移动。...以及更多功能还包括:可水平翻转画布翻转文档视图、可更快放置示例文本 Lorem Ipsum 文本模式,以及适用于“选择及蒙版”工作区可自定义键盘快捷键。

    81110

    最新iOS设计规范七|10大视觉规范(Visual Design)

    例如:无论可用屏幕空间多大,你都可以约束一个按钮,使其始终水平居中并定位在距离图像下方8pt位置。 当检测到某些环境变化(称为特征)时,自动布局会根据指定约束自动调整布局。...较大元素也更容易点击,这对于处在极易分散用户注意力环境下APP尤为重要,例如用户在厨房或健身房。 通常将主要内容或元素放置在屏幕上半部分中,并在从左至右阅读习惯中放置在屏幕左侧附近。...设计全屏体验 扩大可视元素以填满屏幕。确保背景延伸到显示边缘,并且垂直方向可以滚动布局(如表和集合),一直延伸到底部。 避免在屏幕底部和角落放置交互式控件。...通过对背景色进行采样并修改饱和度和值,Vibrancy 使UI元素变亮或变暗。充满活力用户界面元素能更好地与材质相结合,并增强半透明效果。 标签和填充每个都提供几个级别的活力值;分隔符只有一个级别。...当人们按已连接蓝牙键盘空格键时,播放或暂停媒体播放。人们希望通过按空格键键来控制媒体播放是一种互动,而不管他们使用键盘是什么。 确保自定义视频播放器行为符合预期。

    8K30
    领券