Suunnittelusta androidiin, osa 2

Edellisestä viestistäni on kulunut kauan, monia asioita on tapahtunut siitä lähtien, mutta viimeinkin on täällä. Toivottavasti nautit siitä!.

Tämä on uusi tarina artikkelisarjaani nimeltä 'Suunnittelusta androidiin', jos muistat näiden sarjojen ensimmäisen osan, valitsen suunnittelukonseptin, joka on mielestäni mielenkiintoinen ja yritän toteuttaa sen Androidilla, keskittyen mielenkiintoisiin aiheita matkan varrella Android-kehittäjäni näkökulmasta.

Kaikki tässä viestissä mainittu koodi löytyy tämän Githubin arkistosta

Tämän käsitteen olen valinnut tälle osalle:

Google-yritys - Johny Vino-liukusäädin

Käytin jälleen Johny Vinosta tulevaa konseptia.

Yritä pysähtyä toiseksi ja selvittää, kuinka android-kehittäjä olet kuin sinä olet, kuinka toteuttaa kyseinen näyttö.

Jos huomasit kaksi seuraavista asioista, olet ehkä samaa mieltä kanssani, ensi silmäyksellä mielessäni oli kaksi osaa:

  • Kuinka tietysti toteuttaa rakennuksen animaatio.
  • Tuo hakupalkki ei ehkä ole niin vähäpätöinen kuin sen pitäisi olla

Animoi rakennusta

Laitetaan tämä harjoitus täydelliseen ympäristöön, saatamme pyytää suunnittelijaamme / suunnittelijoita luomaan animaation. Ehkä jotkut After Effects -toiminnot + Bodymovinin laajennus saattavat antaa meille halutun animoidun vektorin piirrettäväksi.

Tai ... meillä ei ehkä ole lainkaan suunnittelijaa, ja olet rohkea ja yksinäinen kehittäjä, joka täytyy tehdä tämä ilman paljon suunnittelutaitoja, kokeillaan tätä tietä.

Työskentely vektoreiden kanssa

Pienillä töillä vektoripohjaisilla työkaluilla, kuten Sketch tai BoxySvg, voisimme helposti vektoroida rakennuskuvan. Ryhmittelemällä ne osat, jotka animoidaan ryhmiin, on hyödyllistä seuraavassa kohdassa.

Halutun kuvan luominen luonnos

Seuraavaksi kohtaukseen tulee uusi hämmästyttävä työkalu, ja tämä on Alex Lockwoodin Shape Shifter. Tämä mahtava työkalu auttaa sinua animoimaan SVG-pohjaisia ​​kuvia ja siirtämään nämä animaatiot AVD-levyyn muiden muotojen joukossa.

Muodonvaihdin

Kun olet luonut haluamasi tehosteen muutamalla napsautuksella, voimme viedä tuoreen animoidun vektorivetopiirroksen, liittää sen Android Studioan, sitoa sen ImageView-ohjelmaan ja olemme valmis !.

(img_building.dravable as Animatable) .start ()
Vietiin ShapeFilterin avd-sovellusta Android-laitteella

Joo, upea, eikö ?! Olemme juuri rakentaneet loistavan animaation vaivattomasti, mutta jos tarkastelemme uudelleen Johny Vinon konseptia, olemme menettäneet pienet yksityiskohdat. Animaatiota käsittelee liukupalkki (tunnetaan nimellä Seekbar Androidissa), joka käsittelee animaation tyylin riippuen palkin etenemisestä.

Joten tarvitsemme toistaiseksi asettaaksesi animaation edistymisen AVD: n sisällä. No ... sitä ei tueta tällä hetkellä sen perusteella, mitä olen nähnyt (Lottie tukee). Meillä on vain käytettävissämme menetelmiä, kuten .start (), .stop () ja reset ().

Tässä vaiheessa voimme kokeilla seuraavaa:

Tai jatka, toistamme vain hiukan enemmän.

Animoidut valintapiirrokset

