Devs vs. Designéři: Co potřebujete vědět. Epizoda 1.

Zahajujeme řadu příspěvků o výzvách, kterým čelí světová třída Cuberto, kde má přednost design s velkým písmenem „D“. Budeme sdílet sdílené zkušenosti s vývojem aplikací a ukážeme vám, jak naši výjimeční vývojáři převádějí nové nápady do pevné reality. Zřeknutí se odpovědnosti: Naše řešení nemají sloužit jako vodítko ani odkaz na vývoj mobilních aplikací.

Na začátku stojí za zmínku, že logicky smýšlející devs mají těžké pochopení, jak je dokonce možné nakreslit adaptivní design, aniž by se každá maličkost na obrazovce smartphonu spojila s rozlišením obrazovky. Na druhé straně esteticky motivovaní návrháři nevidí, co je tak těžké na tom, aby bylo tlačítko a blok textu umístěno na jediný řádek v iPhone 8 a stejný v iPhone SE, ale společně s tlačítkem pro zadání. Toto je jen malý příklad typických střetů designérů a vývojářů, ale naše společnost vždy najde kompromis, který nechává všechny šťastné. S sebou: design a vývoj je jediný celek. Neměli byste objednávat design ze studia, které nemá zkušenosti s vývojem. Jinak to bude kreslit makety bez logiky vývoje.

Po letech práce s různými aplikacemi jsme vypracovali několik hlavních principů. Například neztrácíme čas na univerzálních komponentách, které lze použít v dalších budoucích projektech. Naše filozofie designu vyžaduje jedinečný přístup ke každému projektu - neděláme šablony pro řezání souborů cookie. Věnujeme také spoustu pozornosti podrobnostem uživatelského rozhraní a vynakládáme veškeré úsilí, abychom vytvořili elegantní, podporovaný kód a přitom stále poskytujeme několik „řešení“ sem a tam pro dosažení požadovaného účinku.

Pojďme se tedy podívat na tento příklad:

Co vidíme:

  • UIView s názvem sekce se zvedne a převede se do názvu nového kontroléru UIViewController.
  • Mezitím se UIView mírně změní (pozadí a barva písma).
  • UIViews se zbývajícími částmi létají dolů za vybraným UIView.

Co jiného jsme vzali v úvahu během vývoje:

  • Svitek může být v libovolné poloze.
  • Může existovat libovolné množství sekcí. V tomto příkladu se zaměřujeme pouze na tři.
  • Animace musí krásně fungovat na všech zařízeních Apple, nejen na iPhone 8.

Vypadá to jako UITableView se záhlavím (název, tlačítko profilu), UITableViewCells (sekce) a zápatí. Samozřejmě je možné použít UICollectionView se všemi jeho magiemi, ale v tomto případě by to byla jen zbytečná komplikace.

Proč je dobré používat UITableView ve výchozím stavu:

  • Přejděte (ano, je to zřejmé).
  • Neomezený počet buněk.
  • Přetáhněte k aktualizaci.
  • Můžeme do buňky vložit stejný UIView, jako tomu bylo v záhlaví na druhé obrazovce.

Je možné použít buňky namísto záhlaví a zápatí, ale předem jsme věděli, že budou použity pouze jednou, takže více typů buněk nedávalo smysl.

Sestavili jsme pracovní itinerář a tady je to, co jsme museli udělat:

1. Změna vzhledu vybrané buňky (tmavý až světlý).

2. Změna pozice vybrané buňky (její transformace do názvu).

3. Změna polohy zbývajících buněk (posunutí buněk směrem dolů).

Naše postupné řešení:

1. Animace vzhledu buňky je možná ve skutečném zobrazení UIView pomocí jednoduchého převodu UIView.

2. Musíme přesunout buňku do pozice titulu a poté změnit její UIView na titul. Místo přesunutí samotné buňky do nového názvu řadiče jsme posunuli nadpis směrem dolů a pak jej jednoduše umístili na místo. K přechodu mezi řadiči jsme použili UIViewControllerAnimatedTransitioning.

