---
title: "具有多层样式表的灵活应用程序用户界面设计"
date: "2016-12-06"
categories: 
  - "applications"
  - "development"
  - "mobile"
tags: 
  - "app-design"
  - "app-development"
  - "app-ui"
  - "app-ux"
  - "mobiletogether"
description: 了解如何利用 MobileTogether 中的多层级样式表来提升应用程序的用户界面设计，从而在保持原生外观的同时，实现跨平台的动态定制。
---
Status: #blog

Tags:  #app-design #app-development #app-ui #app-ux #mobiletogether

Categories:  [low-code+no-code](/blog/zh/category/low-codeno-code.md) | [mobile-development](/blog/zh/category/mobile-development.md)
# 具有多层样式表的灵活应用程序用户界面设计

使用跨平台移动应用开发框架，例如MobileTogether，是一个非常好的选择，因为它 [开发原生应用程序](https://www.altova.com/zh/mobiletogether.html), 因为设计环境会负责使用每个操作系统原生的外观和风格，正确地渲染应用程序的用户界面。您只需要构建一个设计方案即可。

这使得应用程序开发者能够快速构建面向所有用户的、功能强大且以数据为中心的应用程序。为了支持这一目标，MobileTogether 采用了 RMAD 方法，并提供了灵活的选项来设计精美的用户体验。为了更好地实现这一点，MobileTogether 提供了多层级样式表，让您只需点击几下，就能自定义和应用样式——无论是静态的还是动态的——从而在应用程序用户界面的各个层级进行调整。

![查看移动应用程序](/blog/images/shutterstock_2341179701.jpg)

<!--more-->

## 设计一个美观的用户界面

首次在 [MobileTogether 3.0](https://www.altova.com/zh/mobiletogether/new-features.asp) 版本中引入的多层级样式表，允许应用程序开发者定义全局样式，这些样式可以应用于项目、页面、表格和控件等多个层级。这提供了一个集中的样式库，您可以在整个应用程序开发项目中，在多个层级中使用这些样式。

为什么要自定义样式？首先，我需要强调的是，这并非强制性的。MobileTogether 会自动应用默认的样式、按钮外观等，针对不同的操作系统（如 iOS、Android 和 Windows 等），让您无需进行任何修改，就能构建出简洁、实用的用户界面。然而，有时为了符合企业风格指南、实现特定功能，或者满足一些传统的设计需求，就需要自定义样式。MobileTogether 的全新多层级样式表旨在让这一过程更加简单和高效。

要开始使用，请从“项目”菜单中打开“样式表”对话框。 这将允许您创建两种类型的样式表：项目样式表和用户自定义样式表。

项目样式表是您进行最高层级自定义的地方。您在此定义的样式将自动应用于整个项目。如果您希望对所有按钮的外观进行全局修改，为所有文本元素设置字体大小，或者控制整个项目的背景颜色，那么这里非常适合您。

 

![项目范围内的样式表](/blog/images/app-project-stylesheet.png)

 

第二种类型是用户自定义样式表，这些样式表由开发者命名，可以根据需要应用于单个页面、表格和控件。换句话说，这些样式并非应用于整个项目。在下面的截图所示，我创建了一个名为“MyStyles”的用户自定义样式表，它定义了一些按钮、图表和标签的样式。

在样式表对话框的右侧面板中定义样式时，您可以选择或输入一个静态属性值，或者您可以输入一个[XPath表达式](https://www.altova.com/zh/xpath-intro.html)，该表达式会计算出一个属性值。一个动态赋值的例子是，将属性值设置为基于某些条件，例如最终用户的移动设备的屏幕宽度，或者基于用户偏好。例如，您可以允许用户通过应用程序中的一个设置页面调整字体大小，并将该字体大小应用于所有文本元素。

在下面的 MyStyles 样式表中，我使用了 XPath 来动态地设置图表的宽度和高度，使其能够精确地适应用户当前使用的设备。

 

![用户自定义的应用程序样式表](/blog/images/app-stylesheet.png)

 

您可以定义任意数量的由用户创建的样式表，以提供不同元素的格式化选项。

在应用程序开发过程中，将用户自定义的样式表应用于设计组件非常简单，只需在“样式与属性”窗口中选择样式表的名称即可。

 

![选择移动端样式表](/blog/images/select-mobile-stylesheet.png)

您还可以使用 XPath 动态地指定样式表的选择，例如，根据当前移动设备的类型来选择不同的样式表。使用 XPath 表达式选择用户自定义的样式表的一个主要优点是，选择过程可以根据动态的环境条件进行调整。例如，如果您希望为 iOS 设备指定一种样式表，而为所有其他设备指定另一种样式表，您可以使用以下 XPath 表达式：如果 ($MT_iOS=true()) 则选择 'iOSStyleSheet'，否则选择 'GeneralStyleSheet'。

当您为任何页面或元素指定了用户自定义的样式表后，它会覆盖项目样式表中相应的设置，因此您可以进行全局性的调整，也可以进行细致的调整。

 

多层级样式表可以节省大量时间，并为在所有平台上定制应用程序的外观和风格提供无与伦比的灵活性。例如，正如我在介绍中提到的，如果您需要在 iOS、Android 和 Windows 平台上，使所有应用程序的按钮都呈现相同的外观（即，而不是使用系统默认的按钮样式），现在您可以在整个项目中（或根据需要，在其他层级）定义一次即可。

**您可以通过在免费的 MobileTogether Designer 中创建一个应用程序来体验此功能。 (链接: https://www.altova.com/download/mobiletogether.html)**