Пишем код

Заметки о .net разработке

Комфортная Android-like верстка в iOS (XibFree)

without comments

Давайте признаем очевидное. Верстка экранов в iOS ужасна. Сравнивая с html, с WPF, с Android, с WinPhone — везде iOS проигрывает.
Верстка в iOS исторически напоминала WinForms (с аналогом якорей-Anchor’ов в виде AutoresizingMask). Однако WinForms уже давно отошло в прошлое, а iOS всё живет и живет :)
Да, на смену AutoresizingMask пришли Constraints, но работа с ними до жути неудобна, дизайнер ненаглядный, а результат работы — нечитаемый уже через неделю после создания.

А вообще, помимо удобства, наибольшей проблемой, конечно, становится динамическая верстка элементов. Если мы пришли из мира WPF/Android, то скучать по простейшему StackLayout/LinearLayout будем очень-очень сильно.
Возьмем например типичную задача: верстка элементов в строчку, при этом некоторые элементы могут быть спрятаны.

<br />
<StackLayout><br />
    <Button /><br />
    <Button Visibility="Collapsed" /><br />
    <Button /><br />
</StackLayout><br />

Чтобы задать такую верстку в iOS — придется изрядно помучаться. В случае со «старым» AutoresizingMask — это и вовсе невозможно, и придется разруливать координаты кнопок руками при каждом изменении видимости кнопок.
В случае «нового» и «продвинутого» LayoutConstraints — это, конечно, возможно, но намного сложнее и куда менее очевидно, чем xml-верстка.

Решение нашлось на просторах сети — XibFree. Это довольно простой layout-движок, который позволяет верстать экраны в iOS без использования .xib-файлов или Storyboard’ов, полностью в c#-файлах.
Вот как выглядит верстка, аналогичная верхней:
<br />
var layout = new LinearLayout(Orientation.Horizontal)<br />
{<br />
    Padding = new UIEdgeInsets(10, 10, 10, 10),<br />
    LayoutParameters = new LayoutParameters()<br />
    {<br />
        Width = AutoSize.FillParent,<br />
        Height = AutoSize.WrapContent,<br />
    },<br />
    SubViews = new View[]<br />
    {<br />
        new NativeView()<br />
        {<br />
            View = new UIButton()<br />
            {<br />
            },<br />
			Init = v => {<br />
				v.As<UIButton>().SetTitle("Test1", UIControlState.Normal)<br />
			},<br />
            LayoutParameters = new LayoutParameters(AutoSize.WrapContent, AutoSize.WrapContent)<br />
        },<br />
        new NativeView()<br />
        {<br />
            View = new UIButton()<br />
            {<br />
            },<br />
			Init = v => {<br />
				v.As<UIButton>().SetTitle("Test2", UIControlState.Normal)<br />
			},<br />
            LayoutParameters = new LayoutParameters(AutoSize.WrapContent, AutoSize.WrapContent)<br />
			Gone = true,<br />
        },<br />
		new NativeView()<br />
        {<br />
            View = new UIButton()<br />
            {<br />
            },<br />
			Init = v => {<br />
				v.As<UIButton>().SetTitle("Test3", UIControlState.Normal)<br />
			},<br />
            LayoutParameters = new LayoutParameters(AutoSize.WrapContent, AutoSize.WrapContent)<br />
			Gone = true,<br />
        },<br />
    },<br />
};<br />

А в чем же отличие от Xamarin.Forms, спросите вы? Да, действительно, есть некоторое сходство. Основное отличие же в том, что XibFree реализует исключительно View-часть и не претендует на кроссплатформенность. За счет этого XibFree работает быстрее, практически не влияет на минимальный размер приложения (который для Xamarin.Forms — 32Mb), и не накладывает на iOS-разработчика никаких ограничений (кроме языка c#, если кто-то это считает ограничением :)).

Из преимуществ можно выделить:

  1. Простоту освоения, схожесть с аналогами на Андроид/WPF
  2. Простота использования, отсутствие каких-либо абстракций над UI-элементами (используются напрямую UIButton/UILabel/etc.)
  3. Счастье при создании динамической верстки, под разные разрешения
  4. Отсутствие претензий по производительности
  5. Удобство при работе с системой контроля версий и поддержке — XibFree это код, а не нечитаемый xml как в случае xib и Storyboard

Из объективных минусов можно выделить «заброшенность» библиотеки: оригинальные разработчики не обновляли XibFree с января 2015. Тем не менее, весь функционал работает и вмешательства не требует.
Возможно, стандартных LinearLayout/FrameLayout будет и недостаточно для чересчур изощренных экранов — это тоже надо иметь ввиду.
Тем не менее, мы в своих проектах с такими ограничениями не столкнулись, активно используем XibFree и исключительно довольны.
Рекомендую :)

P.S. Некоторые существующие проблемы мы самостоятельно решаем. В частности, в нашем форке мы добавили WrapLayout, ведется работа над GridLayout.

Подытоживая, список ссылок:

Опубликовать в Facebook
Опубликовать в Google Plus

Written by Shaddix

Май 11th, 2016 at 11:39 дп

Leave a Reply