Reaģējošu izkārtojumu izveide pamatnes programmās

Pirms veidojat pamatnes programmu pakalpojumā Power Apps, ir jānorāda, vai šo programmu pielāgot tālrunim vai planšetdatoram. Šī izvēle nosaka lielumu un formu pamatnei, uz kuras savu programmu būvējat.

Pēc šīs izvēles izdarīšanas varat veikt vēl dažas izvēles, ja atlasāt Iestatījumi > Displejs. Varat izvēlēties portreta vai ainavas orientāciju un ekrāna lielumu (tikai planšetdatoram). Varat arī bloķēt vai atbloķēt ekrāna malu proporcijas un atbalstīt (vai neatbalstīt) ierīces grozīšanu.

Veidojot ekrāna izkārtojumus, šīs izvēles veido pamatu visām pārējām jūsu veiktajām izvēlēm. Ja jūsu programma darbojas cita izmēra ierīcē vai tīmeklī, viss jūsu izkārtojums tiek mērogots tā, lai ietilptu ekrānā, kur programma darbojas. Piemēram, ja tālrunim paredzēta programma darbojas lielā pārlūkprogrammas logā, kompensēšanas nolūkos šī programma tiek mērogota un savai aizņemtajai telpai izskatās pārmērīgi liela. Programma nevar izmantot papildu pikseļus, rādot vairāk vadīklu vai vairāk satura.

Ja veidojat reaģējošu izkārtojumu, vadīklas var reaģēt uz dažādām ierīcēm un logu lielumiem, padarot dabiskākas dažādās funkcionalitātes. Lai panāktu reaģējošu izkārtojumu, ir jāpielāgo daži iestatījumi un jāraksta izteiksmes visā programmā.

Atspējot Mērogot, lai ietilpinātu

Katru ekrānu var konfigurēt tā, lai tā izkārtojums pielāgotos faktiskajai telpai, kur programma darbojas.

Reaģētspēja tiek aktivizēta, izslēdzot programmas iestatījumu Mērogot, lai ietilpinātu, kurš pēc noklusējuma ir ieslēgts. Kad šo iestatījumu izslēdzat, tiek izslēgts arī iestatījums Fiksēt proporcijas, jo noformēšana vairs nenotiek konkrētai ekrāna formai. (Joprojām varat norādīt, vai šī programma atbalsta ierīces grozīšanu.)

Lai savu programmu padarītu reaģētspējīgu, ir jāveic vēl citas darbības, taču šīs izmaiņas ir pirmais solis ceļā uz reaģētspējas nodrošināšanu.

Programmas un ekrāna izmēru apraksts

Lai nodrošinātu, ka programmas izkārtojumi reaģē uz ekrāna izmēru izmaiņām, ir jāraksta formulas, kur tiek izmantoti ekrāna rekvizīti Platums un Augstums. Lai parādītu šos rekvizītus, atveriet kādu programmu pakalpojumā Power Apps Studio un pēc tam atlasiet kādu ekrānu. Šo rekvizītu noklusējuma formulas ir redzamas labās rūts cilnē Papildu.

Platums = Max(App.Width, App.DesignWidth)

Augstums = Max(App.Height, App.DesignHeight)

Šīs formulas attiecas uz programmas rekvizītiem Platums, Augstums, DesignWidth un DesignHeight. Programmas rekvizīti Platums un Augstums atbilst tās ierīces vai pārlūkprogrammas izmēriem, kur šī programma darbojas. Ja lietotājs maina pārlūkprogrammas loga lielumu (vai pagriež ierīci, ja esat izslēdzis iestatījumu Fiksēt orientāciju), šo rekvizītu vērtības dinamiski mainās. Kad šīs vērtības mainās, vēlreiz tiek aprēķinātas formulas ekrāna rekvizītos Platums un Augstums.

Rekvizīti DesignWidth un DesignHeight nāk no dimensijām, kuras norādāt Iestatījumu rūtī Displejs. Piemēram, ja atlasāt tālruņa izkārtojumu portretorientācijā, DesignWidth vērtība ir 640 un DesignHeight vērtība ir 1136.

Tā kā šie rekvizīti tiek izmantoti formulās ekrāna rekvizītu Platums un Augstums aprēķināšanai, rekvizītu DesignWidth un DesignHeight varat uzskatīt par minimālajiem izmēriem, kādiem savu programmu veidojat. Ja faktiskais laukums, kas jūsu programmai ir pieejams, ir mazāks pat par šiem minimālajiem izmēriem, formulas ekrāna rekvizītiem Platums un Augstums gādā par to, lai to vērtības nekļūtu mazākas par minimālajām. Tādā gadījumā lietotājam ir nepieciešams ritināt, lai skatītu visu ekrāna saturu.

