Devs vs disainerid: mida peate teadma. Jaotis nr 1.

Alustame sarja postitusi, mis käsitlevad väljakutseid, millega seisavad silmitsi Cuberto maailmatasemel filmid, kus ülimuslik on kujundus koos tähega D. Jagame mitte mallirakenduste arendamise kogemusi ja anname teile ülevaate sellest, kuidas meie erandlikud arendajad muudavad uued ideed kindlaks reaalsuseks. Kohustustest loobumine: meie lahendused ei ole mõeldud mobiilirakenduste arendamise juhiste või viidetena.

Alustuseks tasub mainida, et loogikameelsetel loojatel on raske aru saada, kuidas on võimalik isegi adaptiivset kujundust visandada, ilma et nutitelefoni ekraanil olevad pisiasjad ühendaksid ekraani eraldusvõimega. Teisest küljest ei näe esteetiliselt motiveeritud disainerid nupu ja tekstiploki panemisel nii ühele reale iPhone 8-s kui ka iPhone SE-s ühele reale, aga koos sisestusnupuga nii raskesti vaeva. See on vaid väike näide tüüpilistest disainerite / arendajate kokkupõrgetest, kuid meie ettevõte leiab alati kompromissi, mis jätab kõik rahule. Kaasavõtmine: disain ja arendus on üks tervik. Te ei tohiks disaini tellida stuudiost, millel pole arenduskogemust. Muidu joonistatakse see ilma arenguloogikata makette.

Pärast aastaid kestnud tööd mitmesuguste rakendustega oleme välja joonistanud mõned juhtpõhimõtted. Näiteks ei kuluta me aega universaalsetele komponentidele, mida saab kasutada teistes tulevastes projektides. Meie disainifilosoofia nõuab iga projekti jaoks ainulaadset lähenemist - me ei tee küpsiste lõikurimalle. Samuti pühendame palju tähelepanu kasutajaliidese üksikasjadele ja teeme kõik endast oleneva, et genereerida elegantne, toetatud kood, võimaldades siiski soovitud efekti saavutamiseks siin-seal paar „ümberkäiku”.

Vaatame seda näidet:

Mida me näeme:

  • Jaotise nimega UIView tõuseb üles ja teisendub uue UIViewControlleri pealkirjaks.
  • Samal ajal muutub UIView pisut (taust ja fondi värv).
  • Ülejäänud lõikudega UIView-d lendavad valitud UIView-d allapoole.

Mida me arenduse käigus veel arvesse võtsime:

  • Kerimine võib olla igas asendis.
  • Sektsioone võib olla ükskõik kui palju. Selles näites keskendume ainult kolmele.
  • Animatsioon peab ilusti töötama kõigis Apple'i seadmetes, mitte ainult iPhone 8-s.

See näeb välja nagu päise (pealkiri, profiilinupp), UITableViewCells (jaotised) ja jaluse UITableView. Muidugi on UICollectionView võimalik kasutada kogu selle võlujõuga, kuid sel juhul oleks see olnud lihtsalt tarbetu komplikatsioon.

Miks on UITableView kasutamise hea mõte:

  • Kerige (jah, see on ilmne).
  • Piiramatu arv rakke.
  • Värskendamiseks tõmmake.
  • Lahtrisse saame panna sama UIView, nagu see oli teise ekraani päises.

Päiste ja jaluste asemel on võimalik kasutada lahtrid, kuid teadsime juba ette, et neid kasutatakse ainult üks kord, nii et mitut tüüpi lahtrite tegemine oli mõttetu.

Panime kokku töömarsruudi ja tegime järgmist:

1. Valitud lahtri välimuse muutmine (tumedast heledaks).

2. Valitud lahtri positsiooni muutmine (pealkirjaks teisendamine).

3. Ülejäänud lahtrite positsiooni muutmine (lahtrite nihutamine allapoole).

Meie samm-sammult lahendus:

1. Lahtri välimuse animeerimine on tegelikus UIView-vormingus võimalik lihtsa UIView.transpordi abil.

2. Peame lahtri viima tiitlipositsiooni ja muutma selle UIView pealkirjaks. Selle asemel, et lahter ise uude kontrolleri pealkirja teisaldada, nihutasime pealkirja allapoole ja panime selle lihtsalt oma kohale. Kontrollerite vaheliseks üleminekuks kasutasime UIViewControllerAnimatedTransitioning.

