Дэўс супраць дызайнераў: што трэба ведаць. Эпізод №1.

Мы ініцыюем шэраг паведамленняў пра праблемы, якія стаяць перад купэмі сусветнага класа Куберта, дзе дызайн з вялікай літары "D" мае перавагу. Мы падзелімся досведам распрацоўкі не шаблонных прыкладанняў і дамо вам паглядзець, як нашы выключныя распрацоўшчыкі ператвараюць новыя ідэі ў цвёрдую рэальнасць. Адмова ад адказнасці: нашы рашэнні не прызначаны для таго, каб стаць даведнікам або спасылкай на развіццё мабільных дадаткаў.

У самым пачатку варта адзначыць, што лагічна настроеныя распрацоўшчыкі дрэнна разумеюць, як можна зрабіць эскіз адаптыўнага дызайну без прывязкі кожнай дробязі да экрана смартфона да дазволу экрана. З іншага боку, эстэтычна дызайнеры не бачаць, што так складана ставіць кнопку і блок тэксту ў адзін радок як у iPhone 8, так і ў iPhone SE, але разам з кнопкай уводу. Гэта толькі невялікі прыклад тыповых сутычак дызайнера / распрацоўшчыка, але наша кампанія заўсёды знаходзіць кампраміс, які пакідае ўсіх шчаслівымі. Выцяжка: дызайн і распрацоўка - гэта адзінае цэлае. Вы не павінны заказваць дызайн у студыі, якая не мае вопыту распрацоўкі. У адваротным выпадку гэта будзе маляванне макетаў без логікі развіцця.

Пасля многіх гадоў працы з рознымі прыкладаннямі мы знайшлі некаторыя кіруючыя прынцыпы. Напрыклад, мы не марнуем час на універсальныя кампаненты, якія можна выкарыстоўваць у іншых будучых праектах. Наша філасофія дызайну патрабуе унікальнага падыходу да кожнага праекта - мы не робім шаблоны для рэзкі печыва. Мы таксама прысвячаем тону ўвагі дэталям карыстацкага інтэрфейсу і прыкладаем усе намаганні, каб стварыць элегантны, які падтрымліваецца код, у той час як тут усё магчыма, каб дасягнуць жаданага эфекту.

Такім чынам, давайце разгледзім гэты прыклад:

Што мы бачым:

  • UIView з імем раздзела здымаецца і пераўтвараецца ў загаловак новага UIViewController.
  • Між тым, UIView нязначна мяняецца (колер фону і шрыфта).
  • UIView з астатнімі раздзеламі ляціць уніз ззаду абранага 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: Стыль) {
         self.style = стыль
 
         стыль пераключэння {
                    выпадак .lightContent:
                                lblTitle.fontColor =. белы
                                view.backgroundColor = .блэк
                    выпадак .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, у: frame.minY - listCategoryView.frame.minY)
 
 
UIView.animate (withDuration: itemDuration, затрымка: 0, параметры: [.curveEaseOut], анімацыя: {
       self.view.backgroundColor = .appBgColor
       self.listCategoryView.transform = .развітасць
 
})

Змена месцазнаходжання клеткі:

хай ячэйкі = CellForAnimation.filter {! $ 0.isSelected}
tappedListCategoryView? .alpha = 0
хай itemDelay = Працягласць / TimeInterval (максімум 3 * (1, cell.count)
)
хай itemDuration = Працягласць - itemDelay * TimeInterval (макс. (1, Cell.count)
 - 1)
для (індэкс, вочка) у Cell.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