Как устроен онбординг в App Store
Контроллер назвали
Заголовок “What’s New…” поместили в контейнер, хотя внутри него только лейбл. Ячейки это
Тулбар обычная вью с фоном
Иконка, текст и кнопки в тулбаре поместили в вертикальный стек. Ненормально большой отсуп снизу тулбара задан фикс значением от layoutMargins.bottom + 89.
#ViewHierarchy
Контроллер назвали
OnboardingViewController
. Не оборачивали в навигейшн. Основной вью выступает не коллекция, а UIScrollView
. Заголовок “What’s New…” поместили в контейнер, хотя внутри него только лейбл. Ячейки это
UIView
, а тайтл-описание находятся в стеке.Тулбар обычная вью с фоном
UIVisualEffectView
. Текст с кнопкой "See how your data..." это UITextView
. Иконка, текст и кнопки в тулбаре поместили в вертикальный стек. Ненормально большой отсуп снизу тулбара задан фикс значением от layoutMargins.bottom + 89.
#ViewHierarchy
👍32🔥15❤2
Как устроен системный калькулятор
Приложение написано на сценах. Root-контроллер называется
Клавиатуру сделали обычный вью и назвали
#ViewHierarchy
Приложение написано на сценах. Root-контроллер называется
DisplayViewController
. Лейбл с введенными цифрами обернули в контейнер DisplayView
и добавили жесты LongPress, Swipe и Tap.Клавиатуру сделали обычный вью и назвали
CalculatorKeypadView
. Кнопки сделаны как UIButton. Все кнопки - объекты одного класса, даже измененный 0. Контейнер лейаутится через AutoLayout, а вот сетку с кнопками расставили с помощью фреймов.#ViewHierarchy
🔥53👍20😱4❤3🎉1
Как устроено приложение Wallet
Сделали на сценах, а лейаут на фреймах. Рут контроллер называется
Каждую карточку поместили в контейнер
Чтобы управлять пространством сверху для тапа - эпл сделала переиспользуемый класс. Каждую карточку поместили в ещё один саб-контейнер с названием
#ViewHierarchy
Сделали на сценах, а лейаут на фреймах. Рут контроллер называется
PKPassGroupsViewController
. Главная вью UIStackView
, в неё поместили: заголовок Wallet, группу карточек, группу бонусных карт и футер.Каждую карточку поместили в контейнер
PKPassGroupView
. Внутри находится скрол-вью, которая отрабатывает жесты и является саб-контейнером карточки. Получается каждая карточка лежит на скрол-вью и управляется жестами на скролле 🤯. Понятия не имею как это работает.Чтобы управлять пространством сверху для тапа - эпл сделала переиспользуемый класс. Каждую карточку поместили в ещё один саб-контейнер с названием
WLEasyToHitCustomView
(переводится легко нажать). Возможно, связали контейнеры в родителе или через делегаты.#ViewHierarchy
🔥35👍9😱8
Как устроено приложение погоды. Пока для iOS 14, постараюсь сделать для iOS 15 тоже.
Написали на сценах. Корневой
Контент лежит на вертикальном скроле. Температуру по часам сделали горизонтальной коллекцией. А вот температуру по дням ниже - обычными вью с автолейаутом, даже не в стеке.
Тулбар сделали кнопками. Сепаратор это
#ViewHierarchy
Написали на сценах. Корневой
UISplitViewController
. Для компактного режима поставили page-контроллер. Фон и анимации сделаны на трех CALayer
и одного градиента.Контент лежит на вертикальном скроле. Температуру по часам сделали горизонтальной коллекцией. А вот температуру по дням ниже - обычными вью с автолейаутом, даже не в стеке.
Тулбар сделали кнопками. Сепаратор это
UIView
c эффектом. Индикатор-точки нативный от page-контроллера.#ViewHierarchy
👍56🔥6😱2
Как устроено приложение Настройки. Сделано нативно.
Сделали на сценах. Root это split-контроллер, проявляется на 5.5+ айфоне и айпадах. Домашний экран назвали
Ячейки, иконки и аксесуары установлены в дефотные вьюхи. На втором скрине кликабельный текст в футере сделали через кастомную футер-вью. Кнопку добавили через формат-текст в
Когда доступно обновление, на домашнем экране появляется ячейка с красным кружком. Это сделали картинкой с лейблом, класс назвали
Иконки ячеек установлены в дефолтный контейнер. Библиотека SPSettingsIcons генерирует такие иконки для SFSymbols кодом.
#ViewHierarchy
Сделали на сценах. Root это split-контроллер, проявляется на 5.5+ айфоне и айпадах. Домашний экран назвали
UIPrefsListController
.Ячейки, иконки и аксесуары установлены в дефотные вьюхи. На втором скрине кликабельный текст в футере сделали через кастомную футер-вью. Кнопку добавили через формат-текст в
UITextView
. Когда доступно обновление, на домашнем экране появляется ячейка с красным кружком. Это сделали картинкой с лейблом, класс назвали
BadgedTableViewCell
. Ячейка аккаунта названа UIAppleAccountCell
.Иконки ячеек установлены в дефолтный контейнер. Библиотека SPSettingsIcons генерирует такие иконки для SFSymbols кодом.
#ViewHierarchy
👍43🔥6❤4
Как устроено приложение Телефон. Cкучно, не считая кнопок.
Приложение сделали на сценах, практически весь лейаут на констрейнтах. В предыдущих разборах я писал как эпл называет классы, но в этом приложении рут-контроллер называется
Контейнер с кнопками лейаутится с помощью автолейаута, но сами кнопки цифра+буквы на фреймах. Кнопки это
Поле ввода
#ViewHierarchy
Приложение сделали на сценах, практически весь лейаут на констрейнтах. В предыдущих разборах я писал как эпл называет классы, но в этом приложении рут-контроллер называется
RootController
. На имена классов забьем.Контейнер с кнопками лейаутится с помощью автолейаута, но сами кнопки цифра+буквы на фреймах. Кнопки это
UIButton
. На каждую кнопку добавили LongPress
жест. Цифра и буквы в кнопке это не текст, а отрисованный слой. Возможно, для PP или это особенный шрифт, а эпл не хочет делиться. Кнопки Позвонить и Удалить это UIButton
, но контент поставили картинкой. Поле ввода
UITextField
, контейнер назвали HandsetDialerLCDView
. В текст-филд добавили много жестов: TextMultiTap
, TapAndAHalf
, VariableDelayLoupe
и Tap
.#ViewHierarchy
👍66❤5🔥5
Как устроен новый segment-бар в AppStore. В навигейшн-бар добавили вручную search-бар и коллекцию. Ячейки коллекции назвали
#ViewHierarchy
GuidedSearchTokenCell
. Крестик в ячейках это не кнопка, а картинка. Зачем-то в каждую ячейку добавили LongPress
жест, но действий по нему не нашёл.#ViewHierarchy
👍50🔥7❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Как устроено приложение Календарь. Сделали на сценах. Навигацию между страницами сделали на скрол-вью, назвали
Ячейки событий сделали двухслойными картинками 🤯. Первый слой - фоновая картинка, а текст внутри события - слой повыше. Скорее всего так сделали для оптимизации скрола.
У события две точки слева внизу и справа вверху. Жест драга добавлен один на весь экран - проверяется какой элемент попал под палец.
#ViewHierarchy
BlockableScrollView
. У скрола включен пейджинг. В памяти хранят вчерашений и завтрашний день - в Календаре используют кастомную систему переиспользования на скроле. Контейнером установили UINavigationController
.Ячейки событий сделали двухслойными картинками 🤯. Первый слой - фоновая картинка, а текст внутри события - слой повыше. Скорее всего так сделали для оптимизации скрола.
У события две точки слева внизу и справа вверху. Жест драга добавлен один на весь экран - проверяется какой элемент попал под палец.
#ViewHierarchy
🔥46👍15🐳7😱3❤2👏2⚡1🤩1🏆1