Lõuendirakendustes tundlike paigutuste loomine

Enne kui ehitad Power Apps'is lõuendirakenduse, määra, kas kohandada rakendus telefoni või tahvelarvuti jaoks. See valik määrab lõuendi suuruse ja kuju, millele sa oma rakenduse ehitad.

Pärast selle valiku tegemist saate teha veel mõned valikud, kui valite Sätted>Kuva. Saate valida vertikaal-või horisontaalpaigutuse ja ekraani suuruse (ainult tahvelarvuti). Lisaks saate lukustada või vabastada proportsioonid ja toetada seadme pööramist (või siis mitte).

Need valikud on aluseks kõigile teistele teie tehtavatele valikutele ekraani paigutuste muutmistel. Kui teie rakendus töötab erineva suurusega seadmel või veebis, mahutab teie kogu paigutuse skaala ekraanile, kus rakendus töötab. Kui telefoni jaoks mõeldud rakendus töötab suures brauseriaknas (nt rakendus kompenseerib suurenenud ala ja tundub liiga suur). Rakendus ei saa täiendavad resolutsiooni ära kasutada, kui kuvatakse rohkem juhtelemente või rohkem sisu.

Kui loote tundlikku paigutust, saavad juhtelemendid reageerida erinevate seadmete või akende suurustele muutes mitmesuguseid kogemusi loomulikumaks. Et saavutada reageeriv paigutus, kohandad mõningaid seadeid ja kirjutad oma rakenduses väljendeid.

Keela sobitumine

Saad seadistada iga ekraani juhtnupu nii, et selle paigutus kohandub tegeliku rakenduse tööruumiga.

Reageerimisvõime aktiveerimiseks lülitate välja rakenduse sätte Skaleeri sobivaks , mis on vaikimisi sisse lülitatud. Kui lülitate selle sätte välja, lülitate välja ka kuvasuhte lukustamise, kuna te ei kujunda enam kindla ekraanikuju jaoks. (Saate siiski määrata, kas rakendus toetab seadme pöörlemist.)

Kui soovite, et rakendus oleks tundlik, peate tegema täiendavaid etappe, kuid see muudatus on esimene samm tundlikkuse lisamiseks.

Mõistke rakenduse ja seadme ekraani mõõtmeid

Et sinu rakenduse paigutused vastaksid seadme ekraani või veebibrauseri mõõtmete muutustele, kirjutad valemid, mis kasutavad ekraani laiuse ja kõrguse omadusi. Nende omaduste näitamiseks ava rakendus Power Apps Studios ja vali ekraani juhtnupp. Nende atribuutide vaikevalemid kuvatakse parempoolse paani vahekaardil Täpsemalt .

Laius = Max(App.Width, App.MinScreenWidth)

Kõrgus = Max(App.Height, App.MinScreenHeight)

Need valemid viitavad rakenduse omadustele Width, Height, MinScreenWidth ja MinScreenHeight . Rakenduse atribuudid Laius ja Kõrgus vastavad selle seadme või brauseriakna mõõtmetele, milles teie rakendus töötab. Kui kasutaja muudab brauseriakna suurust (või pöörab seadet, kui olete suunaluku välja lülitanud), muutuvad nende atribuutide väärtused dünaamiliselt. Ekraani kontrolli Laiuse ja Kõrguse omadustes olevad valemid hinnatakse uuesti, kui need väärtused muutuvad.

App.Width ja App.Height omaduste väärtused pärinevad mõõtmetest, mille määrate seadete ekraanipaneelil. Näiteks, kui valid horisontaalse "16:9 vaikimisi" suuruse, siis App.Width on 1366 ja App.Height 768.

Kuna neid kasutatakse ekraani kontrolli laiuse jakõrguse valemites, on MinScreenWidth ja MinScreenHeight minimaalsed mõõtmed, mille jaoks rakendust disainitakse. Kui sinu rakenduse tegelik pindala on isegi väiksem kui need miinimummõõtmed, tagavad ekraani kontrolli laiuse ja kõrguse omaduste valemid, et nende väärtused ei muutu miinimumidest väiksemaks. Sellisel juhul peab kasutaja kerima, et näha kogu paigutuse sisu. MinScreenWidth ja MinScreenHeight omadused saab määrata rakenduse objekti>>omadused edasijõudnutes.