Nykyisessä vaiheessa meillä on animaatio, joka on käskettävä menemään tiettyyn kehykseen, kun SeekBar saavuttaa tietyn sijainnin. Toisin sanoen meillä on joitain tiloja animaation aikana.

Ilmoitetaan joitain määritteitä näiden kehysten tai tilojen määrittelemiseksi.


    
    
    
    
    
    

Tässä vaiheessa annan esitellä ehkä ei hyvin tunnetun piirrettävän AnimatedStateListDravable -sovelluksen, joka kokonaan säästää päivämme.

Katsotaanpa android-dokumentaatiota:

Piirrettävä sisältää joukon Piirrettävät avainruudut, joissa nykyinen näytetty avainruutu valitaan nykyisen tilan perusteella. Avainrunkojen väliset animaatiot voidaan valinnaisesti määritellä siirtymäelementeillä.
Tämä piirtävä voidaan määrittää XML-tiedostossa -elementillä. Jokainen avainkehyksen piirtämä määritetään sisäkkäisessä -elementissä. Siirtymät määritetään sisäkkäisessä -elementissä.

Näyttää siltä osin, mitä etsimme, eikö niin? Voisimme määritellä joitain , jotka tunnistavat animaatiomme eri kehykset ja siirtymät siitä, miten esine siirtyy toiseen.

Koska jokainen -tagi edustaa kehystämme, määrittelemme niistä kolme, joista jokainen koostuu vetopiirrosta.

vedettävä / vd_building1.xml
vedettävä / vd_building2.xml
vedettävä / vd_building3.xml

Ja jokainen edustaa sitä, kuinka siirtyy toiseen, tarvitsemme 4 siirtymään kaikkien kehyksien välillä edestakaisin.

Edellä mainitun Shape Shifter -sovelluksen avulla voimme helposti viedä tarvittavat AVD-levyt Android Studioan, joka toimii siirtyminä AnimationStateListDravable-sovelluksessa.

vedettävä / avd_building_1_2
vedettävä / avd_building_2_3
vedettävä / avd_building_3_2
vedettävä / avd_building_2_1
avd_building_1_2.xmlavd_building_2_3.xml

Ja lopuksi koko AnimatedStateDravable, jonka juuri rakensimme:




    

    

    

    

    

    

    

Hiukan säätämällä toimintaamme ja asettelumme, asetamme tämän hämmästyttävän AnimatedSelectorDravable ImageView -lähteeksi lähderesurssina ja hyödyntämällä setImageState-menetelmää halutulla tilassa, animaatio toimii maagisesti odotetusti.

yksityinen val STATE_ZERO = intArrayOf (
        R.attr.state_zero, -R.attr.state_one, -R.attr.state_two
)

yksityinen val STATE_ONE = intArrayOf (
        -R.attr.state_zero, R.attr.state_one, -R.attr.state_two
)

yksityinen val STATE_TWO = intArrayOf (
        -R.attr.state_zero, -R.attr.state_one, R.attr.state_two
)
yksityinen hauska onSeekProgressChanged (sijainti: Int) {
    val max = hakupalkki.max

    val businessType = kun (sijainti) {
        kohdassa 0..max / 3 -> STATE_ZERO
        10..max / 2 -> STATE_ONE
        20..max / 1 -> STATE_TWO
        muuta -> heitä IllegalStateException ()
    }

    imageView.setImageState (businessType, true)
}

Tulos:

Animoi Seekbarin peukalo

Yai! Toistaiseksi olemme saavuttaneet yhden kahdesta kuumasi kohdasta, toinen on hallita kuinka animoida Seekbar-peukalon koko edistymisen aikana, kuten Johny Vino tekee konseptissaan:

Etsikopalkin peukalon koko vetäessä

Tässä voidaan erottaa kaksi käyttäytymistä:

  • Peukalon kokoa kasvatetaan jollain tavalla etenemisen suhteen
  • Kun vapautat, jonkinlainen ylittävä animaatio sitä suoritetaan

Vierailu ScaleDravable-ohjelmaan

Muu tuntematon piirrettävä (ainakin minulle) on ScaleDravable, viitataan taas android-dokumentaatioon:

Piirrettävä, joka muuttaa toisen piirretyn koon sen nykyisen tason arvon perusteella. Voit hallita sitä, kuinka paljon lapsen piirrettävä muutos leveydessä ja korkeudessa perustuu tasoon, samoin kuin painovoiman, jotta voit hallita sitä, missä se asetetaan kokonaisastiaansa. Useimmiten käytetään toteuttamaan asioita, kuten etenemispalkkeja.
Oletustaso voidaan määrittää XML-tiedostosta android: level -ominaisuuden avulla. Kun tätä ominaisuutta ei määritetä, oletustaso on 0, joka vastaa nollaa korkeutta ja / tai leveyttä android.R.styleable # ScaleDravable_scaleWidthtWidthand android.R.styleable # ScaleDravable_scaleHeight scaleHeight määritettyjen arvojen mukaan. Ajon aikana taso voidaan asettaa setLevel (int): n kautta.

Joten näyttää siltä, ​​että voisimme määritellä jonkinlaisen piirrettävän, joka viittaa toiseen piirrettyyn, tasoon ja mittakaavakertoimeen. Jos kiinnitämme palkin etenemisen tuolle tasolle, sen pitäisi toimia, eikö ?.

Määritetään kerrosluettelo piirtoheitinkalvoista ja koska haluamme vain sinisen osan skaalattavan, kääritämme sen ScaleDravable-sovellukseen.



    
        

            
              
                  

                  
              
            
        
    
    
        
            
        
    

Kuten saatat huomata, -työkalun avulla voimme upottaa vaadittavat ominaisuudet suoraan -kohtaan

peukalo <kerrosluettelo>, joka sisältää ScaleDravable -sovelluksen

Nyt meidän tarvitsee vain säätää uudestaan ​​toimintaamme ScaleDravable-tason asettamiseksi, heti kun SeekBarin edistyminen muuttuu, huomaa myös, mikä on hienoa, että voimme käyttää peukalon piirtämistä taso-ominaisuutta.

yksityinen hauska onSeekProgressChanged (sijainti: Int) {
    // ...
    
    ((hakupalkin alaosa kuin LayerDravable)) .taso =
            (sijainti * (SCALE_MAX / hakupalkki.max))
}

Ja tulos:

Nyt meidän on vain animoitava peukalo vapautettaessa, niin voimme päästä eroon ScaleDravable- ja ValueAnimator-ohjelmien käytöstä.

yksityinen hauska animateThumbRelease () {
    val thumb = seekbar.thumb
    val initLevel = thumb.level
    val maxLevel = thumb.level * THUMB_RELEASE_SCALE_FACTOR
    val animator = ValueAnimator.ofInt (
            initLevel, maxLevel, initLevel)

    kanssa (animaattori) {
        interpolaattori = OVERERSOOT
        kesto = THUMB_SCALE_DURATION

        addUpdateListener {
            thumb.level = it.animatedValue as Int
        }

        alkaa()
    }
}

Tulos:

Käärimistä

Tässä vaiheessa olemme ratkaisseet ongelman animaation ja sen jälkeen Seekbarin kanssa, vielä muutamalla triviaalisella modifikaatiolla AVD: n luomiseksi liikkuville pilville, uuden fontin käyttämisellä tekstien resurssiominaisuuksina ja lisäämällä tuore uusi mukautuva kuvake, meillä on jotain aivan samanlaista kuin Johny Vinon konsepti.

Toivottavasti nautit tien aikana ja jos joudut tappamaan minut jonkun takia, tee se hienolla kommentilla ja aggressiivisella hymiöllä.

Lopullinen tulos:

Github-arkisto

täällä

Viitteet

  • VectorDravable Adaptive Icons, Ian Lake
  • Mukautuvien kuvakkeiden suunnittelu, Nick Butcher
  • Muodonvaihdin, Alex Lockwood
  • Johdanto kuvakeanimaatiotekniikoihin, Alex Lockwood
  • adp-ihastuttavat yksityiskohdat, Alex Lockwood
  • Kuinka suunnittelemme kauniin animaation, Jeremie Martinez