Оформление стилевых таблиц NSS - lanit-tercom-school/grouplock GitHub Wiki

NUI

Организуем оформление приложений с помощью стилевых таблиц, схожих с CSS. (Перевод официальной документации NUI)

Стиль задаётся CSS-like синтаксисом с поддержкой переменных:

@primaryFontName: HelveticaNeue;
@secondaryFontName: HelveticaNeue-Light;
@primaryFontColor: #333333;
@primaryBackgroundColor: #E6E6E6;

Button {
    background-color: @primaryBackgroundColor;
    border-color: #A2A2A2;
    border-width: @primaryBorderWidth;
    font-color: @primaryFontColor;
    font-color-highlighted: #999999;
    font-name: @primaryFontName;
    font-size: 18;
    corner-radius: 7;
}
NavigationBar {
    background-tint-color: @primaryBackgroundColor;
    font-name: @secondaryFontName;
    font-size: 20;
    font-color: @primaryFontColor;
    text-shadow-color: #666666;
    text-shadow-offset: 1,1;
}

Содержание

Использование

Для использования API необходимо подключить модуль NUI:

import NUI

NSS-файл должен находиться в папке проекта. Чтобы применить стили, нужно в методе application(_:didFinishLaunchingWithOptions:) класса AppDelegate прописать:

NUISettings.initWithStylesheet("<stylesheet>")

где вместо <stylesheet> использовать имя NSS-файла без расширения.

В очень редких случаях NUI может не отрендерить некоторые компоненты UIKit. В этом случае можно ему помочь, прописав в методе viewDidLoad() класса соответствующего ViewController'а:

NUIRenderer.renderButton(myButton)

Например, в этом случае к кнопке применяется стиль Button, но можно использовать и собственные стили:

NUIRenderer.renderButton(myButton, withClass: "LargeButton")

Оформление стилевого класса

В NSS-файле прописаны инструкции применения стилей. К примеру, инструкция Button { font-name: Helvetica; } меняет шрифт всех кнопок.

  • Стилевые переменные объявляются сверху
  • К элементу могут быть применены несколько стилевых классов; разрешено наследование

Создание собственных классов

К элементам интерфейса можно применять кастомные классы (например, LargeButton) и осуществлять наследование от одного или множества классов с помощью конструкции Button:LargeButton. Чтобы к какому-то конкретному элементу не применялись никакие стили, нужно задать его класс как none. Кастомный класс элемента можно устанавливать как в Interface Builder, так и в коде.

Применение собственного класса в Interface Builder

Для этого нужно задать runtime attribute для элемента (Identity Inspector → User Defined Runtime Attributes, нажать +). Устанавливаем Key Path как nuiClass, Type как String, и Value как LargeButton (или Button:MyButton, если хотим наследование)

Применение собственного класса в коде

Необходимо импортировать модуль NUI:

import NUI

Потом изменить свойство nuiClass для элемента:

myButton.nuiClass = "LargeButton"

Стилевой класс может наследоваться от любого числа других стилевых классов. Если вы хотите группировать стили, установите nuiClass, например, так: "MyStyleGroup1:MyStyleGroup2:MyButton".

Исключение определённых видов из области действия класса

Если вы не хотите, чтобы к каким-то видам (views) были применены стили (к примеру, это элементы из сторонних библиотек, у которых есть свой собственный стиль), можно указать это в NSS:

Button {
    exclude-views: UIAlertButton;
    exclude-subviews: UITableViewCell,TDBadgedCell,UITextField;
}
  • exclude-views предотвратит применение стиля Button к определённым видам
  • exclude-subviews предотвратит применение стиля Button ко всем подвидам указанных классов.

Если нужно целиком исключить определённые классы, можно сделать это с помощью NUISettings.setGlobalExclusions(_:) в application(_:didFinishLaunchingWithOptions:):

NUISettings.setGlobalExclusions(["ABMemberCell", "ABMultiCell"])

Применение стилей в зависимости от ориентации устройства

Переменные и стилевые классы можно определять для отдельных типов устройств и ориентаций экрана с помощью @media:

@media (device:ipad) {
    /* стили и переменные для iPad */
}

@media (device:iphone) {
    /* стили и переменные для iPhone */
}

@media (orientation:landscape) {
    /* стили и переменные для ландшафтной ориентации */
}

@media (orientation:portrait) {
    /* стили и переменные для портретной ориентации  */
}

