标签式界面示例及其构建方法

主页 » Python » 标签式界面示例及其构建方法

标签式界面是现代软件中最常见的导航模式之一。从移动应用和网页仪表盘到复杂的开发工具，标签页的应用无处不在。它们使用户能够在同一窗口内的不同部分或文档之间快速切换，从而保持界面简洁、易于浏览且方便学习。精心设计的标签页能够显著减少杂乱，并清晰地显示当前可见的内容。

在这简单的标签行背后，蕴含着许多设计决策和技术选择。：固定或可滚动标签页、仅图标布局、页面构建器中的嵌套标签页系统、渐​​进式 Web 应用中的文档式标签页窗口，或使用 Bootstrap 或 Xajax 等框架构建的自定义标签页组件。在本指南中，我们将详细介绍各种标签页布局方式。 标签式界面示例 以及实现方法，将 Android、Web UI、PWA 清单和经典 PHP + Ajax 解决方案的所有想法融合在一起。

Android 中使用 TabLayout 和 ViewPager 实现选项卡式界面

在 Android 系统中，Material Design 中标签式导航的主要构建模块是 TabLayout 组件。通常会与 ViewPager（或在较新的项目中与 ViewPager2）搭配使用。谷歌的 Material Design 团队对标签页的描述非常简单：它们使用户能够轻松地浏览和切换同一 Activity 中的不同视图。

TabLayout 以水平方式排列选项卡，并提供两种主要操作模式：固定模式和可滚动模式。在固定模式下，所有标签页同时可见，可用宽度被它们平分。WhatsApp 等应用就采用了这种模式，用户只需轻点一下即可访问几个不同的版块，标签页会填满整行。

当标签数量或标签长度超过屏幕宽度时，可滚动标签页就派上用场了。在这种配置下，用户可以水平滑动标签栏来查看更多选项。谷歌自家的“新闻与天气”应用就是一个很好的可滚动标签布局的参考案例，因为其中的内容类别数量庞大，单个屏幕难以容纳。

TabLayout 中的每个选项卡通常映射到 ViewPager 中显示的一个 Fragment。当用户点击标签页时，TabLayout 会更新其选中状态，ViewPager 会导航到相应的 Fragment。同样地，当用户在页面间滑动时，选中的标签页指示器会移动以跟踪当前可见的 Fragment。这种紧密耦合通常通过以下方式实现： setupWithViewPager()它会自动创建选项卡，并为滚动和点击事件连接监听器。

Material 选项卡可以显示文本、图标或两者的组合。有些应用，例如安卓版的 Twitter，大量使用易于识别的图标而非标签，这样既节省空间，用户一旦理解了每个符号的含义，浏览起来也更加快捷。TabLayout 支持所有这些选项，无论是在 XML 中定义还是通过编程方式设置。

逐步创建基本的 Android 标签式界面

要在 Android Studio 中从头开始构建一个简单的选项卡式 UI，通常需要创建一个空的 Activity。经常被称为类似的东西 MainActivity然后引入三个关键部分：一些片段、布局 XML 中的 TabLayout 和由分页适配器管理的 ViewPager。

第一个构建模块是一组小的 Fragment 类，每个标签页对应一个 Fragment 类。例如，您可以定义 FragmentOne, FragmentTwo 和 FragmentThree每个元素都加载自己的 XML 布局（例如， fragment_one.xml每个片段的代码都很简单：加载视图，绑定任何小部件，并提供与该选项卡相关的内容。

接下来，将 TabLayout 和 ViewPager 添加到您的主活动布局中。。在 activity_main.xml 你声明 TabLayout ID 为这样的元素 tab_layout 配备 ViewPager 就在它正下方。具有以下属性： app:tabMode 和 app:tabGravity 您可以控制标签页是固定显示还是可滚动显示，以及它们是否拉伸以填充可用宽度。设置 tabMode="fixed" 和 tabGravity="fill" 会将所有标签均匀分布在工具栏上，这在平板电脑等宽屏幕上尤其明显。

选项卡样式通常是通过 TabLayout 上的自定义样式引用来实现的。通过这种风格 @style/CustomTabLayout您可以定义诸如指示器颜色之类的东西（tabIndicatorColor），指示器高度（tabIndicatorHeight）以及选中和未选中状态的文本颜色（tabTextColor 和 tabSelectedTextColor也可以使用诸如以下方法以编程方式设置相同的属性。 setSelectedTabIndicatorColor() or setTabTextColors()但是，将设计集中在 XML 中可以更容易地保持外观一致。