Kad esat norādījis savas programmas rekvizītus DesignWidth un DesignHeight, (vairumā gadījumu) nav nepieciešams mainīt noklusējuma formulas katra ekrāna rekvizītiem Platums un Augstums. Tālāk šajā tēmā ir aprakstīti gadījumi, kad jūs varētu vēlēties pielāgot šīs formulas.

Formulu izmantošana dinamiskam izkārtojumam

Lai izveidotu reaģējošu dizainu, katras vadīklas lielums ir jāatrod un jānorāda, izmantojot formulas, nevis absolūtas (konstantas) koordinātu vērtības. Šīs formulas norāda katras vadīklas pozīciju un lielumu, izsakot to pret ekrāna kopējo lielumu vai relatīvi pret citām ekrānā esošajām vadīklām.

Svarīgi

Kad ir ierakstītas formulas vadīklas rekvizītiem X, Y, Platums un Augstums, jūsu formulas tiek pārrakstītas ar konstantām vērtībām, ja pēc tam šo vadīklu ievelkat pamatnes redaktorā. Kad dinamiska izkārtojuma panākšanas nolūkos sākat izmantot formulas, ir jācenšas izvairīties no vadīklu vilkšanas.

Vienkāršākajā gadījumā viena vadīkla aizpilda visu ekrānu. Lai radītu šo efektu, vadīklas rekvizīti ir jāiestata uz tālāk norādītajām vērtībām.

Rekvizīts	Vērtība
X	0
Y	0
Platums	Parent.Width
Augstums	Parent.Height

Šīs formulas izmanto operatoru Parent. Vadīklai, kas ir novietota tieši ekrānā, Parent attiecas uz ekrānu. Ar šīm rekvizītu vērtībām vadīkla tiek rādīta ekrāna kreisajā augšējā stūrī (0, 0) un vadīklas vērtības Platums un Augstums ir vienādas ar ekrāna vērtībām.

Tālāk šajā tēmā jūs šos principus (un operatoru Parent ) izmantosiet, lai pozicionētu vadīklas citos konteineros, piemēram, galerijās, grupu vadīklās un komponentos.

Ja vēlaties, vadīkla var aizpildīt tikai ekrāna augšējo pusi. Lai radītu šo efektu, iestatiet rekvizītu Augstums uz Parent.Height /2 un atstājiet pārējās formulas nemainītas.

Ja vēlaties, lai tā paša ekrāna apakšējo pusi aizpildītu otra vadīkla, tās formulas varat izveidot vismaz divos citos veidos. Vienkāršības labad varat izmantot tālāk norādīto metodi.

Vadīkla	Rekvizīts	Formula
Augšējais	X	0
Augšējais	Y	0
Augšējais	Platums	Parent.Width
Augšējais	Augstums	Parent.Height / 2
Apakšējā	X	0
Apakšējā	Y	Parent.Height / 2
Apakšējā	Platums	Parent.Width
Apakšējā	Augstums	Parent.Height / 2

Šī konfigurācija sasniegtu vēlamo efektu, taču gadījumā, ja izlemjat mainīt vadīklu relatīvos lielumus, jums būtu nepieciešams rediģēt katru formulu. Piemēram, jūs varētu izlemt, ka augšējai vadīklai augšā ir jāaizņem tikai trešā daļa no ekrāna, bet apakšējai vadīklai apakšā ir jāaizpilda divas trešdaļas.

Lai radītu šādu efektu, ir jāatjaunina vadīklas Augšējais rekvizīts Augstums un vadīklas Apakšējais rekvizīti Y un Augstums. Tā vietā apsveriet iespēju vadīklas Apakšējais formulas uzrakstīt, izmantojot vadīklu Augšējais (un attiecīgo vadīklu pašu), kā parādīts nākamajā piemērā.

Vadīkla	Rekvizīts	Formula
Augšējais	X	0
Augšējais	Y	0
Augšējais	Platums	Parent.Width
Augšējais	Augstums	Parent.Height / 3
Apakšējais	X	0
Apakšējais	Y	Upper.Y + Upper.Height
Apakšējais	Platums	Parent.Width
Apakšējā	Augstums	Parent.Height - Lower.Y

Ja izmantojat šīs formulas, ir jāmaina tikai vadīklas Augšējais rekvizīts Augstums, lai norādītu citādu daļu no ekrāna augstuma. Vadīkla Apakšējais automātiski pārvietojas un maina lielumu saskaņā ar šīm izmaiņām.