@media (orientation:portrait) and (device:ipad) {
    /* стили и переменные для портретной ориентации для iPad */
}

Модификация NSS в режиме реального времени

Оформление приложения можно менять прямо во время его выполнения в симуляторе. Для этого перед инициализацией NUISettings в AppDelegate следует добавить следующее:

if let projectDirectory = NSProcessInfo().environment["PROJECT_DIR"] {
    print("\(projectDirectory)")
    NUISettings.setAutoUpdatePath("\(projectDirectory)/GroupLock/UI.nss")
}

Однако это не будет работать, пока мы не зададим специальную переменную. Для этого нужно открыть настройки схемы:

Зададим Build на вкладке Arguments новую environment variable с именем PROJECT_DIR и значением $PROJECT_DIR:

Теперь, если изменить и сохранить NSS-файл, изменения мгновенно вступят в силу*.

*На самом деле реалтайм-редактирование почему-то работает только в том View Controller, который установлен как Initial. Следует иметь это в виду.

Стилевые классы

Далее перечислены все доступные стилевые классы, соответствующие им классы компонентов интерфейса, а также поддерживаемые свойства. Типы значений (Color, Gradient) описаны ниже.

Важно: список атрибутов для проекта GroupLock может (и, вероятно, будет) меняться, то есть добавятся новые свойства, а названия старых могут измениться в целях соотвествия наименованиям API Apple. Те свойства, которые изменены, отсутствуют или имеют иное название в официальной спецификации NUI, выделены полужирным.

BarButton

UIBarButtonItem

  • background-color (Color)
  • background-color-top/background-color-bottom (Gradient)
  • background-color-highlighted (Color)
  • background-image (Image)
  • background-image-insets (Box)
  • background-tint-color (Color)
  • border-color (Color)
  • border-width (Number)
  • corner-radius (Number)
  • font-color (Color)
  • font-name (FontName)
  • font-size (Number)
  • text-shadow-color (Color)
  • text-shadow-offset (Offset)

BarButtonBack

UIBarButtonItem back button, inherits from BarButton

  • background-color (Color)
  • background-image (Image)
  • background-image-insets (Box)
  • background-tint-color (Color)
  • border-color (Color)
  • border-width (Number)
  • corner-radius (Number)
  • font-color (Color)
  • font-name (FontName)
  • font-size (Number)
  • text-shadow-color (Color)
  • text-shadow-offset (Offset)

Button

UIButton

  • background-color (Color)
  • background-color-top/background-color-bottom (Gradient)
  • background-color-disabled (Color)
  • background-color-highlighted (Color)
  • background-color-selected (Color)
  • background-color-selected-highlighted (Color)
  • background-image (Image)
  • background-image-insets (Box)
  • background-image-disabled (Image)
  • background-image-disabled-insets (Box)
  • background-image-highlighted (Image)
  • background-image-highlighted-insets (Box)
  • background-image-selected (Image)
  • background-image-selected-insets (Box)
  • background-image-selected-disabled (Image)
  • background-image-selected-disabled-insets (Box)
  • background-image-selected-highlighted (Image)
  • background-image-selected-highlighted-insets (Box)
  • border-color (Color)
  • border-width (Number)
  • content-insets (Box)
  • corner-radius (Number)
  • font-color (Color)
  • font-color-disabled (Color)
  • font-color-highlighted (Color)
  • font-color-selected (Color)
  • font-color-selected-disabled (Color)
  • font-color-selected-highlighted (Color)
  • font-name (FontName)
  • font-size (Number)
  • height (Number)
  • image (Image)
  • image-insets (Box)
  • image-disabled (Image)
  • image-disabled-insets (Box)
  • image-highlighted (Image)
  • image-highlighted-insets (Box)
  • image-selected (Image)
  • image-selected-insets (Box)
  • image-selected-disabled (Image)
  • image-selected-disabled-insets (Box)
  • image-selected-highlighted (Image)
  • image-selected-highlighted-insets (Box)
  • padding (Box)
  • shadow-color (Color)
  • shadow-offset (Offset)
  • shadow-opacity (Number)
  • shadow-radius (Number)
  • text-align (TextAlign)
  • text-alpha (Number)
  • text-auto-fit (Boolean)
  • text-shadow-color (Color)
  • text-shadow-color-disabled (Color)
  • text-shadow-color-highlighted (Color)
  • text-shadow-color-selected (Color)
  • text-shadow-color-selected-disabled (Color)
  • text-shadow-color-selected-highlighted (Color)
  • text-shadow-offset (Offset)
  • text-transform (TextTransform)
  • tint-color (Color)
  • title-insets (Box)
  • width (Number)

