Izdelava odzivnih aplikacij s platnom

Članek
03/14/2023

Odzivnost se nanaša na zmožnost aplikacije, da se samodejno prilagodi različnim velikostim zaslona in dimenzijam, da smiselno uporabi razpoložljiv prostor na zaslonu, ki zagotavlja odličen uporabniški vmesnik in uporabniško izkušnjo pri vsaki napravi, dimenzijah, in velikosti zaslona.

Odzivnost različnim elementom aplikacije omogoča, da določijo, kako:

Raztegnite ali spremenite velikost s spremembami velikosti zaslona.
Ohranite ali spremenite položaje s spremembami velikosti zaslona.

Zakaj bi morali graditi odzivne aplikacije

Končni uporabniki lahko dostopajo do vaše aplikacije iz različnih naprav, kot so telefoni, tablični računalniki, prenosniki in namizja z velikimi monitorji, različnimi velikostmi zaslona in različnim številom slikovnih pik.

Za zagotovitev odlične uporabniške izkušnje in uporabnosti aplikacije pri vseh dimenzijah in napravah je potrebno oblikovanje aplikacije z odzivnimi načeli oblikovanja. Tudi če je aplikacija namenjena samo uporabi v spletnem brskalniku ali mobilnih telefonih, so velikosti zaslona uporabniške naprave lahko različne, zato priporočamo, da aplikacijo oblikujete z odzivnimi načeli.

Oblikovanje aplikacije z načeli odzivnosti

Preden začnete oblikovati uporabniški vmesnik za aplikacijo, morate upoštevati naslednje vidike:

Katere dimenzije ali naprave želite podpirati.
Kako naj bo aplikacija videti pri vsaki dimenziji?
Katere elemente aplikacije je treba raztegniti ali jim spremeniti velikost?
Ali so elementi skriti pri nekaterih dimenzijah?
Ali se aplikacija pri nekaterih dimenzijah vede drugače?

Ko so zbrane vse te zahteve, začnite razmišljati o tem, kako lahko te različne postavitve uporabniškega vmesnika ustvarite v eni sami aplikaciji z odzivnimi orodji, ki so na voljo v storitvi Power Apps.

Preden začnete uporabljati odzivne postavitve, morate narediti naslednje:

Obiščite spletno mesto Power Apps.
Odprite aplikacijo, v kateri želite uporabiti odzivno postavitev.
Odprite Nastavitve > Zaslon in onemogočite možnosti Prilagodi na, Zakleni razmerje višina/širina in Zakleni usmerjenost, nato pa izberite Uporabi.

Odzivne postavitve

Naslednje odzivne postavitve lahko ustvarite tako, da dodate nov zaslon in izberete ustrezno možnost v zavihku Postavitev:

Postavitve zaslona.

Opomba

Nove odzivne postavitve so na voljo v oblikah aplikacij, nove predloge zaslona pa so na voljo samo za obliko zapisa Tablični računalnik.

Razdelitev zaslona

Postavitev razdelitve zaslona ima dva dela, od katerih vsak zaseda 50 % širine zaslona na namizjih. V mobilnih napravah sta dela postavljena drug pod drugim, pri čemer vsak zaseda celotno širino zaslona.

Postavitev stranske vrstice ima stransko vrstico s fiksno širino na levi. Glavno telo je sestavljeno iz glave s fiksno višino, glavni del pa zavzame preostalo širino zaslona. Privzeto ima predloga enako vedenje v mobilnih napravah, vendar so nekatere prilagoditve priporočljive glede na vzorec uporabniškega vmesnika, ki je potreben za mobilno izkušnjo.

Delo z vsebniki

Vsebniki so gradniki vsega odzivnega oblikovanja. Vsebnik je lahko vsebnik s samodejno postavitvijo v navpični ali vodoravni smeri ali vsebnik s fiksno postavitvijo, ki bo v prihodnosti podpiral omejitve.

Spodaj je nekaj nasvetov za ustvarjanje uporabniškega vmesnika aplikacije z vsebniki:

Vedno ustvarite elemente uporabniškega vmesnika, ki oblikujejo tabelo uporabniškega vmesnika znotraj vsebnika.
Omogoča, da ima vsebnik lastne odzivne lastnosti in nastavitve, ki določajo, kako je postavljen ali se njegova velikost spremeni pri različnih velikostih zaslona.
Omogoča vam, da spremenite način razporeditve njegovih podrejenih komponent glede na odzivnost.

Izberite enega od dveh načinov postavitve vsebnika: ročna postavitev ali samodejna postavitev (vodoravna ali navpična)

Vsebniki s samodejno postavitvijo

Dva kontrolnika, Vodoravni vsebnik in Navpični vsebnik, se lahko uporabljata za samodejno postavitev podrejenih komponent. Ti kontrolniki določajo položaj podrejenih komponent, tako da vam nikoli ne bo treba nastaviti X, Y za komponento znotraj vsebnika. Lahko tudi razporedi razpoložljivi prostor svojim podrejenim komponentam ter določi vodoravno in navpično poravnavo podrejenih komponent.

Kdaj uporabiti vsebnike s samodejno postavitvijo