Kui oled oma rakenduse MinScreenWidth ja MinScreenHeight määranud, ei pea sa enamasti muutma vaikimisi valemeid iga ekraani kontrolli laiuse ja kõrguse omaduste jaoks. Hiljem käsitletakse selles teemas juhtumeid, kus võite soovida neid valemeid kohandada.

Dünaamilise paigutuse valemite kasutamine

Kui soovite luua tundlikku kujundust, peate iga juhtelemendi leidma ja mõõtma, kasutades absoluutsete (konstantsete) koordinaatide väärtuste asemel valemeid. Need valemid väljendavad iga juhtseadme asukohta ja suurust ekraani üldise suuruse või teiste praeguse ekraani juhtnuppude suhtes.

Oluline

Pärast juhtelemendi atribuutide X , Y , Laius ja Kõrgus valemite kirjutamist kirjutatakse valemid konstantsete väärtustega üle, kui lohistate juhtelementi hiljem lõuendiredaktoris. Kui hakkate valemeid dünaamilise paigutuse tarbeks kasutama, peaksite vältima juhtelementide lohistamist.

Kõige lihtsamal juhul täidab üks juhtelement kogu ekraani. Selle efekti loomiseks määrake juhtelemendi atribuudid järgmistele väärtusetele.

Atribuut	Väärtus
X	0
Y	0
Laius	Parent.Width
Kõrgus	Parent.Height

Need valemid kasutavad tehtemärki Peamine . Iga ekraanile asetatud juhtimise puhul viitab Parent ekraanile. Nende atribuudiväärtuste korral kuvatakse juhtelement ekraani vasakus ülanurgas (0, 0) ning sellel on sama laius ja kõrgus kui ekraanil.

Hiljem selles teemas rakendate neid põhimõtteid (ja tehtemärki Peamine ) juhtelementide paigutamiseks teistes konteinerites, nagu galeriid, rühma juhtelemendid ja komponendid.

Alternatiivina saab juhtelement täita ainult ekraani ülemise poole. Selle efekti loomiseks määrake atribuudi Height väärtuseks Parent.Height / 2 ja jätke muud valemid muutmata.

Kui soovite, et teine juhtelement täidaks ekraani teise poole, võite valemite koostamiseks kasutada vähemalt kahte teist lähenemist. Lihtsuse huvides võite seda lähenemist kasutada.

Juhtelement	Atribuut	Valem
Upper	X	0
Upper	Y	0
Upper	Laius	Parent.Width
Upper	Kõrgus	Parent.Height / 2
Lower	X	0
Lower	Y	Parent.Height / 2
Lower	Laius	Parent.Width
Lower	Kõrgus	Parent.Height / 2

See konfiguratsioon saavutaks soovitud efekti, kuid vajadusel peate iga valemit redigeerima, kui muutsite oma meelt juhtelementide suhteliste suuruse suhtes. Näiteks võite otsustada, et ülemine juhtelement peaks hõivama ainult ülemise ühe kolmandiku ekraanist, kusjuures alumine juhtelement täidab alumist kahte kolmandikku.

Selle efekti loomiseks peate värskendama juhtelemendi Upper atribuuti Height (Kõrgus) ning juhtelemendi Lower atribuuteY ja Height (Kõrgus ). Selle asemel kaaluge juhtelemendi Lower valemite kirjutamist juhtelemendi Upper (ja iseenda) kaudu , nagu järgmises näites.

Juhtelement	Atribuut	Valem
Upper	X	0
Upper	Y	0
Upper	Laius	Parent.Width
Upper	Kõrgus	Parent.Height / 3
Lower	X	0
Lower	Y	Upper.Y + Upper.Height
Lower	Laius	Parent.Width
Lower	Kõrgus	Parent.Height - Lower.Y