定义布局后，您需要附加一个分页适配器，用于控制每个标签页显示的 Fragment。常见的实现方式是扩展 FragmentPagerAdapter （或 FragmentStatePagerAdapter 或更新的 FragmentStateAdapter （针对 ViewPager2）并重写了三个方法： getItem() 为特定位置提供片段， getCount() 报告页面数量，以及 getPageTitle() 为每个标签页显示标签文本。当选中第一个标签页（例如标题为“标签页项目 1”）时， getItem() 将返回 FragmentOne将标签与其内容联系起来。

活动中的所有环节都融合在一起。 onCreate() 方法在那里，你可以获取对 TabLayout 和 ViewPager 的引用。 activity_main.xml使用 FragmentManager 构建适配器并将其设置在 ViewPager 上。调用 tabLayout.setupWithViewPager(viewPager) 完成连接，为适配器中的每个条目创建选项卡并同步用户交互。在页面之间滑动会更新所选选项卡，点击选项卡会将分页器滚动到正确的片段。

如果您需要对用户操作进行更精细的控制，您可以附加一个 OnTabSelectedListener该监听器公开了三个回调函数： onTabSelected() 当一个标签页被选中时， onTabUnselected() 当它失去焦点时，以及 onTabReselected() 当用户点击已激活的标签页时，这些钩子函数非常适合仅在标签页实际被查看时加载额外数据，或在焦点切换时触发细微的动画效果。

可滚动标签页与固定标签页，以及使用图标代替文本

Material Design 明确区分了固定标签页和可滚动标签页，两者各有其理想的使用场景。当您只有少量简短的标签，且用户可能需要并排比较时，建议使用固定标签。它们非常适合触摸屏上的主要导航，因为在触摸屏上，清晰度和稳定性比容纳大量页面更重要。

当标签较长或需要四个以上的标签时，可滚动标签就显得非常实用。如果尝试将过长的名称塞进固定大小的 TabLayout 中，Android 会将标签换行显示，甚至截断它们，这不仅看起来杂乱无章，还会降低用户体验。启用滚动模式后，用户可以流畅地左右滑动标签栏，每个标签都能获得足够的空间，清晰易读。

这些模式之间的切换可以通过 XML 实现。 app:tabMode 或通过编程方式 setTabMode()通过 TabLayout.MODE_FIXED 产生固定标签，而 TabLayout.MODE_SCROLLABLE 创建一个可水平滚动的列表。值得注意的是，如果您预计类别超过四个，则强烈建议您采用滚动配置。

另一种强大的变体是使用图标而不是文本作为标签。通过致电 getTabAt(index) 在 TabLayout 实例上，然后调用 setIcon()你可以为特定标签页分配一个可绘制对象。这为非常紧凑的标签栏提供了空间，尤其是在图标通用性强的情况下。如果你仍然需要覆盖 getPageTitle() 在适配器中，您可以将文本和图标组合在一起；如果您省略该覆盖，最终将只显示图标的选项卡。

Tab 键的行为也可以高度配置，而无需修改 XML 文件。您可以使用以下方式显式创建选项卡 newTab()而不是依赖于 setupWithViewPager()而且，您可以随时切换选项卡模式，通过监听器响应选择，如果您需要比简单标签和图标更复杂的设计，甚至可以插入自定义选项卡视图。

使用 Android Studio 模板搭建选项卡式活动

从零开始编写标签式界面对于理解各个组件如何协同工作非常有帮助，但 Android Studio 可以在几秒钟内为你生成一个可用的界面。该 IDE 附带常用模式的模板，包括 Java 和 Kotlin 中均可使用的“选项卡式活动”。

创建新项目时，在选择应用程序名称和目标设备后，您可以从活动列表中选择“选项卡式活动”。在最终配置对话框中，您可以选择导航样式，例如“操作栏标签（带 ViewPager）”。确认后，Android Studio 会生成一个包含 TabLayout、ViewPager 和示例 Fragment 的 Activity，您可以立即运行并进行探索。

这些内置模板对于原型设计和简单的应用程序来说非常方便。他们设置好了样板代码、示例布局和连接逻辑，这样您就可以专注于实际内容和特定行为。在现有项目中，您可以从“文件”菜单添加相同类型的活动，方法是插入一个新的“选项卡式活动”，然后按照相同的步骤操作。

对于导航复杂或采用高度自定义视觉语言的更大型应用程序，第三方模板可以进一步加快开发速度。Envato 等应用市场提供预构建的 Android 应用模板，这些模板内置了复杂的标签式界面和 Material Design 设计模式。如果您想专注于开发独特的功能，而不是从头开始重新创建标准导航，这些工具包尤其有用。

