InterfaCSS 2.0-Beta4.1

InterfaCSS 2.0-Beta4.1

×

测试已测试✓
Lang语言 Obj-CObjective C
许可证 MIT
发布最后发布2022年4月

由 Tobias Lofstrand 维护。

InterfaCSS 2.0-Beta4.1

  • 作者
  • Tobias Löfstrand

InterfaCSS

Build Status

每个人都喜欢一个设计精美且 UI 一致的 app，而且这不应该需要巨大的努力。如果有种方法可以以简洁而强大的方式执行 样式化、主题化 和 布局，同时又不必不停地重复自己会怎么样？如果事情可以更像互联网呢？

XML Flexbox Hot Reload Demo

欢迎使用 InterfaCSS 2 - 基于 CSS 的 iOS 样式和布局

InterfaCSS 是什么

🎨强大的样式，格式熟悉
📐复杂的布局变得简单，具有出色的可读性和可维护性
🌋样式的热重新加载和布局来加快开发速度
🌓支持多个样式表，使主题化更简单

使用 CSS 进行简洁而强大的样式化

InterfaCSS使用一种易于理解的样式 语法，该语法基于大家熟悉的在网页上使用的 CSS 样式语言（增加了类似 Sass/Less 的某些功能，例如 嵌套声明 和 变量），这意味着您（以及您的设计师）可能会感到非常熟悉。InterfaCSS支持丰富的选择器语法（类型、类 和 元素 ID 选择器、选择器组合器、伪类 等），属性名称与您所期望的相同，即在 UIKit 中一样，您可以设置 字体、颜色、图片、变换、内边距、偏移、矩形、枚举 等等，还有更多更多的内容，请参考风格属性参考。

#helloWorldView .titleLabel {
  font: HelveticaNeue-Light 20;
  text-color: red;
  alpha: 0.75;
  cornerRadius: @numberVariable;
  transform: rotate(90) scale(2, 3);
}

布局以易于理解（并类似于HTML）的方式表达，支持将元素绑定到视图控制器中的属性（例如）

<layout useSafeAreaInsets="false" useDefaultMargins="true">

  <view class="rootClass">
    <view id="helloWorldView" style="flex-grow:1; flex-direction: column; justify-content: flex-start">
      <label class="titleLabel">Hello world</label>
      <button class="actionButton"/>
    </view>
  </view>

</layout>

样式通常包含在样式表（CSS文件）中

然而，它也可以在元素内联（通过style属性）或布局中的style标签中包含。后者使得将特定视图的样式隔离到特定视图成为可能，从而避免了为每个视图创建单独的样式表的需要。当然，一个经过良好思考的风格结构（或设计系统）在大多数情况下应需要很少的特定视图样式，而是由多个常见样式表组成。

<layout useSafeAreaInsets="false" useDefaultMargins="true">

  <view class="rootClass">
    <view id="helloWorldView" style="flex-grow:1; flex-direction: column; justify-content: flex-start">
        <label class="titleLabel">Hello world</label>
    </view>
  </view>
  
  <style>
  #helloWorldView .titleLabel {
    font: HelveticaNeue-Light 20;
    text-color: red;
  }
  </style>

</layout>

样式表和布局的热重载（开发用）

为了使开发更简单、更快速，尝试使用可热重载的样式表和布局——无需再等待那些令人沮丧的编译/部署/启动/返回到原来地方的过程。请注意，此功能仅适用于开发期间使用。请参阅设置热重载支持的示例代码（非常简单）。

示例代码

查看示例代码是了解应用程序中InterfaCSS使用方式的良好方法。要运行示例代码，请执行以下操作

  • 在pod install。
  • 打开<ExampleName>.xcworkspace。
  • 构建并运行。

以下是一些可用示例

  • HelloFlexLayout - 所有示例中最简单的一个，显示最基础的布局和样式。
  • FlexThatBox - 一个简单的示例，展示了基本的布局，包括自适应表格视图单元格和旋转支持。
  • FlexyVistas - 一个更接近实际应用的示例，灵感来源于Ray Wenderlich Yoga教程中的示例。

从InterfaCSS 1.X迁移

InterfaCSS 2仍然在开发中（尤其是文档方面） - 目前，这里有一个从1.X到更大的变化的简要列表

  • 代码库已移植到Swift
  • 项目已分成两个部分（子规格）：Core（包含解析样式表和样式元素的最重要部分）和Layout（包含在XML文件中定义视图/布局的支持 - 见下文）
  • 默认布局实现使用CSS Flexbox来表示布局（内部使用Facebook Yoga引擎）
  • 支持开发期间布局文件和样式表的热重载！
  • 单体主类InterfaCSS现在已分成几个部分（主要是StylingManager和StyleSheetManager），有更明确的目的
  • 新的“主类”现在是StylingManager
  • 引入了一个协议，以便更容易地工作于不同范围的样式表：Styler
  • 样式化属性现在（主要是）通过运行时内省发现，这意味着InterfaCSS将更容易跟上UIKit的变化
  • 与Web CSS更相似，例如现在可以通过单独的字体名和字体大小属性指定字体（正在进行中 - 将会有更多内容）
  • 新的示例演示了使用Flexbox布局的方法（见下文）
  • 还有更多更多（更多和更好的文档即将到来）...

项目状态和背景

通往2.0的道路...

  • 更全面的单元测试覆盖率...
  • 对更强大的布局支持（动作绑定、模型绑定...）更加出色
  • 文档，文档，文档...
  • 将Core转为Swift...

……以及更多...

  • Android版本...

背景

InterfaCSS应运而生，源于对现有界面构建工具的不足之处的挫败感，其中最重要的一点就是，在用户界面元素的样式方面，总是需要不断地重复自己。一定有更好的方法。

在这一概念的基础上，InterfaCSS应运而生，经过一段时间的暗暗发酵，最终作为一个开源项目诞生，供任何可能分享对更好的可样式化和布局以及更好地合作的需求的iOS开发者使用。
在演变成为一个开源项目的过程中，其他类似的项目出现了，尽管InterfaCSS仍然与它们中的大多数不同

  • 属性名符合你的期望，支持的属性列表也很广泛
  • 强大的样式表语法（选择器链、选择器组合器、伪类、嵌套声明），这基于大家熟悉的用于网页的CSS语言
  • InterfaCSS不仅仅是样式，还帮助你在视图设置和布局方面

许可

MIT许可证 - 请参见此处。