Kui need valemid on paigas, peate muutma ainult juhtelemendi Upper atribuuti Height , et väljendada ekraani kõrguse teistsugust murdosa. Juhtelement Lower teisaldub ja muudab selle suurust automaatselt, et võtta arvesse muudatust.

Neid valemimustreid saate kasutada ühiste paigutusseoste väljendamiseks juhtelemendi nimega C ja selle ema- või sõsarjuhtelemendi ( D) vahel.

C ja tema vanemjuhtelemendi suhe	Atribuut	Valem	Illustratsioon
C täidab emaettevõtte laiuse, mille veeris on N	X	N
	Laius	Parent.Width - (N * 2)
C täidab emakõrguse, varuga N	Y	N
	Kõrgus	Parent.Height - (N * 2)
C joondatud emaserva parema servaga, veerisega N	X	Parent.Width - (C.Width + N)
C joondatud emaserva alumise servaga, veerise N	Y	Parent.Height - (C.Height + N)
C horisontaalselt emaseadme keskel	X	(Parent.Width - C.Width) / 2
C vertikaalselt emaseadme keskel	Y	(Parent.Height - C.Height) / 2

Juhtelementide C ja D vaheline seos	Atribuut	Valem	Illustratsioon
C horisontaalselt joondatud D-ga ja sama laiusega kui D	X	D.X
	Laius	D.Width
C vertikaalselt joondatud D-ga ja sama kõrgusega kui D	Y	D.Y
	Kõrgus	D.Height
C parem serv on joondatud D parema servaga	X	D.X + D.Width - C.Width
C alumine serv on joondatud D alumise servaga	Y	D.Y + D.Height - C.Height
C tsentreeritud horisontaalselt D suhtes	X	D.X + (D.Width - C.Width) / 2
C tsentreeritud vertikaalselt D suhtes	Y	D.Y + (D.Height - C.Height) /2
C asub D-st paremal ja vahega N	X	D.X + D.Width + N
C asub D all, vahega N	Y	D.Y + D.Height + N
C täidab ruumi D ja emaserva parema serva vahel	X	D.X + D.Width
	Laius	Parent.Width - C.X
C täidab ruumi D ja emaserva alumise serva vahel	Y	D.Y + D.Height
	Kõrgus	Parent.Height - C.Y

Hierarhiline paigutus

Kui koostate ekraanid, mis sisaldavad rohkem juhtelemente, muutub juhtelementide paigutamine vanemjuhtelementide suhtes järjest mugavamaks (ja vajalikuks) võrreldes ekraani või alamjuhtelemendi järgi paigutamisega. Korraldades oma juhtelemendid hierarhilisse struktuuri, saate valemeid hõlpsalt kirjutada ja hallata.

Galeriid

Kui kasutate rakenduses galeriid, peate juhtelemendid galerii mallis välja lülitama. Saate neid juhtelemente paigutada, kirjutades valemeid, mis kasutavad tehtemärki Peamine , mis viitab galeriimallile. Kasutage galeriimalli juhtelementide valemites atribuute Parent.TemplateHeight ja Parent.TemplateWidth ; ärge kasutage Parent.Width ja Parent.Height, mis viitavad galerii kogumahule.

Konteineri juhtelement

Juhtelementi Paigutuse konteiner saate kasutada peamise juhtelemendina.

Vaatleme päise näidet ekraani ülaosas. On tavaline, et päises on pealkiri ja mitu ikooni, mida kasutajad saavad kasutada. Sellise päise saate luua juhtelemendi Container abil , mis sisaldab juhtelementi Label ja kahte juhtelementi Icon .

Seadke nende juhtelementide atribuudid järgmistele väärtustele.

Atribuut	Päis	Menüü	Sulge	Ametinimetus
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Y	0	0	0	0
Laius	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Kõrgus	64	Parent.Height	Parent.Height	Parent.Height

Juhtelemendi Header puhul Parent viitab see ekraanile. Teiste Parent puhul viitab juhtelemendile Header .

Pärast nende valemite kirjutamist saate reguleerida juhtelemendi Päis suurust või asukohta , muutes selle atribuutide valemeid. Alamjuhtelementide suurused ja asukohad kohandatakse automaatselt.

