Kuidas kujundada raamil tundlikke paigutusi

Võtmeväärtusega objektide kasutamine mitme seadme prototüüpide valmistamiseks.

Kui töötate Frameri prototüüpidega piisavalt kaua, ilmneb lõpuks probleem, kuidas kohandada prototüübi paigutust mitme seadme ja orientatsiooni käsitlemiseks. Selle asemel, et luua iga olukorra jaoks eraldi prototüüp - näiteks üks iPhone'i jaoks püstiasendis ja üks iPadi jaoks maastikus, on võimalik kujundada reageeriv prototüüp, mis kohandab selle mõõdikuid vastavalt olukorrale. See nõuab teatavat seadistamist, kuid seda protsessi saab objektina tuntud andmestruktuuri abil oluliselt lihtsustada.

„Objekt” on ebamäärane termin, mis võib viidata paljudele asjadele. Siin kasutame seda võtme-väärtuste paaride kogumile viitamiseks. Need toimivad nagu muutujad: Klahv võimaldab teil paarile nime viidata, samal ajal kui väärtus hoiab seotud andmeid.

Rakenduse Framers prototüüpide valmistamiseks kasutatavas keeles CoffeeScript saate luua objekti nagu:

objectName =
    võti: väärtus
    elseKey: veel üks väärtus

(Pange tähele, et võrdusmärk järgneb objekti nimele, kuid võtmete ja väärtuste eraldamiseks kasutatakse koolonit.)

Pesastatud objektidega on võimalik keerukamaid hierarhiaid, kus asjad muutuvad huvitavaks:

objectName =
    keySet1:
        võti: väärtus
        elseKey: veel üks väärtus
    keySet2:
        võti: väärtus
        elseKey: veel üks väärtus

Lihtne on aru saada, kuidas see võib lahenduse leida meie paigutusprobleemile:

suurus =
    iphone:
        viewSidePadding: 20
    ipad:
        viewSidePadding: 40

Kuid kuidas pääseme neile väärtustele juurde? Mugavalt pakub CoffeeScript kahte meetodit: punktide märkimine ja sulgude märkimine. Punkti märkimiseks alustame objekti nimega ja kõnnime seejärel mööda hierarhiat, eraldades viited punktidega:

prindi suurus.iphone.viewSidePadding

Sulgude märkimisel mähime iga viite sulgudesse ja jutumärkidesse:

prindi suurus ["iphone"] ["viewSidePadding"]

(Pange tähele, et objekti nimi pole millessegi mähitud.)

Jutumärgid tunduvad alguses vaeva, kuid tegelikult on need hindamatud. Need võimaldavad meil konstrueerida oma võtmete nimesid avaldiste kaudu. Näiteks võiksite teha midagi sellist:

prindisuurus ["iphone"] ["vaade" + "SidePadding"]

Siiani pole sellest enam kasu, kuid võite hakata uurima, kuidas neid viiteid vastavalt vajadusele jagada ja rekonstrueerida.

Neid märkusi on võimalik ka mis tahes viisil segada ja sobitada:

prindi suurus ["iphone"]. viewSidePadding
prindi suurus.iphone ["viewSidePadding"]

Selle lähenemisviisi reageerivale paigutusele toimimiseks on vaja kolme asja:

  1. Seadme tüübi määramise meetod.
  2. Meetod seadme orientatsiooni määramiseks.
  3. Meetod neile vastava väärtuse haaramiseks.

Lühiduse huvides vaatame siin ainult esimest ja viimast eset. (Üks lisatud prototüüp lõpus näitab kogu paketti.)

Looge Frameris uus prototüüp ja lisage järgmine kood:

# spetsifikatsioonid
suurus =
    viewTopPadding: 30
    iphone:
        viewSidePadding: 20
        itemMargin: 16
        itemSize: 250
    ipad:
        viewSidePadding: 40
        itemMargin: 64
        kauba suurus: 400