Varat izmantot šos formulu modeļus, lai norādītu parastās izkārtojuma attiecības starp vadīklu, sauktu par C, un tās primāro (Parent) vai vienādranga vadīklu, sauktu par D.

Attiecības starp vadīklu C un tās primāro elementu	Rekvizīts	Formula	Ilustrācija
C aizpilda primārā elementa platumu ar piemali N	X	N
	Platums	Parent.Width - (N * 2)
C aizpilda primārā elementa augstumu ar piemali N	Y	N
	Augstums	Parent.Height - (N * 2)
Vadīkla C ir novietota gar primārā elementa labo malu ar piemali N	X	Parent.Width - (C.Width + N)
Vadīkla C ir novietota gar primārā elementa apakšējo malu ar piemali N	Y	Parent.Height - (C.Height + N)
Vadīkla C ir horizontāli centrēta uz primārā elementa	X	(Parent.Width - C.Width) / 2
Vadīkla C ir vertikāli centrēta uz primārā elementa	Y	(Parent.Height - C.Height) / 2

Attiecības starp C un D	Rekvizīts	Formula	Ilustrācija
Vadīkla C ir horizontāli novietota atbilstoši D, un tās platums ir vienāds ar D platumu	X	D.X
	Platums	D.Width
Vadīkla C ir vertikāli novietota atbilstoši D, un tās augstums ir vienāds ar D augstumu	Y	D.Y
	Augstums	D.Height
Vadīklas C labā mala ir novietota atbilstoši vadīklas D labajai malai	X	D.X + D.Width - C.Width
Vadīklas C apakšējā mala ir novietota atbilstoši vadīklas D apakšējai malai	Y	D.Y + D.Height - C.Height
Vadīkla C ir horizontāli centrēta pret D	X	D.X + (D.Width - C.Width) / 2
Vadīkla C ir vertikāli centrēta pret D	Y	D.Y + (D.Height - C.Height) /2
Vadīkla C ir novietota pa labi no D ar atstarpi N	X	D.X + D.Width + N
Vadīkla C ir novietota zem D ar atstarpi N	Y	D.Y + D.Height + N
Vadīkla C aizpilda laukumu starp D un primārā elementa labo malu	X	D.X + D.Width
	Platums	Parent.Width - C.X
Vadīkla C aizpilda laukumu starp D un primārā elementa apakšējo malu	Y	D.Y + D.Height
	Augstums	Parent.Height - C.Y

Hierarhisks izkārtojums

Veidojot ekrānus, kuros ir vairāk vadīklu, ērtāk (vai pat nepieciešams) kļūs vadīklas pozicionēt relatīvi pret primārās vadīklas pozīciju, nevis pret ekrānu vai vienādranga vadīklu. Savas vadīklas sakārtojot hierarhiskā struktūrā, formulas uzrakstīt un uzturēt kļūst vienkāršāk.

Galerijas

Ja savā programmā izmantojat galeriju, vadīklas ir jāizkārto galerijas veidnē. Šīs vadīklas varat pozicionēt, rakstot formulas, kur tiek izmantots operators Parent, kurš apzīmē galerijas veidni. Formulās, kas paredzētas vadīklām galerijas veidnē, ir jāizmanto rekvizīti Parent.TemplateHeight un Parent.TemplateWidth; neizmantojiet rekvizītus Parent.Width un Parent.Height, kuri attiecas uz vispārējo galerijas lielumu.

Konteinera vadīkla

Jūs varat izmantot Izkārtojuma konteineru kā primāro vadīklu.

Apskatiet galvenes piemēru ekrāna augšdaļā. Bieži vien tiek izmantota galvene ar nosaukumu un vairākām ikonām, kuras lietotāji var izmantot. Šādu galveni varat izveidot, izmantojot vadīklu Konteiners, kur atrodas vadīkla Etiķete un divas vadīklas Ikona.

Šo vadīklu rekvizītiem iestatiet tālāk norādītās vērtības.

Rekvizīts	Galvene	Izvēlne	Aizvērt	Nosaukums
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Y	0	0	0	0
Platums	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Augstums	64	Parent.Height	Parent.Height	Parent.Height

Vadīklai Galvene operators Parent attiecas uz ekrānu. Citām vadīklām operators Parent attiecas uz vadīklu Galvene.

Kad ir uzrakstītas šīs formulas, vadīklas Galvene izmēru un pozīciju varat regulēt, mainot formulas tās rekvizītiem. Sekundāro vadīklu izmēri un pozīcijas tiks atbilstoši pielāgotas automātiski.

Automātiskā izkārtojuma konteinera vadīklas