Automaatse paigutuse konteineri juhtelemendid

Alamkomponentide automaatse paigutuse juhtelementide abil saate kasutada funktsiooni Automaatpaigutuse konteineri juhtelemendid. Need konteinerid määratlevad alamkomponentide positsiooni, nii et te ei pea kunagi seadma X-i, Y-i väärtusi konteineri komponendi jaoks. Samuti saab see levitada olemasoleva ruumi oma alamkomponentidele sätete alusel ning määrab alamkomponentidele nii vertikaalse kui ka horisontaalse joonduse. Lisateave: Konteineri automaatpaigutuse juhtelemendid

Komponendid

Kui kasutate mõnda muud funktsiooni nimega Komponendid, saate koostada koosteüksusi ja neid kogu rakenduses uuesti kasutada. Nagu juhtelemendi Container puhul , peaksid komponenti paigutatavad juhtelemendid põhinema oma asukoha ja suuruse valemidel Parent.Width ja-l Parent.Height, mis viitavad komponendi suurusele. Lisateave: Komponendi loomine.

Seadme suuruse ja asendi paigutuse kohandamine

Seni olete õppinud kasutama valemeid, et muuta iga juhtelemendi suurust sõltuvalt saadaolevast ruumist hoides samal ajal juhtelemendid üksteise suhtes joondatud. Kuid võite soovida või vajadusel teha olulisi muudatusi sõltuvalt erinevatest seadme mõõtudest ja paigutustest. Kui seadet pööratakse vertikaalpaigutusest horisontaalpaigutusse, võite vahetada vertikaalse paigutuse horisontaalseks vahetada. Suuremal seadmel saate rohkem sisu esitada või ümber korraldada, et saaksite atraktiivsema paigutuse. Väiksemas seadmes võib juhtuda, et peate sisu mitme ekraani vahel tükeldama.

Seadme paigutus

Ekraani atribuutide Laius ja Kõrgus vaikevalemid, nagu selles teemas varem kirjeldatud, ei pruugi pakkuda head kasutuskogemust, kui kasutaja seadet pöörab. Näiteks vertikaalpaigutusega telefoni jaoks mõeldud rakenduse DesignWidth on 640 ja DesignHeight 1136. Sama telefonirakendus horisontaalpaigutuse korral on atribuudi väärtused järgmised.

• Ekraani atribuudi Laius väärtuseks Max(App.Width, App.DesignWidth) on seatud. Rakenduse Width (1136) on suurem kui selle DesignWidth (640), seega annab valemi tulemuseks 1136.
• Ekraani atribuudi Kõrgus väärtuseks Max(App.Height, App.DesignHeight) on seatud. Rakenduse Height (640) on väiksem kui selle DesignHeight (1136), seega annab valemi tulemuseks 1136.

Kui ekraani kõrgus on 1136 ja seadme kõrgus (selles suunas) 640, peab kasutaja kogu sisu kuvamiseks ekraani vertikaalselt kerima, mis ei pruugi olla soovitud kogemus.

Ekraani atribuutide Laius ja Kõrgus kohandamiseks seadme suunaga saate kasutada järgmisi valemeid.

Laius = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Kõrgus = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Need valemid vahetavad rakenduse väärtusi DesignWidth ja DesignHeight vastavalt sellele, kas seadme laius on väiksem kui selle kõrgus (vertikaalne paigutus) või suurem kui selle kõrgus (horisontaalpaigutus).

Pärast ekraani valemite Laius ja Kõrgus kohandamist võiksite saadaoleva ruumi paremaks kasutamiseks ka ekraanil juhtelemente ümber korraldada. Näiteks kui mõlemad juhtelemendid hõivavad pool ekraani, võite need üksteise järgi panna vertikaalpaigutuses ja üksteise kõrvale horisontaalpaigutuses.

Saate kasutada ekraani atribuuti Orientatsioon , et määrata, kas ekraan on orienteeritud vertikaalselt või horisontaalselt.

Märkus.