Elementor 中的嵌套选项卡，用于高级网页布局

在网页上，像 Elementor 这样的页面构建器将选项卡式界面理念引入到拖放式设计工作流程中。其中一个特别灵活的模式是嵌套标签：标签位于其他标签内，使您可以将相关内容分组到结构严谨但又紧凑的布局中，而不会使页面显得杂乱无章。

设计嵌套标签页时，一个好的第一步是定义一致的视觉语言。例如，一个标签页可以包含一张主图、一个概括场地或活动的标题、一段简短的文字描述和一个按钮。一旦确定了这种结构，就可以针对每个标签页调整实际布局——例如，一个标签页采用单列布局，另一个采用两列布局，第三个采用三行布局——同时保持元素一致，从而确保界面整体风格协调统一。

Elementor 的嵌套选项卡功能允许您添加任何您喜欢的组件，而不仅仅是纯文本。您可以在不同的标签页中嵌入价格表，分别显示月度、半年和年度套餐，或者将其与循环网格结合使用，按类别动态筛选博客文章、产品或作品集项目。通过将类别与标签页对应起来，访客无需离开当前页面即可快速浏览他们感兴趣的内容。

标签页也是引导用户完成流程或故事的有效方式。例如，可以在设置流程中使用四五个标签页作为步骤：每个标签页的标签栏中可以显示一个图标、一个步骤编号和一个简短的标签，而面板内容则包含该阶段特有的文本和图像。为图像和元素添加动态效果或微妙的动画，就能创建出比冗长的静态页面更具吸引力的引导式叙事体验。

对于更高级的仪表盘和管理型视图，设计人员有时会使用更深一层的嵌套标签页，即在嵌套标签页中再嵌套标签页。想象一下，左侧有一列垂直的标签页，作为主要版块，每个版块又包含一组水平排列的二级标签页，用于显示子视图。只需一些自定义 CSS——例如，使用每个标签页的 CSS ID 来旋转标签并压缩垂直导航——您就可以完全使用 Elementor 容器和循环网格构建功能强大的标签式控制面板。

最主要的结论是，嵌套标签页为内容结构提供了几乎无限的可能性。无论您是在组织功能导览、定价选项、作品集还是分析仪表板，一致的设计语言和灵活的布局相结合，可以让您在一个仍然感觉易于探索的空间中塞入大量信息。

渐进式 Web 应用中的标签式应用程序模式

标签式界面不仅存在于网页中；它们还可以集成到渐进式 Web 应用（PWA）作为独立窗口运行时的机制中。在 ChromeOS 上，一种特殊的“标签式应用程序模式”允许 PWA 呈现自己的文档式标签栏，类似于您在原生编辑器或 IDE 中看到的标签栏。

PWA 支持多种显示模式，可通过以下方式控制： display Web 应用程序清单中的成员. 选项包括 fullscreen, standalone, minimal-ui 和 browser如果不支持某种模式，浏览器会按照预定义的流程进行回退。为了实现更精细的控制，还可以…… display_override 该属性允许开发人员指定自定义回退顺序。

新的标签式应用程序模式通过为 PWA 提供内置的标签式文档界面 (TDI) 来填补之前的空白。该应用无需使用自定义 HTML 和 JavaScript 在页面内伪造标签页，而是可以请求系统在专用的 PWA 窗口中以真正的顶级标签页形式托管多个文档或视图。这与……不同。 display: browser它会在普通的浏览器标签页中打开应用程序，并显示完整的浏览器用户界面。

此模式的典型应用场景包括生产力应用、通信工具和阅读体验。代码编辑器 PWA 可以在单独的标签页中打开多个文件，聊天客户端可以为每个房间或频道提供一个标签页，阅读应用程序可以在新的应用程序标签页中打开文章链接，所有这些都整齐地保留在同一个窗口中，而不是使普通浏览器变得杂乱无章。

这种内置标签模式与开发者创建的自定义标签用户界面之间存在重要区别。系统级标签页能够优雅地处理大量文档，受益于资源隔离，并与浏览器功能深度集成，例如导航历史记录、“复制此页面链接”、从当前标签页跳转到其他页面或在常规浏览器窗口中打开活动文档。如果只是在页面内模拟标签页，这些功能仅适用于外部框架，而不适用于每个单独的子视图。

如何配置 PWA 选项卡式应用程序模式