Control

UIControl

  • background-color (Color)
  • background-image (Image)
  • border-color (Color)
  • border-width (Number)
  • corner-radius (Number)
  • shadow-color (Color)
  • shadow-offset (Offset)
  • shadow-opacity (Number)
  • shadow-radius (Number)

Label

UILabel

  • background-color (Color)
  • border-color (Color)
  • border-width (Number)
  • corner-radius (Number)
  • font-color (Color)
  • font-color-highlighted (Color)
  • font-name (FontName)
  • font-size (Number)
  • height (Number)
  • shadow-color (Color)
  • shadow-offset (Offset)
  • shadow-opacity (Number)
  • shadow-radius (Number)
  • text-align (TextAlign)
  • text-alpha (Number)
  • text-auto-fit (Boolean)
  • text-line-clamp (Integer)
  • text-shadow-color (Color)
  • text-shadow-offset (Offset)
  • text-transform (TextTransform)
  • width (Number)

NavigationBar

UINavigationBar

  • bar-tint-color (Color)
  • background-color (Color)
  • background-color-top/background-color-bottom (Gradient)
  • background-image (Image)
  • background-image-insets (Box)
  • background-tint-color (Color)
  • font-color (Color)
  • font-name (FontName)
  • font-size (Number)
  • shadow-image (Image)
  • text-shadow-color (Color)
  • text-shadow-offset (Offset)
  • title-vertical-offset (Number)

PageControl

UIPageControl

  • color (Color) pageIndicatorTintColor
  • current-color (Color) currentPageIndicatorTintColor

Progress

UIProgressView

  • progress-image (Image)
  • progress-tint-color (Color)
  • track-image (Image)
  • track-tint-color (Color)
  • width (Number)

SearchBar

UISearchBar

  • background-color (Color)
  • background-color-top/background-color-bottom (Gradient)
  • background-image (Image)
  • background-tint-color (Color)
  • scope-background-color (Color)
  • scope-background-image (Image)

SearchBarButton

UISearchBar button, inherits from BarButton

See Button

SearchBarScopeBar

UISearchBar scope bar, inherits from SegmentedControl

See SegmentedControl

SegmentedControl

UISegmentedControl

  • background-color (Color)
  • background-color-selected (Color)
  • background-image (Image)
  • background-image-insets (Box)
  • background-image-selected (Image)
  • background-image-selected-insets (Box)
  • background-tint-color (Color)
  • border-color (Color)
  • border-width (Number)
  • corner-radius (Number)
  • divider-color (Color)
  • divider-image (Image)
  • font-color (Color)
  • font-color-selected (Color)
  • font-name (FontName)
  • font-size (Number)
  • text-shadow-color (Color)
  • text-shadow-color-selected (Color)
  • text-shadow-offset (Offset)
  • text-shadow-offset-selected (Offset)

Slider

UISlider

  • minimum-track-tint-color (Color)
  • maximum-track-tint-color (Color)
  • minimum-value-image (Image)
  • maximum-value-image (Image)
  • thumb-image (Image)
  • thumb-tint-color (Color)

Switch

UISwitch

  • background-color (Color)
  • off-image (Image)
  • off-image-insets (Box)
  • on-image (Image)
  • on-image-insets (Box)
  • on-tint-color (Color)
  • thumb-tint-color (Color)
  • tint-color (Color)

TabBar

UITabBar

  • bar-tint-color (Color)
  • background-color (Color)
  • background-color-top/background-color-bottom (Gradient)
  • background-image (Image)
  • background-image-insets (Box)
  • background-tint-color (Color)
  • selected-image (Image)
  • selected-image-tint-color (Color)

TabBarItem

UITabBarItem

  • background-image-selected (Image)
  • background-image-selected-insets (Box)
  • finished-image (Image)
  • finished-image-selected (Image)
  • font-color (Color)
  • font-color-selected (Color)
  • font-name (FontName)
  • font-size (Number)
  • text-offset (Offset)
  • text-shadow-color (Color)
  • text-shadow-offset (Offset)

Table

UITableView

  • background-color (Color)
  • background-color-top/background-color-bottom (Gradient)
  • row-height (Number)
  • separator-color (Color)
  • separator-style (SeparatorStyle)

TableCell