Horisontaalpaigutuses kuvatakse juhtelemendid Ülemine ja Alumine vasak- ja parempoolsete juhtelementidena.

Juhtelement	Atribuut	Valem
Upper	X	0
Upper	Y	0
Upper	Laius	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Upper	Kõrgus	If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)
Lower	X	If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)
Lower	Y	If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)
Lower	Laius	Parent.Width - Lower.X
Lower	Kõrgus	Parent.Height - Lower.Y

Ekraani suurused ja piirid

Oma paigutust saate reguleerida vastavalt seadme suurusele. Ekraani Suurus omadus liigitab seadme praeguse suuruse. Suurus on positiivne täisarv. Ekraani suuruse tüüp defineerib nimetatud konstante lugevuse parandamiseks. Tabelis on toodud konstandid.

Konstant	Väärtus	Tüüpiline seadme tüüp (rakenduse vaikesätete kasutamine)
ScreenSize.Small	1	Telefon
ScreenSize.Medium	2	Vertikaalselt hoitud tahvelarvuti
ScreenSize.Large	3	Horisontaalselt hoitud tahvelarvuti
ScreenSize.ExtraLarge	4	Lauaarvuti

Nende suuruse abil saate teha otsuseid rakenduse paigutuse kohta. Näiteks kui soovite, et juhtelement oleks telefonisuuruses seadmes peidetud, kuid muul juhul nähtav, saate määrata juhtelemendi Nähtav selle valemi omadus:

Parent.Size >= ScreenSize.Medium

See valem annab tulemuseks tõsi kui suurus on keskmine või suurem ja vale muidu.

Kui soovite, et juhtelement hõivaks ekraani laiusest erineva osa, olenevalt ekraani suurusest, määrake juhtelemendi Laius selle valemi omadus:

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, 0.5,
    ScreenSize.Medium, 0.3,
    0.25
)

See valem seab väiksel ekraanil juhtelemendi laiuse poolele ekraani laiusest, keskmisel ekraanil kolm kümnendikku ekraani laiusest ja kõigil teistel ekraanidel veerandi ekraani laiusest.

Kohandatud piirid

Ekraani Suurus omadus arvutatakse ekraani võrdlemise teel Laius atribuudi rakenduse väärtustele Suuruse murdepunktid vara. See atribuut on ühe veeruga arvuline tabel, mis viitab laiuse piiridele, mis eraldab nimelisi ekraanisuuruseid.

Tahvelarvuti või veebi jaoks loodud rakenduses on rakenduse vaikeväärtus Suuruse murdepunktid vara on [600, 900, 1200]. Telefonidele loodud rakenduses on väärtus [1200, 1800, 2400]. (Telefonirakenduste väärtusi kahekordistatakse, kuna sellised rakendused kasutavad koordinaate, mis on teiste rakenduste koordinaatidega võrreldes topeltsuurusega.)

Saate oma rakenduse murdepunkte kohandada, muutes rakenduse väärtusi Suuruse murdepunktid vara. Vali Rakendus puuvaates valige Suuruse murdepunktid atribuutide loendis ja seejärel muutke väärtusi valemiribal. Rakendusele saate luua nii palju piire, kui vajate, kuid ainult suurused 1 – 4 vastavad nimetatud ekraani suurustele. Valemites saate viidata suurustele, mille numbrilised väärtused ületavad suvandit ExtraLarge (5, 6 jne).

Saate määrata ka vähem piire. Näiteks võib teie rakendusel olla vaja ainult kolme suurust (kaks piiri), nii et võimalikud ekraani suurused on väike, keskmine ja suur.

Teadaolevad piirangud

Autorluse lõuend ei vasta loodud suuruse valemitele. Tundlikkuse testimiseks salvestage ja avaldage rakendus ning avage see siis erineva suuruse ja asendiga seadmetes või veebibrauserites.

Kui kirjutate avaldisi või valemeid X, Jah, Laius ja Kõrgus Juhtelemendi atribuute, kirjutate need avaldised või valemid üle, kui lohistate juhtelemendi hiljem teise kohta või muudate selle suurust äärist lohistades.