Devs vs hönnuðir: Það sem þú þarft að vita. Þáttur # 1.

Við erum að hefja röð innleggs um þær áskoranir sem Cuberto stendur frammi fyrir í heimsklassa deildum þar sem Hönnun með höfuðborg „D“ hefur forgang. Við munum deila reynslu af þróun forrita án sniðmát og gefa þér innsýn í hvernig óvenjulegir verktaki okkar umbreyta skáldsöguhugmyndum í traustan veruleika. Fyrirvari: lausnir okkar eru ekki ætlaðar til leiðbeiningar eða tilvísunar í þróun farsímaforrita.

Í upphafi er vert að nefna að rökfræðisinnaðir tæknimenn eiga erfitt með að skilja hvernig það er jafnvel mögulegt að teikna aðlagandi hönnun án þess að tengja alla smá hluti á snjallsímaskjánum við skjáupplausn. Aftur á móti sjá fagurfræðilega áhugasamir hönnuðir ekki hvað er svo erfitt við að setja hnapp og textablokk á eina línu bæði í iPhone 8 og það sama í iPhone SE, en ásamt innsláttarhnappnum. Þetta er aðeins lítið dæmi um dæmigerða árekstra hönnuða / þróunaraðila, en fyrirtækið okkar finnur alltaf málamiðlun sem lætur alla hamingjusama eftir. Takeaway: hönnun og þróun er ein heild. Þú ættir ekki að panta hönnun frá vinnustofu sem hefur enga þróun reynslu. Annars mun það vera að teikna upp spotta án þróunarrökfræðinnar.

Eftir margra ára vinnu við margvísleg forrit höfum við dregið fram nokkur leiðarljós. Við eyðum til dæmis ekki tíma í alhliða íhluti sem hægt er að nota í önnur framtíðarverkefni. Hönnunarheimspekin okkar krefst sérstakrar aðferðar við hvert verkefni - við gerum ekki sniðmát fyrir smákökur. Við leggjum mikið af áherslu á upplýsingar um HÍ og leggjum okkur fram um að búa til glæsilegan, studdan kóða en samt sem áður gera ráð fyrir nokkrum „lausn“ hér og þar til að ná tilætluðum áhrifum.

Svo skulum líta á þetta dæmi:

Það sem við sjáum:

  • UIView með kaflaheitinu skýtur upp og umbreytist í titilinn á nýja UIViewController.
  • Á meðan breytist UIView lítillega (bakgrunnur og leturlitur).
  • UIV skoðanir með köflunum sem eftir eru fljúga niður á bak við valinn UIView.

Hvað annað tókum við mið af við þróunina:

  • Skrunin getur verið í hvaða stöðu sem er.
  • Það getur verið einhver fjöldi hluta. Í þessu dæmi erum við aðeins að einbeita okkur að þremur.
  • Fjörið þarf að virka fallega í öllum Apple tækjum, ekki bara iPhone 8.

Þetta lítur út eins og UITableView með haus (titill, prófílhnappur), UITableViewCells (hlutar) og fót. Auðvitað er mögulegt að nota UICollectionView með öllum sínum töfra, en í þessu tilfelli hefði það bara verið óþarfur fylgikvilli.

Hvers vegna það er góð hugmynd að nota UITableView utan kassans:

  • Flettu (já, það er augljóst).
  • Ótakmarkaður fjöldi frumna.
  • Dragðu til að endurnýja.
  • Við getum sett sama UIView inni í klefanum eins og það var í hausnum á öðrum skjánum.

Það er mögulegt að nota frumur í stað hausa og fótfætis, en við vissum fyrirfram að þær yrðu aðeins notaðar einu sinni, þannig að margar gerðir frumna gerðu lítið úr því.

Við settum saman ferðaáætlun og hér þurftum við að gera:

1. Að breyta útliti valda klefans (dökk í ljós).

2. Að breyta staðsetningu valda hólfs (umbreyta henni í titil).

3. Að breyta staðsetningu hinna frumanna (færa frumurnar niður).

Skref-fyrir-skref lausn okkar:

1. Hreyfimynd er á útliti klefans í raunverulegu UIView með einfaldri UIView.transition.

2. Við verðum að færa klefann í titilstöðu og breyta síðan UIView í titil. Í stað þess að færa frumuna sjálfa í nýja stjórnatitilinn færðum við titilinn niður og settum hann einfaldlega á sinn stað. Til að skipta á milli stýringa notuðum við UIViewControllerAnimatedTransitioning.