UITableViewCell

  • tint-color (Color)
  • background-color (Color)
  • background-color-top/background-color-bottom (Gradient)
  • background-color-selected (Color)
  • background-color-top-selected/background-color-bottom-selected (Gradient)
  • font-color (Color)
  • font-color-highlighted (Color)
  • font-name (FontName)
  • font-size (Number)
  • text-align (TextAlign)
  • text-alpha (Number)
  • text-auto-fit (Boolean)
  • text-shadow-color (Color)
  • text-shadow-offset (Offset)

TableCellContentView

The content view of a UITableViewCell

  • all attributes supported by UIView

TableCellDetail

The detail label of a UITableViewCell

  • font-color (Color)
  • font-color-highlighted (Color)
  • font-name (FontName)
  • font-size (Number)
  • text-align (TextAlign)
  • text-alpha (Number)
  • text-auto-fit (Boolean)
  • text-shadow-color (Color)
  • text-shadow-offset (Offset)

Toolbar

UIToolbar

  • background-color (Color)
  • background-image-top (Image)
  • background-image-bottom (Image)
  • background-image-top-landscape (Image)
  • background-image-bottom-landscape (Image)
  • background-tint-color (Color)
  • shadow-image (Image)
  • shadow-image-top (Image)
  • shadow-image-bottom (Image)

TextField

UITextField

  • background-color (Color)
  • background-image (Image)
  • background-image-insets (Box)
  • border-color (Color)
  • border-style (BorderStyle)
  • border-width (Number)
  • corner-radius (Number)
  • font-color (Color)
  • font-name (FontName)
  • font-size (Number)
  • height (Number)
  • padding (Box)
  • shadow-color (Color)
  • shadow-offset (Offset)
  • shadow-opacity (Number)
  • shadow-radius (Number)
  • tint-color (Color)
  • vertical-align (VerticalAlign)
  • width (Number)
  • keyboard-appearance (KeyboardAppearance)

TextView

UITextView

  • font-color (Color)
  • font-name (FontName)
  • font-size (Number)
  • padding (Box)
  • keyboard-appearance (KeyboardAppearance)
  • all other attributes supported by UIView

View

UIView

  • background-color (Color)
  • background-image (Image)
  • border-color (Color)
  • border-width (Number)
  • corner-radius (Number)
  • height (Number)
  • shadow-color (Color)
  • shadow-offset (Offset)
  • shadow-opacity (Number)
  • shadow-radius (Number)
  • width (Number)

Window

UIWindow

  • background-color (Color)

Типы значений

  • Boolean - логический тип (true или false)
  • BorderStyle - стиль границы UITextBorderStyle. Принимает значения none, line, bezel и rounded.
  • Box - последовательность из четырёх целых чисел, обозначающих толщины границ прямоугольников. Аналог свойств CSS padding и margin (верхнее, правое, нижнее, левое). Пример: 15 (прямоугольник с толщиной каждого края в 15px), 10 15 (прямоугольник с толщиной верхнего и нижнего краёв 10px и толщиной правого и левого краёв 15px)
  • Color - цвет в шестнадцатеричной форме (#FF0000 или #FF0000FF с альфа-каналом); либо RGB, RGBA, HSL или HSLA (rgb(255,0,0) или hsla(0.5, 0, 1.0, 0.5)); либо название цвета, для которого у UIColor есть одноимённый метод (red, yellow, clear).
  • FontName - название шрифта. Список доступных на iOS шрифтов можно увидеть здесь. Также может принимать следующие значения:
    • system
    • boldSystem
    • italicSystem
    • blackSystem
    • heavySystem
    • lightSystem
    • mediumSystem
    • semiboldSystem
    • thinSystem
    • ultraLightSystem
  • Gradient - два цвета, образующие вертикальный градиент. background-color-top и background-color-bottom должны быть определены в отдельных свойствах.
  • Image - имя файла изображения.
  • Number - любое число (-1, 4.5)
  • Offset - два числа, представляющие горизонтальное и вертикальное смещение (-1,1)
  • SeparatorStyle - стиль разделителя UITableViewSeparatorStyle. Принимает значения none, single-line и single-line-etched.
  • TextAlign - выравнивание текста (left, right, center)
  • TextTransform - регистр текста (uppercase, lowercase, capitalize, none)
  • VerticalAlign - вертикальное выравнивание (top, center, bottom, fill)
  • KeyboardAppearance - стиль клавиатуры (default, dark, light, alert)

Лицензия

NUI распространяется под лицензией MIT.

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️