„Devs“ ir „Dizaineriai“: ką reikia žinoti. 1 epizodas.

Mes pradedame pranešimų ciklą apie iššūkius, su kuriais susiduria „Cuberto“ pasaulinės klasės kūriniai, kur pirmenybė teikiama dizainui su didžiąja raide „D“. Dalinsimės ne šabloninių programų kūrimo patirtimi ir pažvelgsime, kaip mūsų išskirtiniai kūrėjai paverčia naujas idėjas tvirta realybe. Atsakomybės atsisakymas: mūsų sprendimai nėra skirti kaip vadovas ar nuoroda į programų mobiliesiems kūrimą.

Iš pradžių verta paminėti, kad logiškai mąstantiems kūrėjams sunku suprasti, kaip net įmanoma nubraižyti adaptyvų dizainą, nesiejant kiekvieno mažiausio dalyko išmaniojo telefono ekrane su ekrano skiriamąja geba. Kita vertus, estetiškai motyvuoti dizaineriai nemato, kas yra taip sudėtinga, kai mygtukas ir teksto blokas dedami vienoje eilutėje tiek „iPhone 8“, tiek ir „iPhone SE“, bet kartu su įvesties mygtuku. Tai tik nedidelis tipiškų dizainerių / kūrėjų susidūrimų pavyzdys, tačiau mūsų įmonė visada randa kompromisą, kuris visiems teikia džiaugsmą. Įsigijimas: dizainas ir tobulinimas yra viena visuma. Nereikėtų užsakyti dizaino iš studijos, kurioje nėra plėtros patirties. Priešingu atveju bus piešiami maketai be vystymosi logikos.

Po daugelio metų darbo su įvairiomis programomis mes nustatėme keletą pagrindinių principų. Pavyzdžiui, nešvaistome laiko universaliems komponentams, kurie gali būti naudojami kituose būsimuose projektuose. Mūsų dizaino filosofija reikalauja unikalaus požiūrio į kiekvieną projektą - mes nedarome slapukų pjaustymo šablonų. Mes taip pat skiriame daug dėmesio vartotojo sąsajos detalėms ir dedame visas pastangas, kad sukurtume elegantišką, palaikomą kodą, kartu suteikdami keletą „būdų“ čia ir ten pasiekti norimą efektą.

Pažvelkime į šį pavyzdį:

Ką mes matome:

  • „UIView“ su skyriaus pavadinimu išauga ir virsta naujojo „UIViewController“ pavadinimu.
  • Tuo tarpu UIView šiek tiek keičiasi (fonas ir šrifto spalva).
  • UIView su likusiomis sekcijomis skrenda žemyn už pasirinktą UIView.

Į ką dar atsižvelgėme kurdami:

  • Slinkimas gali būti bet kurioje padėtyje.
  • Skyrių gali būti bet kiek. Šiame pavyzdyje mes sutelkiame dėmesį tik į tris.
  • Animacija turi gražiai veikti visuose „Apple“ įrenginiuose, ne tik „iPhone 8“.

Tai atrodo kaip „UITableView“ su antrašte (pavadinimas, profilio mygtukas), „UITableViewCells“ (skyriai) ir poraštė. Žinoma, „UICollectionView“ galima naudoti su visa jo magija, tačiau tokiu atveju tai būtų buvusi tiesiog nereikalinga komplikacija.

Kodėl verta naudoti „UITableView“ iš „dėžutės“:

  • Slinkite (taip, tai akivaizdu).
  • Neribotas ląstelių skaičius.
  • Atnaujinti.
  • Tą pačią „UIView“ galime įdėti į langelį, kaip ji buvo antraštėje antrame ekrane.

Galima naudoti langelius, o ne antraštes ir poraštes, tačiau iš anksto žinojome, kad jie bus naudojami tik vieną kartą, todėl sukurti kelis langelių tipus nebuvo prasmės.

Mes sudarėme darbo programą ir štai ką turėjome padaryti:

1. Pakeiskite pasirinktos ląstelės išvaizdą (nuo tamsios iki šviesios).

2. Pasirinktos langelio padėties keitimas (pavertimas pavadinimu).

3. Likusių ląstelių padėties keitimas (ląstelių perkėlimas žemyn).

Mūsų žingsnis po žingsnio sprendimas:

1. Animuoti langelio išvaizdą galima realiame „UIView“ paprastu UIView.transformacija.