3. Eelmine samm vabastab meid muretsemisest, milline lahter asub ees ja milline taga, kuna saame neid kõiki lihtsalt nihutada. Kuid me teadsime, et lahtrite liigutamine tegeliku tabeli piires võib olla keeruline, kuna see hakkab automaatselt rakendama mitmesuguseid sisesid ja sisu suurust. Nii et me pidime koodis rakendama natuke ümbersõitmise võlukunsti. Kui seate clipToBounds väärtuseks vale, saate lahtri sisemise UIView-lahtri lahtri piiridest teisaldada, luues lahtrite endi teisaldamise efekti.

Vaatame nüüd, kuidas see kood ise välja näeb.

Valitud lahtri välimuse muutmine:

// Avalik UIView-meetod, mis asub lahtris.
func setStyle (_style: stiil) {
         self.style = stiil
 
         lüliti stiil {
                    case .lightContent:
                                lblTitle.fontColor = .white
                                view.backgroundColor = .must
                    case .darkContent:
                                lblTitle.fontColor = .must
                                view.backgroundColor = .valge
         }
}

Atribuudi stiili muutmise asemel kasutame funktsiooni setStyle. Nagu kogemus näitab, tuleb neid meetodeid arendusprotsessi käigus värskendada, nii et loomuliku setteri kasutamise asemel on seda lihtsam arvestada ja funktsiooni kirjutada.

Valitud lahtri positsiooni muutmine:

/ *
See kood on sihtmärgi UIViewControlleris.
 
Esiteks muutisime sihtmärgi UIViewControlleri taustavärvi läbipaistvaks, et esialgne kontroller oleks selle all nähtav.
 
Seejärel nihutame UIView koos sihtkontrolleri pealkirjaga algse kontrolleri valitud lahtri positsiooni. Panime lahtri lingi kraani abil sihtmärgi UIViewControllerisse.
 
Lõpuks taastame koos animatsiooniga UIViewControlleri taustavärvi ja pealkirja asukoha algseisundisse.
* /

view.backgroundColor = .selge
 
lase frame = view.convert (categoryView.frame, from: categoryView.superview) listCategoryView.transform = CGAffineTransform (translationX: 0, y: frame.minY - listCategoryView.frame.minY)
 
 
UIView.animate (withDuration: itemDuration, viivitus: 0, valikud: [.curveEaseOut], animatsioonid: {
       self.view.backgroundColor = .appBgColor
       self.listCategoryView.transform = .identiteet
 
})

Lahtrite asukoha muutmine:

lase rakkudel = cellForAnimation.filter {! $ 0.isSelected}
tappedListCategoryView? .alpha = 0
lase itemDelay = kestus / TimeInterval (maksimaalselt 3 * (1, lahtrite arv)
)
lase itemDuration = kestus - itemDelay * TimeInterval (max (1, lahtrite arv)
 - 1)
jaoks (register, lahter) rakkudes.reversed (). nummerdatud () {
        UIView.animate (withDuration: itemDuration, viivitus:
        TimeInterval (register) * itemDelay, suvandid: [. CurveEaseOut],
        animatsioonid: {
                  cell.contentView.subviews.first? .transform =
        CGAffineTransform (tõlgeX: 0, y:
        self.tableView.rowHeight * 1,25)
        })
}

Me ei teinud vastupidist animatsiooni mitmel põhjusel:

  1. Sihtmärgil UIViewController on palju loendielemente. See tähendab, et põhiekraanile naastes saab kasutaja kerida päist nähtavuse piiridest kaugemale ja pole selge, kuidas muuta pealkiri lahtriks.
  2. Vastupidise animatsiooni rakendamine interaktiivsesse pop-žesti nõuaks pikka ja keerulist protsessi. Interaktiivse pop-žesti ja nupu Tagasi jaoks erineva animatsiooni tegemine pole igatahes parim idee.

Pakkisime lahti ühe lihtsama animatsiooni näite, mille Cuberto tegi. Meie järgmises postituses kirjeldatakse midagi pisut põhjalikumat ja universaalsemat.

Cuberto seab loominguliste veebisaitide ja mobiilirakenduste trendi. Digitaalne ja mobiilne asjatundlikkus on võimeline meie auhinnatud disainilahendusi ja uuenduslikke tipptasemel tooteid. [email protected]

Jälgige meid Dribbble'is ja Instagramis