为 PWA 启用选项卡模式首先需要在清单文件中设置适当的参数。 display_override 链最小配置可能指定 "display": "standalone" 和 "display_override": 这意味着浏览器应尽可能优先使用标签式应用程序窗口，否则应回退到标准独立窗口。

除此之外， tab_strip 该成员允许您自定义应用程序标签栏的行为该对象可以定义两个可选的子属性： home_tab 和 new_tab_button如果您省略 tab_strip 完全而言，浏览器将使用应用程序的起始 URL 作为创建新标签页的基础，提供默认行为。

首页标签的概念尤为重要。这是一个固定标签页，只要应用程序窗口打开，它就必须始终显示，并且不应超出其定义的范围。点击此主页标签页中的任何链接都应在新应用程序标签页中打开。您可以通过以下方式进行配置： home_tab.scope_patterns这是一个 URL 模式列表（通常是简单的路径名，例如： "/" or "/index.html"相对于清单 URL。

此 new_tab_button 本条目描述了用户界面中“新建标签页”功能的运行方式。它只有一个 url 该成员指定用户点击按钮时要打开的页面，通常是应用程序范围内的页面，例如 "/create"如果该 URL 位于主页标签页的范围内，则应用程序根本不会显示单独的“新标签页”控件，因为假定导航是从主页视图发生的。

一个用于连接标签式应用程序窗口的示例清单（概念上）可能如下所示：它定义了一个名称， start_url, display 设置 standalone, display_override 或 "tabbed"，以 home_tab 其范围涵盖 / 和 /index.html，以及 new_tab_button 配置为 "/create" URL。通过这种设置，用户可以获得一个固定的主页标签页，并且能够一键打开其他文档。

应用程序还可以在运行时检测自身是否以标签页模式运行。。 使用 display-mode 媒体功能，您可以编写类似这样的 CSS 代码块 @media (display-mode: tabbed) 微调样式，或使用 window.matchMedia('(display-mode: tabbed)').matches 使用 JavaScript 检查选项卡式应用程序模式是否处于活动状态，并相应地调整 UI 行为。

最后，与启动处理程序 API 存在一个有趣的交互。当一个选项卡式 PWA 设置 "client_mode": "navigate-new" 在启动配置中，应用程序启动时可以直接在现有应用程序窗口内的新标签页中打开，而不是创建多个窗口。这可以保持用户工作区的整洁，并强化以标签页为中心的单一应用程序环境理念。

使用 PHP、Ajax 和 Xajax 构建自定义选项卡式导航

早在 PWA 拥有系统级标签页之前，Web 开发人员就已经开始使用 HTML、CSS、JavaScript 和服务器端代码来构建自己的标签页导航组件了。一种经典的方法是使用 PHP 和 Xajax 框架异步加载选项卡内容，并在不完全重新加载页面的情况下更新页面。

此类示例中的 HTML 结构非常简单明了。包装纸 <div> 具有类似这样的类别 pestanas 里面有一个 <ul> 包含 <li> 每个选项卡包含多个元素。每个列表项都有一个唯一的 ID（例如： pestana0, pestana1, pestana2以及一个 CSS 类，用于指示列表项是处于活动状态还是非活动状态。这些列表项内的锚标签会调用由 Xajax 生成的 JavaScript 函数，例如 javascript:void(xajax_cambia_contenido(0))将标签页索引传递给服务器。

标签列表下方有一个专门用于存放标签正文内容的容器。，通常是 <div> 使用类似这样的 ID cuerpopestanas当用户点击任意标签页时，Ajax 调用会获取相应的 HTML 片段并将其注入到该内容区域。页面本身不会重新加载；只有内容容器的内部 HTML 代码会发生变化。

CSS 在使标签页具有交互性和美观性方面起着核心作用。可以定义两个关键类：一个用于非活动标签页（例如）。 li.pestanainactiva）以及另一个用于选定选项卡（例如） li.pestanaseleccionada样式差异——例如背景颜色、边框和字体样式——能够清晰地向用户反馈哪个标签页处于激活状态。其他规则可以强制使用特定的链接颜色或移除文本装饰，从而使标签与所需的视觉形象保持一致。

在服务器端，一个类似这样的 PHP 函数 cambia_contenido() 协调应对措施它接收制表符索引作为参数，并构建一个 xajaxResponse 对象，并在 PHP 字符串数组中查找匹配的内容。然后它使用 addAssign() 更新页面：一次调用即可设置 innerHTML of cuerpopestanas 对选定的文本，另一个文本会进行更改。 className 将点击的选项卡设置为“选中”样式，然后循环将剩余的选项卡重置为“非活动”类。