3. Předchozí krok nás osvobodí od toho, abychom se starali o to, která buňka je umístěna vpředu a která vzadu, protože je můžeme všechny posunout dolů. Věděli jsme však, že přesouvání buněk uvnitř skutečné tabulky může být složité, protože automaticky začne používat různé vložení a velikost obsahu. Takže jsme museli do kódu implementovat trochu kouzelnického řešení. Pokud nastavíte clipToBounds na false, můžete přesunout vnitřní UIView buňky za hranice buněk a vytvořit tak efekt přesunu buněk samotných.

Nyní se podívejme, jak to vypadá v samotném kódu.

Změna vzhledu vybrané buňky:

// Veřejná metoda UIView, která je do buňky.
func setStyle (_style: Style) {
         self.style = styl
 
         styl přepínání {
                    případ .lightContent:
                                lblTitle.fontColor = .white
                                view.backgroundColor = .black
                    case .darkContent:
                                lblTitle.fontColor = .black
                                view.backgroundColor = .white
         }
}

Místo změny stylu vlastností používáme funkci setStyle. Jak ukazují zkušenosti, musí být tyto metody během procesu vývoje aktualizovány, takže je snazší to vzít v úvahu a napsat funkci, spíše než používat nativní nastavovač.

Změna pozice vybrané buňky:

/ *
Tento kód je v cílovém UIViewControlleru.
 
Nejprve jsme změnili barvu pozadí cílové UIViewController na průhlednou, aby byl pod ní viditelný počáteční ovladač.
 
Potom přesuneme UIView s názvem cílového řadiče do výchozí polohy vybrané buňky řadiče. Odkaz na buňku jsme vložili do cílového UIViewController klepnutím.
 
Nakonec spolu s animací vrátíme barvu pozadí a pozici nadpisu UIViewControlleru do původního stavu.
* /

view.backgroundColor = .clear
 
let frame = view.convert (categoryView.frame, from: categoryView.superview) listCategoryView.transform = CGAffineTransform (translationX: 0, y: frame.minY - listCategoryView.frame.minY)
 
 
UIView.animate (withDuration: itemDuration, delay: 0, options: [.curveEaseOut], animations: {
       self.view.backgroundColor = .appBgColor
       self.listCategoryView.transform = .identity
 
})

Změna umístění buněk:

nechť buňky = cellsForAnimation.filter {! $ 0.isSelected}
tappedListCategoryView? aalfa = 0
let itemDelay = trvání / TimeInterval (3 * max (1, počet buněk)
)
let itemDuration = duration - itemDelay * TimeInterval (max (1, cell.count)
 - 1)
pro (index, buňka) v buňkách.reversed (). enumerated () {
        UIView.animate (withDuration: itemDuration, delay:
        TimeInterval (index) * itemDelay, možnosti: [. CurveEaseOut],
        animace: {
                  cell.contentView.subviews.first? .transform =
        CGAffineTransform (translationX: 0, y:
        self.tableView.rowHeight * 1.25)
        })
}

Nedělali jsme zpětnou animaci z několika důvodů:

  1. Cílový UIViewController má mnoho prvků seznamu. To znamená, že při návratu na hlavní obrazovku může uživatel posouvat záhlaví mimo viditelnost a není jasné, jak převést název do buňky.
  2. Implementace zpětné animace do interaktivního pop-gesta by vyžadovala dlouhý a obtížný proces. Vytváření jiné animace pro interaktivní pop-gesto a pro tlačítko Zpět není vůbec nejlepší nápad.

Vybalili jsme jeden z nejjednodušších příkladů animace, který Cuberto vytvořil. Náš další příspěvek představí něco trochu složitějšího a univerzálnějšího.

Cuberto udává trend v kreativních webech a mobilních aplikacích. Naše oceňované designy a inovativní špičkové produkty pohánějí digitální a mobilní znalosti. [email protected]

Sledujte nás na Dribbble a Instagramu