Vsebnike s samodejno postavitvijo lahko uporabite v naslednjih scenarijih:

Uporabniški vmesnik mora biti odziven na velikost zaslona ali spremembe dimenzije.
Obstaja več kot ena podrejena komponenta, ki se ji mora spremeniti velikost ali jo je treba premikati glede na velikost zaslona ali spremembe dimenzije.
Kadar morate elemente zložiti navpično ali vodoravno (ne glede na njihovo velikost).
Ko morate elemente enakomerno razporediti na zaslon.

Primer za vsebnika s samodejno postavitvijo

Če želite zgraditi odziven zaslon:

Ustvarite prazno aplikacijo s platnom s postavitvijo za Tablični računalnik.
Izberite Nastavitve > Zaslon in onemogočite možnosti Prilagodi na, Zakleni razmerje višina/širina, Zakleni usmerjenost ter izberite Uporabi.
Zdaj iz podokna Vstavljanje v levi stranski vrstici pod zavihkom Postavitev izberite Vodoravni vsebnik.
Zgornji vsebnik mora biti tako velik, da zavzame ves prostor s temi lastnostmi. Ob spremembi velikosti bo enak velikosti zaslona.
1. X = 0
2. Y= 0
3. Širina = Parent.Width
4. Višina = Parent. Višina
Zdaj pa v podoknu Vstavljanje dodajte dva navpična vsebnika v vodoravni vsebnik.
Če želite ustvariti vsebnike, zapolnite ves navpični prostor, izberite Container1 in nastavite lastnost Align (vertical) na Stretch.
Če želite zaslon razdeliti med vsebino, uporabite lastnost Fill portions pri dveh podrejenih vsebnikih. Levi vsebnik bo zasedel 1/4 prostora na zaslonu.
1. Izberite Container2. Videli boste, da je lastnost Flexible width vklopljena. Nastavite Fill portions na 1.
2. Izberite Container3. Videli boste, da je lastnost Flexible width vklopljena. Nastavite Fill portions na 3.
Izberite Container2. Nastavite lastnost Fill = RGBA(56, 96, 178, 1) v vnosni vrstici. Nastavite Align (horizontal) na Stretch.
Dodajte nekaj gumbov, da ustvarite meni. Po potrebi preimenujte gumbe.
Izberite Container3 in dodajte vodoravni vsebnik ter izklopite lastnost Flexible height. Nastavite Height na 100. Nastavite Align (vertical) na Stretch.
Dodajte nekaj ikon v Container4. Spremenite ikone tako, da bodo drugačne z lastnostjo ikone.
Izberite Container4. Nastavite lastnost Justify (horizontal) na End. Nastavite Align (vertical) na Center. Nastavite Gap na 40, da ustvarite prostor med ikonami.
Izberite Container3. Nastavite Align (horizontal) na Stretch. Nastavite Vertical Overflow na Scroll.
Dodajte drugačno oznako, vnose in večpredstavnostne vsebine, dokler ne presežejo vsebnika. Spremenite barvo pravokotnikov, da bo drugačna. Videli boste drsni trak za dostop do nevidne vsebine.
Izberite Predogled ali F5. Spremenite velikost okna brskalnika, da vidite, kako se vaša aplikacija prilagodi različnim velikostim zaslona.

Znane težave

Nekatere kombinacije lastnosti vsebnika postavitve so nezdružljive ali lahko povzročijo neželene rezultate, na primer:
- Če je omogočena lastnost vsebnika Wrap, se pri podrejenih kontrolnikih prezre nastavitev lastnosti Align.
- Če je lastnost vsebnika Wrap onemogočena in je presežek primarne osi vsebnika nastavljena na pomik (vodoravni presežek za vodoravne vsebnike ali navpični presežek za navpične vsebnike), je priporočljivo nastaviti lastnost Justify bodisi na začetek ali Prostor med.
- Možnosti Sredina ali Konec lahko povzročijo nedostopnost podrejenih kontrolnikov, če je vsebnik premajhen za prikaz vseh kontrolnikov, čeprav je lastnost Overflow nastavljena na Pomik.
V aplikaciji s platnom ne morete spremeniti velikosti ali prestaviti kontrolnikov, ker so kontrolniki »Povleci in spusti« onemogočeni v vsebnikih postavitve. Namesto tega uporabite lastnosti vsebnika postavitve, da dosežete želeno velikost in postavitev. Vrstni red kontrolnikov lahko spremenite prek možnosti Drevesni pogled ali z uporabo puščičnih tipk kot bližnjic.
Kontrolniki Podatkovna tabela, Grafikoni in Dodaj sliko trenutno niso podprti v vsebnikih postavitve.
Nekatere lastnosti vsebnikov postavitve so skrite za podrejene kontrolnike. Do skritih lastnosti je še vedno mogoče dostopati prek vnosne vrstice ali z napredne plošče. Vendar bodo te lastnosti prezrte, tudi če so nastavljene na teh mestih.
Ko se kontrolniki premaknejo v vsebnik postavitve (na primer pri kopiranju ali lepljenju kontrolnikov), se v vsebnik vstavijo po njihovem vrstnem redu pri drevesnem pogledu.

Glejte tudi

Ustvarjanje odzivnih postavitev