Devs vs. Designers: Какво трябва да знаете Епизод 1.

Започваме поредица от публикации за предизвикателствата, пред които са изправени разработчиците на Куберто от световна класа, където дизайнът с главна буква „D“ има предимство. Ще споделим опит за разработка на приложения без шаблон и ще ви дадем представа как нашите изключителни разработчици превръщат нови идеи в солидна реалност. Отказ от отговорност: нашите решения не са предназначени да бъдат ръководство или препратка към разработването на мобилни приложения.

В началото си струва да споменем, че логично настроените разработчици трудно разбират как е възможно дори да скицират адаптивен дизайн, без да свързват всяко малко нещо на екрана на смартфона с резолюцията на екрана. От друга страна, естетически мотивираните дизайнери не виждат какво е толкова трудно в поставянето на бутон и блок текст на един ред както в iPhone 8, така и в iPhone 8, както и в iPhone SE, но заедно с бутона за въвеждане. Това е само малък пример за типични сблъсъци между дизайнери и разработчици, но нашата компания винаги намира компромис, който оставя всички щастливи. Извличането: дизайнът и разработката са едно цяло. Не бива да поръчвате дизайн от студио, което няма опит в разработката. В противен случай той ще рисува макети без логика за развитие.

След години работа с разнообразни приложения, ние открихме някои ръководни принципи. Например, не губим време за универсални компоненти, които могат да бъдат използвани в други бъдещи проекти. Нашата философия за дизайн изисква уникален подход към всеки проект - не правим шаблони за изрязване на бисквитки. Ние също така отделяме много внимание на детайлите на потребителския интерфейс и полагаме всички усилия да генерираме елегантен, поддържан код, като все пак даваме възможност за няколко „заобикаляния“ тук и там за постигане на желания ефект.

Нека разгледаме този пример:

Какво виждаме:

  • UIView с името на секцията се изстрелва и се трансформира в заглавието на новия UIViewController.
  • Междувременно UIView леко се променя (цвят на фона и шрифта).
  • UIViews с останалите секции летят надолу зад избрания UIView.

Какво още взехме предвид при разработването:

  • Превъртането може да бъде във всяка позиция.
  • Може да има произволно количество секции. В този пример се фокусираме само върху три.
  • Анимацията трябва да работи прекрасно на всички устройства на Apple, а не само на iPhone 8.

Това изглежда като UITableView с заглавка (заглавие, бутон на профила), UITableViewCells (секции) и долен колонтитул. Разбира се, че е възможно да се използва UICollectionView с цялата му магия, но в този случай това би било просто ненужно усложнение.

Защо е добра идея да използвате UITableView извън кутията:

  • Превъртете (да, това е очевидно).
  • Неограничен брой клетки.
  • Издърпайте към опресняване.
  • Можем да поставим същия UIView вътре в клетката, както беше в заглавката на втория екран.

Възможно е да използвате клетки вместо заглавки и долни колонтитули, но предварително знаехме, че те ще се използват само веднъж, така че да направите няколко типа клетки няма смисъл.

Съставихме работен маршрут и ето какво трябва да направим:

1. Промяна на външния вид на избраната клетка (тъмна към светла).

2. Промяна на позицията на избраната клетка (превръщането й в заглавие).

3. Промяна на позицията на останалите клетки (изместване на клетките надолу).

Нашето стъпка по стъпка решение:

1. Анимирането на външния вид на клетката е възможно в действителния UIView с обикновен UIView.transition.

2. Трябва да преместим клетката в заглавна позиция и след това да променим нейния UIView в заглавие. Вместо да преместим самата клетка в новото заглавие на контролера, ние изместихме заглавието надолу и след това просто го поставихме на мястото си. За преход между контролери използвахме UIViewControllerAnimatedTransitioning.

3. Предишната стъпка ни освобождава от суетене коя клетка е разположена отпред и коя отзад, тъй като можем просто да изместим всички тях надолу. Но ние знаехме, че преместването на клетките в действителната таблица може да бъде сложно, тъй като автоматично започва да прилага различни вмъквания и contentSize. Затова трябваше да внедрим малко преодоляване на съветника в кода. Ако зададете clipToBounds на false, тогава можете да преместите вътрешния UIView на клетката извън границите на клетката, създавайки ефекта от преместването на самите клетки.

Сега нека да проверим как изглежда това в самия код.

Промяна на външния вид на избрана клетка:

// Публичен метод UIView, който е в клетката.
func setStyle (_style: Style) {
         self.style = стил
 
         стил на превключване {
                    случай .lightContent:
                                lblTitle.fontColor =. бял
                                view.backgroundColor =. черно
                    case .darkContent:
                                lblTitle.fontColor =. черно
                                view.backgroundColor =. бял
         }
}

Вместо да променяме стила на свойството, ние използваме функцията setStyle. Както показва опитът, тези методи трябва да се актуализират по време на процеса на разработка, така че е по-лесно да се вземе предвид това и да се напише функция, а не да се използва родния сетер.

Промяна на позицията на избрана клетка:

/ *
Този код е в целевия UIViewController.
 
Първо променихме фоновия цвят на целевия UIViewController на прозрачен, за да видим първоначалния контролер под него.
 
След това преместваме UIView с заглавието на целевия контролер в избраната позиция на началния контролер. Поставяме връзката към клетката в целевия UIViewController с кран.
 
В крайна сметка, заедно с анимацията, връщаме фоновия цвят и позицията на заглавието на UIViewController в първоначалното състояние.
* /

view.backgroundColor =. ясно
 
нека frame = view.convert (categoryView.frame, от: categoryView.superview) listCategoryView.transform = CGAffineTransform (преводX: 0, y: frame.minY - listCategoryView.frame.minY)
 
 
UIView.animate (withDuration: itemDuration, забавяне: 0, опции: [.curveEaseOut], анимации: {
       self.view.backgroundColor = .appBgColor
       self.listCategoryView.transform = .identity
 
})

Промяна на местоположението на клетките:

нека клетки = клеткиForAnimation.filter {! $ 0.isSelected}
tappedListCategoryView? .alpha = 0
нека itemDelay = продължителност / TimeInterval (3 * макс (1, брой клетки)
)
нека itemDuration = продължителност - itemDelay * TimeInterval (макс. (1, брой клетки)
 - 1)
за (индекс, клетка) в клетки.reversed (). изброено () {
        UIView.animate (withDuration: itemDuration, забавяне:
        TimeInterval (индекс) * itemDelay, опции: [. CurveEaseOut],
        анимации: {
                  cell.contentView.subviews.first? .transform =
        CGAffineTransform (преводX: 0, y:
        self.tableView.rowHeight * 1.25)
        })
}

Не направихме обратна анимация поради няколко причини:

  1. Целевият UIViewController има много елементи от списъка. Това означава, че когато се връща на главния екран, потребителят може да превърта заглавката извън видимостта и не е ясно как да трансформира заглавието в клетката.
  2. Прилагането на обратна анимация в интерактивния поп-жест ще изисква дълъг и труден процес. Направата на различна анимация за интерактивен поп-жест и за бутона Назад не е най-добрата идея, така или иначе.

Разопаковахме един от най-простите примери за анимация, които Куберто направи. Следващият ни пост ще включва нещо малко по-сложно и универсално.

Cuberto задава тенденцията в креативните уебсайтове и мобилните приложения. Дигиталната и мобилната експертиза упълномощават нашите наградени дизайни и иновативни продукти от висок клас. [email protected]

Следвайте ни в Dribbble и Instagram