Varat izmantot līdzekli, automātiskās izkārtojuma konteinera vadīklas, lai automātiski izkārtotu pakārtotos komponentus. Šie konteineri nosaka pakārtoto komponentu novietojumu, lai nekad netiktu iestatīta X, Y vērtība komponentam konteinera iekšienē. Turklāt tas var izplatīt pieejamo vietu saviem pakārtotajiem komponentiem, pamatojoties uz iestatījumiem, kā arī nosaka gan vertikālo, gan horizontālo atvasināto komponentu līdzinājumu. Papildinformācija: Automātiska izkāŗtojuma konteinera vadīklas

Komponenti

Ja izmantojat citu līdzekli ar nosaukumu Komponenti, varat izveidot veidošanas blokus un atkārtoti tos izmantot visā programmā. Līdzīgi kā ar vadīklu Konteiners, arī komponentā ievietoto vadīklu pozīcijas un lieluma formulām ir jābūt balstītām uz vērtībām Parent.Width un Parent.Height, kuras attiecas uz komponenta lielumu. Papildinformācija: Komponenta izveide.

Izkārtojuma pielāgošana ierīces lielumam un orientācijai

Līdz šim jūs esat apguvis, kā izmantot formulas, lai mainītu katras vadīklas lielumu, reaģējot uz pieejamo vietu, vienlaikus saglabājot vadīklu savstarpējo izkārtojumu. Taču, reaģējot uz dažādiem ierīces izmēriem un orientāciju, var būt nepieciešamas būtiskākas izkārtojuma izmaiņas. Kad ierīce tiek pagriezta, piemēram, no portreta uz ainavas orientāciju, varat vēlēties pārslēgties no vertikāla izkārtojuma uz horizontālo. Lielākā ierīcē varat rādīt vairāk satura vai to pārkārtot, lai izkārtojums kļūtu pievilcīgāks. Mazākā ierīcē var būt nepieciešams saturu sadalīt pa vairākiem ekrāniem.

Ierīces orientācija

Noklusējuma formulas ekrāna rekvizītiem Platums un Augstums, kā šajā tēmā bija aprakstīts jau iepriekš, ne vienmēr nodrošina labu funkcionalitāti, ja lietotājs ierīci pagriež. Piemēram, programmai, kas ir paredzēta tālrunim portretorientācijā, rekvizīta DesignWidth vērtība ir 640 un rekvizīta DesignHeight vērtība ir 1136. Tai pašai programmai, bet tālrunim ainavorientācijā, ir tālāk norādītās rekvizītu vērtības.

• Ekrāna rekvizīts Platums ir iestatīts uz Max(App.Width, App.DesignWidth). Programmas Platums (1136) ir lielāks pat tās rekvizītu DesignWidth (640), tādēļ formulas rezultāts ir 1136.
• Ekrāna rekvizīts Augstums ir iestatīts uz Max(App.Height, App.DesignHeight). Programmas Augstums (640) ir mazāks pat tās rekvizītu DesignHeight (1136), tādēļ formulas rezultāts ir 1136.

Kad ekrāna Augstums ir 1136 un ierīces augstums (šajā orientācijā) ir 640, lietotājam ir nepieciešams ekrānu ritināt vertikāli, lai parādītu visu tā saturu, un tas varētu nebūt lietošanas veids, kādu vēlējāties panākt.

Lai ekrāna rekvizītus Platums un Augstums pielāgotu ierīces orientācijai, varat izmantot tālāk norādītās formulas.

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

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

Šīs formulas apmaina vietām programmas vērtības DesignWidth un DesignHeight, balstoties uz to, vai ierīces platums ir mazāks par tās augstumu (portretorientācija) vai lielāks par tās augstumu (ainavorientācija).

Kad ir pielāgotas formulas ekrāna rekvizītiem Platums un Augstums, varat vēlēties pārkārtot ekrānā rādītās vadīklas, lai labāk izmantotu pieejamo vietu. Piemēram, ja katra no abām vadīklām aizņem pusi ekrāna, portretorientācijā varat tās sakraut vertikāli, bet ainavorientācijā novietot vienu otrai līdzās.

Lai noteiktu, vai ekrāns ir orientēts vertikāli vai horizontāli, varat izmantot ekrāna rekvizītu Orientācija.

Piezīme

Ainavorientācijā vadīklas Augšējais un Apakšējais tiek rādītas kā kreisā un labā vadīkla.

Vadīkla	Rekvizīts	Formula
Augšējais	X	0
Augšējais	Y	0
Augšējais	Platums	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Augšējais	Augstums	If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)
Apakšējais	X	If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)
Apakšējais	Y	If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)
Apakšējais	Platums	Parent.Width - Lower.X
Apakšējā	Augstums	Parent.Height - Lower.Y