2. Turime perkelti langelį į pavadinimo vietą, o tada pakeisti jo UIView į pavadinimą. Užuot perkėlę pačią langelį į naujojo valdiklio pavadinimą, mes jį perkėlėme žemyn, o tada tiesiog įdėjome į vietą. Norėdami pereiti iš valdiklių, mes naudojome „UIViewControllerAnimatedTransitioning“.

3. Ankstesnis žingsnis atleido mus nuo nerimo dėl to, kuri ląstelė yra priekyje, o kuri - užpakalinėje, nes mes galime tiesiog visas jas perkelti žemyn. Bet mes žinojome, kad langelių perkėlimas į faktinę lentelę gali būti sudėtingas, nes jis automatiškai pradeda naudoti įvairius intarpus ir turinio dydį. Taigi, kodą reikėjo įdiegti šiek tiek apeinant burtus. Jei nustatysite „clipToBounds“ kaip „false“, tuomet galėsite perkelti langelio vidinį UIView už langelio ribų, sukurdami pačių langelių perkėlimo efektą.

Dabar patikrinkime, kaip tai atrodo pačiame kode.

Keisti pasirinkto langelio išvaizdą:

// Viešas UIView metodas, kuris yra ląstelėje.
func setStyle (_style: Style) {
         self.style = stilius
 
         perjungti stilių {
                    atvejis .lightContent:
                                lblTitle.fontColor = .balta
                                view.backgroundColor = .black
                    atvejis .darkContent:
                                lblTitle.fontColor = .black
                                view.backgroundColor = .balta
         }
}

Užuot pakeitę nuosavybės stilių, naudojame „setStyle“ funkciją. Kaip rodo patirtis, šie metodai turi būti atnaujinti kuriant, todėl lengviau atsižvelgti į tai ir rašyti funkciją, o ne naudoti vietinį seterį.

Pasirinktos langelio padėties keitimas:

/ *
Šis kodas yra tiksliniame „UIViewController“.
 
Pirmiausia pakeitėme tikslinės „UIViewController“ fono spalvą į skaidrią, kad pradinis valdiklis būtų matomas po juo.
 
Tada „UIView“ su tikslinio valdiklio pavadinimu perkeliame į pradinę valdiklio pasirinktą langelio padėtį. Mes įdėjome ląstelės saitą į tikslinį „UIViewController“ su čiaupu.
 
Galų gale kartu su animacija grąžinsime „UIViewController“ foninę spalvą ir pavadinimo padėtį į pradinę būseną.
* /

view.backgroundColor = .išvalyti
 
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
 
})

Ląstelių vietos keitimas:

tegul ląstelės = cellForAnimation.filter {! $ 0.isSelected}
„tappedListCategoryView“ .alfa = 0
let itemDelay = trukmė / TimeInterval (daugiausia 3 *) (1, ląstelių.skaičiuoti)
)
tegul itemDuration = trukmė - itemDelay * TimeInterval (daugiausia (1, ląstelės.skaičiuoti)
 - 1)
už (rodyklė, langelis) ląstelėse.reversas (). išvardytas () {
        UIView.animate (withDuration: itemDuration, delay:
        „TimeInterval“ (rodyklė) * „itemDelay“, parinktys: [. CurveEaseOut],
        animacijos: {
                  cell.contentView.subviews.first? .transform =
        „CGAffineTransform“ (vertimasX: 0, y:
        self.tableView.rowHeight * 1.25)
        })
}

Mes nepadarėme atvirkštinės animacijos dėl kelių priežasčių:

  1. Tiksliniame „UIViewController“ yra daugybė sąrašo elementų. Tai reiškia, kad grįžęs į pagrindinį ekraną vartotojas gali slinkti antraštę, kad ji būtų geriau matoma, ir neaišku, kaip pavadinimą paversti langeliu.
  2. Įdiekite atvirkštinę animaciją į interaktyvųjį pop-gestą, prireiks ilgo, sunkaus proceso. Bet kokiu atveju interaktyvaus pop-gesto ir mygtuko „Atgal“ animacija yra ne pati geriausia idėja.

Mes išpakavome vieną iš paprasčiausių animacijos pavyzdžių, kuriuos padarė Cuberto. Kitame mūsų pranešime bus kažkas šiek tiek sudėtingesnio ir universalesnio.

„Cuberto“ nustato kūrybinių svetainių ir programų mobiliesiems tendencijas. Skaitmeninė ir mobilioji patirtis suteikia mums apdovanojimus pelniusiems dizainams ir novatoriškiems aukščiausios klasės gaminiams. [email protected]

Sekite mus „Dribbble“ ir „Instagram“ puslapiuose