3. Fyrra skrefið losar okkur við að læti um hvaða klefa er staðsett fyrir framan og hver að aftan, þar sem við getum bara fært þá alla niður. En við vissum að það getur verið erfiður að hreyfa frumurnar innan töflunnar þar sem það byrjar sjálfkrafa að nota ýmsar innsetningar og innihaldsstærð. Þannig að við urðum að útfæra smá úrræðaleit í kóðanum. Ef þú stillir clipToBounds á rangar, geturðu fært innri UIV-sýn frumunnar út fyrir klefamörkin og skapað áhrifin af því að færa frumurnar sjálfar.

Við skulum athuga hvernig þetta lítur út í sjálfum kóðanum.

Að breyta útliti valda hólfs:

// Opinber UIView aðferð, sem er í klefanum.
func setStyle (_style: Style) {
         self.style = stíll
 
         skipta um stíl {
                    tilfelli .lightInnihald:
                                lblTitle.fontColor = .hvítt
                                view.backgroundColor = .svart
                    mál. Dark Innihald:
                                lblTitle.fontColor =. svartur
                                view.backgroundColor = .hvítt
         }
}

Í stað þess að breyta eignastíl notum við setStyle aðgerðina. Eins og reynslan sýnir þarf að uppfæra þessar aðferðir meðan á þróunarferlinu stendur, svo það er auðveldara að taka tillit til þess og skrifa aðgerð frekar en að nota innfæddur leikmaður.

Að breyta staðsetningu valda hólfs:

/ *
Þessi kóði er í miða UIViewController.
 
Í fyrsta lagi breyttum við bakgrunnslit litum UIViewController í gagnsæ til að gera upphafsstýringuna sýnilegan undir honum.
 
Síðan færum við UIView með titli markstjórans yfir í valinn frumastaða stjórnandans. Við setjum hólfatengilinn inn í miða UIViewController með tappa.
 
Í lokin, ásamt teiknimyndunum, snúum við bakgrunnsliti og titilstöðu UIViewController í upphafsstöðu.
* /

view.backgroundColor =. skýrt
 
láta ramma = view.convert (flokkView.frame, frá: CategoryView.superview) listaCategoryView.transform = CGAffineTransform (þýðingX: 0, y: frame.minY - listCategoryView.frame.minY)
 
 
UIView.animate (withDuration: itemDuration, delay: 0, options: [.curveEaseOut], hreyfimyndir: {
       self.view.backgroundColor = .appBgColor
       self.listCategoryView.transform = .identity
 
})

Að breyta staðsetningu frumanna:

láta frumur = cellerForAnimation.filter {! $ 0.isSelected}
tappedListCategoryView? .alpha = 0
láta itemDelay = tímalengd / TimeInterval (3 * max (1, frumur)
)
láttu itemDuration = tímalengd - itemDelay * TimeInterval (max (1, cells.count)
 - 1)
fyrir (vísitölu, frumu) í frumum.reversed (). talnar () {
        UIView.animate (withDuration: itemDuration, delay:
        TimeInterval (vísitala) * itemDelay, valkostir: [. CurveEaseOut],
        hreyfimyndir: {
                  cell.contentView.subviews.first? .transform =
        CGAffineTransform (þýðingX: 0, y:
        self.tableView.rowHeight * 1,25)
        })
}

Við gerðum ekki andstæða hreyfimynd af nokkrum ástæðum:

  1. UIViewController miðinn er með mikið af listaþáttum. Það þýðir að þegar hann fer aftur á aðalskjáinn getur notandinn skrunað hausnum út fyrir skyggni og það er óljóst hvernig á að umbreyta titlinum í hólfið.
  2. Innleiða andstætt fjör í gagnvirka popp-látbragðið þyrfti langt og erfitt ferli. Að gera annað fjör fyrir gagnvirka sprettigöngu og til bakahnappinn er ekki besta hugmyndin.

Við pökkuðum upp einu einföldustu teiknimyndasögunum sem Cuberto lét gerast. Næsta innlegg okkar mun innihalda eitthvað aðeins vandaðri og alhliða.

Cuberto setur þróunina í skapandi vefsíður og farsímaforrit. Stafræn og farsímaþekking veitir margverðlaunuðum hönnun og nýstárlegum afurðum okkar. [email protected]

Fylgdu okkur á Dribbble og Instagram