Devs vs. Suunnittelijat: Mitä sinun täytyy tietää. Jakso 1.

Aloitamme sarjan viestejä haasteista, joihin Cuberton maailmanluokan ohjelmat kohtaavat, joissa muotoilu, jossa on D-kirjain, on etusijalla. Jaamme ei-mallipohjaisia ​​sovelluskehityskokemuksia ja annamme sinulle kuvan siitä, kuinka poikkeukselliset kehittäjämme muuttavat uudet ideat kiinteäksi todellisuudeksi. Vastuuvapauslauseke: Ratkaisumme ei ole tarkoitettu oppaiksi tai viitteiksi mobiilisovellusten kehittämiselle.

Aluksi on syytä mainita, että logiikkamielisillä kehittäjillä on vaikea ymmärtää, kuinka on mahdollista jopa luonnostella mukautuva muotoilu yhdistämättä älypuhelimen näytön pieniä asioita näytön tarkkuuteen. Toisaalta esteettisesti motivoituneet suunnittelijat eivät näe niin vaikeaa painikkeen ja tekstilohkon asettamisesta yhdelle riville sekä iPhone 8: ssa että samaan iPhone SE: ssä, mutta syöttöpainikkeen kanssa. Tämä on vain pieni esimerkki tyypillisistä suunnittelijoiden / kehittäjien yhteentörmäyksistä, mutta yrityksemme löytää aina kompromissin, joka jättää kaikki onnelliseksi. Ottaminen: Suunnittelu ja kehitys on yksi kokonaisuus. Sinun ei pitäisi tilata suunnittelua studiosta, jolla ei ole kehityskokemusta. Muutoin se piirtää malleja ilman kehityslogiikkaa.

Vuosien työstämisen jälkeen useiden sovellusten kanssa olemme löytäneet joitain ohjausperiaatteita. Esimerkiksi, emme tuhlaa aikaa universaaleihin komponentteihin, joita voidaan käyttää muissa tulevissa projekteissa. Suunnittelufilosofiamme vaatii ainutlaatuisen lähestymistavan jokaisessa projektissa - emme tee evästeleikkurimalleja. Kiinnitämme myös paljon huomiota käyttöliittymän yksityiskohtiin ja pyrimme kaikin tavoin tuottamaan tyylikkään, tuetun koodin ja sallimaan silti muutaman "kiertotavan" täällä täällä halutun vaikutuksen saavuttamiseksi.

Katsotaanpa tätä esimerkkiä:

Mitä näemme:

  • UIView osion nimellä ampuu ylös ja muuttuu otsikkona uudessa UIViewControllerissa.
  • Samaan aikaan UIView muuttuu hieman (tausta ja fontin väri).
  • UIViews jäljellä olevien osien kanssa lentävät alaspäin valitun UIView: n taakse.

Mitä muuta otimme huomioon kehityksen aikana:

  • Vieritys voi olla missä tahansa asennossa.
  • Leikkeitä voi olla mikä tahansa määrä. Tässä esimerkissä keskitymme vain kolmeen.
  • Animaation on toimittava kauniisti kaikissa Apple-laitteissa, ei vain iPhone 8: ssa.

Tämä näyttää UITableView-otsikosta (otsikko, profiilipainike), UITableViewCells (osiot) ja alatunniste. Tietysti on mahdollista käyttää UICollectionView-sovellusta kaikella taikuudellaan, mutta tässä tapauksessa se olisi ollut vain tarpeeton komplikaatio.

Miksi on hyvä idea käyttää UITableView-pakkausta:

  • Vieritä (kyllä, se on selvää).
  • Rajoittamaton määrä soluja.
  • Pull-to-refresh.
  • Voimme laittaa saman UIView-solun soluun, kuten se oli toisen näytön otsikossa.

Soluja voi käyttää otsikkojen ja alatunnisteiden sijasta, mutta tiesimme etukäteen, että niitä käytetään vain kerran, joten useiden solutyyppien tekemisellä ei ollut mitään järkeä.

Kokoimme työreitin ja tässä meidän on tehtävä:

1. Valitun solun ulkonäön muuttaminen (tummasta vaaleaksi).

2. Valitun solun sijainnin muuttaminen (muunnetaan siitä otsikko).

3. Jäljellä olevien solujen sijainnin muuttaminen (siirtämällä soluja alaspäin).

Vaiheittainen ratkaisumme:

1. Solun ulkoasun animointi on mahdollista todellisessa UIView-muodossa yksinkertaisella UIView.transition avulla.