(Pange tähele, et mõned võtmeväärtuste paarid elavad otse tipptasemel. Need on ühised nii iPhone'ile kui iPadile ja nende väärtused ei muutu seadmetes.)

Järgmisena lisage funktsioon seadme tüübi tuvastamiseks. Kuidas sellega edasi liikuda, sõltub sellest, kus soovite oma prototüüpi näha, kuid Frameris töötab siin järgmine meetod:

# hankige seadme tüüp
checkDevice = (deviceType = "iphone") ->
    framerDevice = Framer.Device.deviceType
    deviceType = "iphone", kui _. sisaldab (framerDevice, "iphone")
    deviceType = "ipad", kui _. sisaldab (framerDevice, "ipad")
    return deviceType
Kui teie prototüüp on mõeldud eelvaatamiseks mobiilseadmetes, võib ekraanilaiuse tuvastamine osutuda usaldusväärsemaks meetodiks.

Meie funktsioon checkDevice () tagastab kas stringi "iphone" või "ipad". Võtme sisestamine võtme-väärtuste paaris on kõik, mida peame oma numbriliste spetsifikatsioonide saamiseks lisama. Näiteks see töötab nüüd:

deviceType = checkDevice ()
value = "viewSidePadding"
prindi suurus [deviceType] [väärtus]

Saame selle laiendada üldkasutatavaks funktsiooniks, mis aktsepteerib võtme nime ja tagastab praegusele seadmele vastava väärtuse. Võite kasutada allolevat koodi, kuid pange tähele kahte asja:

  • Objektihierarhias sügavamad väärtused alistavad kõrgemal olevad väärtused. Kui määratlete platvormiülese spetsifikatsiooni väärtuse, on kõige parem seda väärtust seadme tasemel mitte korrata.
  • Kui sobivaid väärtusi ei leita, prindib funktsioon veateate.
# kontrolli spetsifikatsiooni
getSpec = (spec) ->
    if! spec, siis trükkige "Peate määrama spetsiaalse nime."

    deviceType = checkDevice ()
    lookup = _.assign ({}, suuruse määramine, suuruse muutmine [deviceType])
    tulemus = _.get (otsing, spec)

    Kui! tulemus, siis printige "Väärtust # {spec} lehel # {deviceType} ei leitud."

    tagastamise tulemus

Kui need funktsioonid on paigas, peame lihtsalt kutsuma getSpec (“meieKeyName”), kus “meieKeyName” on soovitud väärtuse võtmenimi. Seega tagastab getSpec (“viewSidePadding”) iPhone'is 20, iPadis aga 40. getSpec (“viewTopPadding”) naaseb 30 viisil.

Saame kiiresti oma tehniliste kirjelduste abil PageComponent-põhise üksuste karusseli välja lüüa ja asendav funktsioon nõuab mis tahes mõõtmeid:

karussell = uus lehekomponent
    laius: ekraani laius
    x: getSpec ("viewSidePadding")
    y: getSpec ("viewTopPadding")
    kõrgus: getSpec ("itemSize")
    laius: getSpec ("itemSize")
    klipp: vale
    scrollVertical: vale
minu jaoks asukohas [0..4]
    carouselItem = uus kiht
        vanem: karussell.sisu
        laius: getSpec ("itemSize")
        kõrgus: getSpec ("itemSize")
        x: i * (getSpec ("itemSize") + getSpec ("itemMargin"))

Sellest piisab seadme tüübi muutustele reageerivate paigutuste loomiseks. Kui soovite kohandada ka orientatsiooniga, peate tuvastama orientatsiooni ja siis kõik muutuvad kihid uuesti joonistama. Lihtsaim viis selle saavutamiseks on mähkida kogu kihtide loomine paigutusfunktsiooni. Mis tahes orientatsiooni muutmine peaks kõigepealt hävitama kõik kihid ja seejärel kutsuma paigutuse funktsiooni nende ümberehitamiseks. Paigutuse funktsioon saab esimese sammuna ise hakkama kihtide hävitamisega.

Kui olemasolevaid kihte orienteerimislülitil ei hävitata, on teil mitu koopiate kihti, kuna teie paigutusfunktsiooni korratakse.

Meie karuselliloomingu pakkimine paigutusfunktsiooni võib välja näha nii:

# vaate paigutuse funktsioon
doLayout = () ->
    # dubleerimise vältimiseks hävitage kõik kihid
    kihi jaoks rakenduses Framer.CurrentContext.layers
        layer.destroy ()
    
    # luua karussell
    karussell = uus lehekomponent
        laius: ekraani laius
        x: getSpec ("viewSidePadding")
        y: getSpec ("viewTopPadding")
        kõrgus: getSpec ("itemSize")
        laius: getSpec ("itemSize")
        klipp: vale
        scrollVertical: vale
    
    # täida karussell rakkudega
    minu jaoks asukohas [0..4]
        carouselItem = uus kiht
            vanem: karussell.sisu
            laius: getSpec ("itemSize")
            kõrgus: getSpec ("itemSize")
            x: i * (getSpec ("itemSize") + getSpec ("itemMargin"))
# lähtestada
doLayout ()

Prototüüpide katsetamiseks ja nende mehhanismide koos töötamiseks laadige alla lihtsam prototüüp ja seejärel üks, mis sisaldab orienteerumislüliti tuge.

Teine lähenemisviis on iPadi-spetsiifiliste suuruste spetsifikatsioonide salvestamine eraldi ülekirjutatavasse objekti. Selle meetodi toimimiseks vaatamiseks laadige alla prototüüp.

Projekteerimise ja arendamise kohta lisateabe saamiseks tellige BPXL Craft ja järgige Twitteris musta pikslit.

Black Pixel on loovate digitaalsete toodete agentuur. Lisateavet leiate veebisaidilt blackpixel.com.