Ekrāna lielumi un pārtraukumpunkti

Savu izkārtojumu varat pielāgot atkarībā no ierīces lieluma. Ekrāna rekvizīts Lielums klasificē pašreizējo ierīces lielumu. Lielums ir pozitīvs vesels skaitlis, lasāmības uzlabošanas nolūkos tips ScreenSize norāda nosauktas konstantes. Šīs konstantes ir norādītas nākamajā tabulā.

Konstante	Vērtība	Tipiskais ierīces tips (izmantojot noklusējuma programmas iestatījumus)
ScreenSize.Small	1	Tālrunis
ScreenSize.Medium	2	Planšetdators, turēts vertikāli
ScreenSize.Large	3	Planšetdators, turēts horizontāli
ScreenSize.ExtraLarge	4	Galddators

Izmantojiet šos lielumus, lai pieņemtu lēmumus par savas programmas izkārtojumu. Piemēram, ja vēlaties, lai tālruņa izmēra ierīcē vadīkla tiktu slēpta, bet citādi būtu redzama, vadīklas rekvizītu Redzams varat iestatīt uz šādu formulu:

Parent.Size >= ScreenSize.Medium

Šīs formulas rezultāts ir true (patiess), ja lielums ir vidējs vai lielāks, bet citādi rezultāts ir false (aplams).

Ja vēlaties, lai atkarībā no ekrāna lieluma vadīkla aizņemtu atšķirīgu ekrāna platuma daļu, vadīklas rekvizītam Platums iestatiet šādu formulu:

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

Ar šo formulu tiek iestatīts, ka mazā ekrānā vadīklas platums ir puse no ekrāna platuma, vidējā ekrānā tā ir trīs desmitdaļas no ekrāna platuma un visos pārējos ekrānos tā ir ceturtā daļa ekrāna platuma.

Pielāgoti pārtraukumpunkti

Ekrāna rekvizīts Lielums tiek aprēķināts, ekrāna rekvizītu Platums salīdzinot ar vērtībām programmas rekvizītā SizeBreakpoints. Šis rekvizīts ir skaitļu tabula ar vienu kolonnu, kur ir norādīti nosauktos ekrāna lielumus atdalošie platuma pārtraukumpunkti.

Planšetdatoram vai tīmeklim paredzētā programmā noklusējuma vērtība programmas rekvizītā SizeBreakpoints ir [600, 900, 1200]. Tālruņiem paredzētā programmā šī vērtība ir [1200, 1800, 2400]. (Vērtības tālruņa programmām ir divkāršotas, jo šādas programmas izmanto koordinātes, kas faktiski dubulto citās programmās izmantotās koordinātes.)

Programmas pārtraukumpunktus varat pielāgot, mainot vērtības programmas rekvizītā SizeBreakpoints. Koka skata atlasiet vienumu Programma, rekvizītu sarakstā atlasiet vienumu SizeBreakpoints un pēc tam rediģējiet vērtības formulas joslā. Varat izveidot tik pārtraukumpunktu, cik vien jūsu programmai nepieciešams, taču nosauktiem ekrāna lielumiem atbilst tikai 1.–4. lielums. Formulās varat atsaukties uz lielumiem aiz lieluma ExtraLarge, izmantojot to skaitliskās vērtības (5, 6 un tā tālāk).

Varat norādīt arī mazāku pārtraukumpunktu skaitu. Piemēram, jūsu programmai var būt nepieciešami tikai trīs lielumi (divi pārtraukumpunkti), tādēļ iespējamie ekrāna lielumi būs Mazs, Vidējs un Liels.

Zināmie ierobežojumi

Autorēšanas pamatne nereaģē uz izveidotajām lieluma noteikšanas formulām. Lai testētu reaģējošo uzvedību, saglabājiet savu programmu un publicējiet to, un pēc tam atveriet šo programmu dažāda lieluma un orientācijas ierīcēs vai pārlūkprogrammas logos.

Ja izteiksmes vai formulas ierakstāt vadīklas rekvizītos X, Y, Platums un Augstums, šīs izteiksmes vai formulas tiek pārrakstītas, ja vēlāk vadīklu pārvelkat uz citu vietu vai vadīklas lielumu maināt, velkot aiz tās apmales.

Piezīme

Kādas ir jūsu dokumentācijas valodas preferences? Aizpildiet īsu aptauju. (ņemiet vērā, ka aptauja ir angļu valodā)

Aptaujai būs nepieciešamas aptuveni septiņas minūtes. Nekādi personas dati netiks vākti (paziņojums par konfidencialitāti).