2. Meidän on siirrettävä solu otsikkopaikkaan ja muutettava sen UIView nimikkeeksi. Sen sijaan, että siirrämme itse solua uuteen ohjaimen otsikkoon, siirrimme otsikkoa alaspäin ja laitimme sen sitten vain paikoilleen. Siirtymiseen ohjainten välillä käytimme UIViewControllerAnimatedTransitioning -sovellusta.

3. Edellinen vaihe vapauttaa meidät harhautumasta siitä, mikä solu sijaitsee edessä ja mikä takana, koska voimme vain siirtää ne kaikki alas. Mutta tiesimme, että solujen siirtäminen varsinaisessa taulukossa voi olla hankalaa, koska se alkaa automaattisesti käyttää erilaisia ​​inserttejä ja contentSize-sovellusta. Joten meidän piti ottaa koodiin vähän kiertotaitoa. Jos asetat clipToBounds-arvoon vääriä, voit siirtää solun sisäisen UIView-arvon solun rajojen ulkopuolelle luomalla solujen siirtämisen vaikutuksen.

Katsotaanpa nyt, kuinka tämä näyttää itse koodista.

Valitun solun ulkoasun muuttaminen:

// Julkinen UIView-menetelmä, joka on solussa.
func setStyle (_style: Style) {
         itse.tyyli = tyyli
 
         vaihda tyyliä {
                    tapaus .lightContent:
                                lblTitle.fontColor = .valkoinen
                                view.backgroundColor = .musta
                    case .darkContent:
                                lblTitle.fontColor = .musta
                                view.backgroundColor = .valkoinen
         }
}

Ominaisuustyylin vaihtamisen sijaan käytämme setStyle-toimintoa. Kuten kokemus osoittaa, nämä menetelmät on päivitettävä kehitysprosessin aikana, joten on helpompaa ottaa tämä huomioon ja kirjoittaa toiminto alkuperäisen asettajan käytön sijasta.

Valitun solun sijainnin muuttaminen:

/ *
Tämä koodi on kohde-UIViewControllerissa.
 
Ensin muutimme kohde-UIViewController-laitteen taustavärin läpinäkyväksi, jotta alkuperäinen ohjain olisi näkyvissä sen alla.
 
Sitten siirrämme UIView: n kohdeohjaimen otsikolla alkuperäisen ohjaimen valittuun soluasentoon. Laitoimme solulinkin kohde-UIViewControlleriin hanalla.
 
Lopulta palautamme UIViewControllerin taustavärin ja nimikkeen sijainnin alkuperäiseen tilaan animaation ohella.
* /

view.backgroundColor = .selvä
 
anna kehys = 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], animaatiot: {
       self.view.backgroundColor = .appBgColor
       self.listCategoryView.transform = .identiteetti
 
})

Solujen sijainnin muuttaminen:

anna solut = cellForAnimation.filter {! $ 0.isSelected}
tappedListCategoryView? .alpha = 0
anna itemDelay = kesto / TimeInterval (enintään 3 * (1, solujen määrä)
)
anna itemDuration = kesto - itemDelay * TimeInterval (enintään (1, solut.lukumäärä)
 - 1)
(hakemisto, solu) soluissa.kääntö (). numeroitu () {
        UIView.animate (withDuration: itemDuration, delay:
        TimeInterval (hakemisto) * itemDelay, vaihtoehdot: [. CurveEaseOut],
        animaatiot: {
                  cell.contentView.subviews.first? .transform =
        CGAffineTransform (käännösX: 0, y:
        self.tableView.rowHeight * 1.25)
        })
}

Emme tehneet käänteistä animaatiota monista syistä:

  1. Kohde-UIViewControllerissa on paljon luetteloelementtejä. Tämä tarkoittaa, että palatessaan päänäyttöön käyttäjä voi vierittää otsikkoa näkyvyyden ulkopuolella, ja on epäselvää, kuinka otsikko muutetaan soluun.
  2. Käänteisen animaation toteuttaminen interaktiivisessa pop-elessä vaatisi pitkää, vaikeaa prosessia. Erilaisen animaation tekeminen interaktiiviselle pop-elelle ja Takaisin-painikkeelle ei ole joka tapauksessa paras idea.

Puraimme yhden yksinkertaisimmista animaatioesimerkkeistä, jotka Cuberto teki. Seuraavassa viestissämme on jotain hieman yksityiskohtaisempaa ja universaalisempaa.

Cuberto asettaa suuntauksen luovissa verkkosivustoissa ja mobiilisovelluksissa. Digitaalinen ja mobiili asiantuntemus lisää palkittuja malleja ja innovatiivisia huippuluokan tuotteita. [email protected]

Seuraa meitä Dribbblessa ja Instagramissa