这种模式对内容来源没有限制。与其在数组中硬编码文本字符串，不如使用模板组装 HTML，从数据库中提取记录，或者动态地创建表单和交互式组件。客户端无需关心这些细节；它只会在用户切换标签页时接收更新后的标记，并在标签页主体中显示。

初始化是通过一小段 JavaScript 代码完成的。通过致电 xajax_cambia_contenido(0) on window.onload页面会自动选择第一个标签页，并在 DOM 加载完毕后立即加载其内容。这样，您无需在原始 HTML 中硬编码任何主体内容——标签页系统从一开始就完全由 Ajax 驱动。

运用最佳实践设计移动标签栏

在移动设备上，底部标签栏是最重要的导航元素之一，值得我们认真对待。杂乱或不一致的标签栏会很快让用户感到困惑，尤其是在小屏幕上，每个像素都至关重要。

首要准则之一是限制标签栏中的项目数量。图标数量最好控制在四到五个以内；超过这个数量，触摸目标和标签就会变得过于狭窄，难以准确点击，也难以理解。如果确实需要更多导航选项，可以考虑使用二级菜单或其他布局方式，例如抽屉式菜单。

图标的选择同样至关重要。每个图标都应清晰地传达其所在部分的主要用途，并易于识别。文字标签可以少量使用以解释含义，但如果图标选择得当且符合平台规范，用户就能快速学习并完全依赖视觉效果。

状态指示必须明确无误。使用颜色、形状或大小变化来突出显示当前激活的标签页——例如，使用彩色强调色、填充图标（而非轮廓图标）或略微增大图标尺寸。这样可以清晰地表明用户当前正在查看哪个部分。同时，通常最好避免在标签栏中直接放置通知徽章或数字计数器，因为它们会造成持续的视觉干扰，分散用户对导航的注意力。

投放位置和坚持不懈也至关重要。标签栏应位于屏幕底部，无论横屏还是竖屏，都应始终可见且易于拇指操作。请勿将其遮挡在键盘、对话框或浮动操作按钮后，并避免与其他可能干扰点击的组件重叠。保持标签栏稳定有助于培养肌肉记忆，并使导航操作更加可预测。

利用 Bootstrap、Bootbox.js 和 Font Awesome 构建网页标签页用户界面

对于传统的 Web 项目，像 Bootstrap 3 这样的框架提供了开箱即用的选项卡组件，这些组件可以轻松地进行样式设置和扩展；参见 如何从头开始创建网站同一个工具包提供了按钮、下拉菜单、面板和模态框，可以轻松组装出连贯的界面，使选项卡能够自然地融入设计的其余部分。

Bootstrap的导航组件包含现成的标记和类，可用于创建水平选项卡条。通过将标准导航类与选项卡专属类结合使用，您只需少量 JavaScript 代码即可在内容窗格之间切换。由于所有元素都共享相同的 Bootstrap 样式系统，因此您的选项卡将自动与网站上的菜单、面板和表单的外观保持一致。

为了以符合 Bootstrap 风格的方式处理提示和确认信息，许多开发者都依赖 Bootbox.js。这个小型库使用便捷的 JavaScript API 封装了 Bootstrap 风格的模态框，因此当用户切换标签页、尝试关闭未保存的视图或触发可能具有破坏性的操作时，您可以显示确认对话框或警报——所有这些都不会破坏 CSS 框架建立的视觉一致性。

图标设计通常由 Font Awesome 提供支持。这套丰富的图标集与 Bootstrap 无缝集成，为您提供海量符号，可用于标签页或内容区域。无论您需要用于主页、设置、消息和文件的通用图标，还是更专业的字形，Font Awesome 都能帮助您轻松传达含义，无需每次都设计自定义图像。

通过结合 Bootstrap 的结构组件、Bootbox.js 模态框和 Font Awesome 图标您可以构建功能丰富的标签式界面，使其看起来精致且协调一致。标签、提示框和图标都采用相同的设计语言，这使得用户体验感觉是精心设计的，而不是由不匹配的元素拼凑而成。

在 Android、Web、PWA 和 PHP 驱动的网站中，标签式界面仍然是组织单个框架中多个视图或文档的可靠方式。无论您选择 Material Design 的 TabLayout 和 ViewPager、Elementor 中的嵌套选项卡、PWA 的 ChromeOS 选项卡式应用程序模式，还是使用 Xajax 和 Bootstrap 的自定义解决方案，核心目标都是一样的：保持导航简单、内容易于发现、上下文变化清晰明了。