Статьи

Гибридное меню маркировки / Компонент Radial Slider Swift для iOS

За последние несколько недель я развивал свой оригинальный  компонент меню маркировки для iOS  и внес несколько довольно существенных изменений:

  • Распределение пунктов меню по всему кругу означало, что часто некоторые пункты были скрыты моим пальцем. Хотя расположение меню в центре экрана несколько смягчило это, я теперь изменил раскладку на полукруг с 9 до 3 часов.
  • Меню маркировки теперь появляется в месте касания.
  • Пункты маркировки меню теперь могут быть радиальными ползунками для установки нормализованного значения. Радиальные ползунки располагаются под местом касания. Перемещая касание от начала координат и, следовательно, увеличивая радиус радиального набора, пользователь может увеличить размер радиального набора для внесения очень точных изменений.
  • Элементы меню Маркировка могут быть  выбраны  и могут быть заданы  категории

Чтобы продемонстрировать эти изменения, я обновил демонстрационное приложение. Приложение позволяет пользователю добавлять различные фильтры размытия и резкости и обновлять величины размытия и резкости наряду с яркостью, насыщенностью и контрастностью. 

Меню верхнего уровня содержит три элемента:  размытиерезкость  и  настройка цвета .

Blur  содержит три элемента для выбора типа размытия и слайд. Его определение в Swift выглядит так:

    let blurAmountSlider = FMMarkingMenuItem(label: "Blur Amount", valueSliderValue: 0)

    let blurTopLevel = FMMarkingMenuItem(label: FilterCategories.Blur.rawValue, subItems:[
        FMMarkingMenuItem(label: FilterNames.CIGaussianBlur.rawValue, category: FilterCategories.Blur.rawValue, isSelected: true),
        FMMarkingMenuItem(label: FilterNames.CIBoxBlur.rawValue, category: FilterCategories.Blur.rawValue),
        FMMarkingMenuItem(label: FilterNames.CIDiscBlur.rawValue, category: FilterCategories.Blur.rawValue),
        blurAmountSlider])

Здесь вы можете увидеть, что слайдер использует конструктор valueSliderValue, который устанавливает для свойства isValueSlider значение true. Когда пользователь отмечает этот пункт меню, появляется радиальный бегунок.

Вы также можете заметить, что остальные три элемента имеют   набор категорий . Хотя компонент меню маркировки на самом деле не заботится о категориях, главное приложение может делать это. В моем демонстрационном приложении я хочу, чтобы пользователь мог выбрать только один тип размытия; либо  гауссовокоробка  или  диск. 

Для этого все три элемента имеют одну и ту же   категорию Blur, и в моем методе делегата FMMarkingMenuItemSelected я  вызываю setExclusivelySelected  для принудительного применения только одного выбранного элемента меню на категорию:

    FMMarkingMenu.setExclusivelySelected(markingMenuItem, markingMenuItems: markingMenuItems)

Выбранные пункты меню окрашены в красный цвет, и их свойство isSelected установлено в значение true.

Изменения макета задаются некоторыми логическими свойствами. Если и когда я опубликую этот компонент в OS X (где использование мыши означает, что мои пухлые пальцы не будут скрывать меню), макет можно вернуть в полный круг, установив layoutMode в FMMarkingMenuLayoutMode.Circular.

Эта версия  FMMarkingMenu  написана на Swift 2.0 под Xcode 7, и я смог протестировать ее только на iPad под управлением iOS 9. В коде свободно используется новый синтаксис Guard, который мне очень нравится (см.  Эту замечательную статью от Наташа Робот,  чтобы узнать больше об  охране). Возможность опционально связать загрузку констант и легко выйти из метода на ранней стадии, если один из них завершится неудачно, делает кодирование быстрым:

    guard let category = FilterCategories(rawValue: markingMenuItem.category!),
        filterName = FilterNames(rawValue: markingMenuItem.label)?.rawValue else
    {
        return
    }

Я надеюсь, что этот пост дает хорошее представление о компоненте. Пожалуйста, свяжитесь со мной через Twitter ( @FlexMonkey ), если у вас есть вопросы или комментарии. Исходный код проекта находится в  моем репозитории GitHub здесь

Наконец, заметка о патентных вопросах. Я связался с Autodesk, чтобы спросить о проблемах нарушения патентных прав без успеха. Я уверен, что мой компонент достаточно отличается от их (особенно со всеми этими недавними изменениями), что нет никаких нарушений. Кроме того, существует множество «предшествующего уровня техники» (например,  Дон Хопкинс много лет играл с радиальными меню в Sims), а в других приложениях (например,  Modo  и  Blender ) используются аналогичные парадигмы взаимодействия.