Kreiranje prilagodljivih rasporeda u aplikacijama sa podlogom

Pre nego što napravite aplikaciju sa podlogom u usluzi Power Apps, odredite da li želite da prilagodite aplikaciju za telefon ili tablet. Ovaj izbor određuje veličinu i oblik podloge na kojoj ćete graditi aplikaciju.

Nakon što to izaberete, možete da napravite još nekoliko izbora ako izaberete Postavke > Prikaz. Možete odabrati uspravnu ili položenu orijentaciju i veličinu ekrana (samo za tablet). Takođe možete zaključati ili otključati odnos širina/visina i podršku za rotaciju uređaja (ili ne).

Ti izbori leže u osnovi svakog drugog izbora koji napravite dok dizajnirate rasporede ekrana. Ako se vaša aplikacija pokreće na uređaju druge veličine ili na vebu, celokupni raspored će se prilagoditi ekranu na kome se aplikacija pokreće. Ako se aplikacija dizajnirana za telefon pokreće u velikom prozoru pregledača, na primer, aplikacija se skalira kako bi nadoknadila svoj izgled i izgleda preveliko u tom prostoru. Aplikacija ne može da iskoristi prednost dodatnih piksela prikazujući više kontrola ili više sadržaja.

Ako kreirate prilagodljiv raspored, kontrole mogu da odgovore na različite uređaje ili veličinu prozora, čineći da različita iskustva izgledaju prirodnije. Da biste ostvarili prilagodljiv raspored, prilagođavate neka podešavanja i pišete izraze u celoj aplikaciji.

Onemogućavanje opcije „Skaliraj da bi se uklopilo“

Možete da konfigurišete svaki ekran tako da se njegov izgled prilagodi stvarnom prostoru u kome se aplikacija koristi.

Aktivirajte prilagodljivost isključivanjem podešavanja aplikacije Skaliraj da bi se uklopilo, koje je podrazumevano uključeno. Kad isključite to podešavanje, isključujete i Zaključaj odnos širina/visina, jer više ne dizajnirate za određeni oblik ekrana. (I dalje možete da odredite da li vaša aplikacija podržava rotaciju uređaja.)

Da biste prilagodili aplikaciju, morate preduzeti dodatne korake, ali ova promena je prvi korak ka omogućavanju prilagodljivosti.

Objašnjenje dimenzija aplikacije i ekrana

Kako bi rasporedi aplikacije reagovali na promene u dimenzijama ekrana, napisaćete formule koje koriste svojstva ekrana Width i Height. Da biste prikazali ova svojstva, otvorite aplikaciju u programu Power Apps Studio, a zatim izaberite ekran. Podrazumevane formule za ova svojstva se prikazuju na kartici Napredno desnog okna.

Širina = Max(App.Width, App.DesignWidth)

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

Ove formule se odnose na svojstva Width, Height, DesignWidth i DesignHeight aplikacije. Svojstva aplikacije Width i Height odgovaraju dimenzijama uređaja ili prozora pregledača u kome se aplikacija koristi. Ako korisnik promeni veličinu prozora pregledača (ili rotira uređaj ako ste isključili opciju Zaključaj orijentaciju), vrednosti ovih svojstava se dinamički menjaju. Formule u svojstvima ekrana Width i Height se ponovo izračunavaju kada se te vrednosti promene.

Svojstva DesignWidth i DesignHeight potiču iz dimenzija koje ste naveli u oknu Prikaz u Podešavanjima. Na primer, ako izaberete raspored telefona u uspravnom položaju, DesignWidth je 640, a DesignHeight je 1136.

Kao što se koriste u formulama za svojstva ekrana Width i Height, o svojstvima DesignWidth i DesignHeight možete misliti kao minimalnim dimenzijama za koje ćete dizajnirati aplikaciju. Ako je stvarna površina dostupna vašoj aplikaciji još manja od ovih minimalnih dimenzija, formule za svojstva ekrana Width i Height osiguravaju da njihove vrednosti neće postati manje od minimalnih. U tom slučaju, korisnik mora da se pomera da bi pregledao sav sadržaj ekrana.

Kada uspostavite DesignWidth i DesignHeight aplikacije, nećete morati (u većini slučajeva) da menjate podrazumevane formule za svojstva Width i Height svakog ekrana. Kasnije, u ovoj temi će se govoriti o slučajevima u kojima bi trebalo da prilagodite ove formule.

Korišćenje formula za dinamički raspored

Da biste kreirali prilagodljiv dizajn, svaku kontrolu locirate i određujete koristeći formule umesto apsolutnih (konstantnih) vrednosti koordinata. Ove formule izražavaju položaj i veličinu svake kontrole u odnosu na ukupnu veličinu ekrana ili u odnosu na druge kontrole na ekranu.

Važno

Kada napišete formule za svojstva X, Y, Width i Height kontrole, vaše formule će se prepisati konstantnim vrednostima ako naknadno prevučete kontrolu u uređivač podloge. Kada počnete da koristite formule za postizanje dinamičkog rasporeda, trebalo bi da izbegavate prevlačenje kontrola.

U najjednostavnijem slučaju, jedna kontrola ispunjava čitav ekran. Da biste kreirali taj efekat, postavite svojstva kontrole na ove vrednosti:

Svojstvo	Vrednost
X	0
Y	0
Širina	Parent.Width
Visina	Parent.Height

Ove formule koriste operator Parent. Za kontrolu postavljenu direktno na ekran, Parent se odnosi na ekran. Uz ove vrednosti svojstava, kontrola se prikazuje u gornjem levom uglu ekrana (0, 0) i ima iste vrednosti Width i Height kao ekran.

Kasnije u ovoj temi, primenićete ove principe (i operator Parent) za pozicioniranje kontrola unutar drugih kontejnera, kao što su galerije, kontrole grupa i komponente.

Kao alternativa, kontrola može da ispuni samo gornju polovinu ekrana. Da biste kreirali ovaj efekat, podesite svojstvo Height na Parent.Height / 2, a ostale formule ostavite nepromenjene.

Ako želite da druga kontrola popuni donju polovinu istog ekrana, možete preduzeti najmanje dva druga pristupa konstrukciji njenih formula. Radi jednostavnosti, možete koristiti ovaj pristup:

Kontrola	Svojstvo	Formula
Viši	X	0
Viši	Y	0
Viši	Širina	Parent.Width
Viši	Visina	Parent.Height / 2
donjolužički	X	0
donjolužički	Y	Parent.Height / 2
donjolužički	Širina	Parent.Width
donjolužički	Visina	Parent.Height / 2

Ova konfiguracija bi postigla željeni efekat, ali trebalo bi da izmenite svaku formulu ako ste se predomislili u vezi sa relativnim veličinama kontrola. Na primer, možda odlučite da gornja kontrola zauzima samo gornju trećinu ekrana, dok donja kontrola ispunjava donje dve trećine.

Da biste kreirali taj efekat, morate da izmenite svojstvo Height kontrole Upper i svojstva Y i Height kontrole Lower. Umesto toga, razmislite o pisanju formula za kontrolu Lower u smislu kontrole Upper (i sebe), kao u ovom primeru:

Kontrola	Svojstvo	Formula
Viši	X	0
Viši	Y	0
Viši	Širina	Parent.Width
Viši	Visina	Parent.Height / 3
Lower	X	0
Lower	Y	Upper.Y + Upper.Height
Lower	Širina	Parent.Width
donjolužički	Visina	Parent.Height - Lower.Y

Kada postavite ove formule, treba samo da promenite svojstvo Height kontrole Upper za izražavanje različitog dela visine ekrana. Kontrola Lower se automatski pomera i menja veličinu radi obračuna promene.

Možete koristiti ove obrasce formula za izražavanje uobičajenih rasporeda relacija između kontrole, nazvane C, i njene nadređene ili srodne kontrole, pod nazivom D.

Relacija između kontrole C i njene nadređene kontrole	Svojstvo	Formula	Ilustracija
C ispunjava širinu nadređene kontrole, sa marginom veličine N	X	N
	Širina	Parent.Width - (N * 2)
C ispunjava visinu nadređene kontrole, sa marginom veličine N	Y	N
	Visina	Parent.Height - (N * 2)
C poravnato sa desnom ivicom nadređene kontrole, sa marginom veličine N	X	Parent.Width - (C.Width + N)
C poravnato sa donjom ivicom nadređene kontrole, sa marginom veličine N	Y	Parent.Height - (C.Height + N)
C centrirano vodoravno prema nadređenoj kontroli	X	(Parent.Width - C.Width) / 2
C centrirano uspravno prema nadređenoj kontroli	Y	(Parent.Height - C.Height) / 2

Relacija između kontrole C i kontrole D	Svojstvo	Formula	Ilustracija
C vodoravno poravnato sa D i iste širine kao D	X	D.X
	Širina	D.Width
C uspravno poravnato sa D i iste visine kao D	Y	D.Y
	Visina	D.Height
Desna ivica kontrole C poravnato sa desnom ivicom kontrole D	X	D.X + D.Width - C.Width
Donja ivica kontrole C poravnata sa donjom ivicom kontrole D	Y	D.Y + D.Height - C.Height
C centrirano vodoravno u odnosu na D	X	D.X + (D.Width - C.Width) / 2
C centrirano uspravno u odnosu na D	Y	D.Y + (D.Height - C.Height) /2
C postavljeno desno od D sa razmakom N	X	D.X + D.Width + N
C postavljeno ispod D sa razmakom N	Y	D.Y + D.Height + N
C popunjava prostor između D i desne ivice nadređene kontrole	X	D.X + D.Width
	Širina	Parent.Width - C.X
C popunjava prostor između D i donje ivice nadređene kontrole	Y	D.Y + D.Height
	Visina	Parent.Height - C.Y

Hijerarhijski raspored

Dok konstruišete ekrane koji sadrže više kontrola, postaće prikladnije (ili čak neophodno) da postavljanje kontrole u odnosu na nadređenu kontrolu, a ne u odnosu na ekran ili kontrolu srodne kontrole. Organizovanjem kontrola u hijerarhijsku strukturu, možete olakšati pisanje i održavanje formula.

Galerije

Ako koristite galeriju u aplikaciji, moraćete da postavite kontrole unutar predloška galerije. Možete da postavite ove kontrole tako što ćete napisati formule koje koriste operator Parent, koji će upućivati na predložak galerije. U formulama na kontrolama unutar predloška galerije, koristite svojstva Parent.TemplateHeight i Parent.TemplateWidth; ne koristite svojstva Parent.Width i Parent.Height, koja upućuju na ukupnu veličinu galerije.

Kontrola kontejnera

Možete koristiti kontrolu Kontejner rasporeda kao nadređenu kontrolu.

Razmotrite primer zaglavlja na vrhu ekrana. Uobičajeno je da imate zaglavlje sa naslovom i nekoliko ikona sa kojima korisnici mogu da stupaju u interakciju. Takvo zaglavlje možete konstruisati koristeći kontrolu kontejner, koja sadrži kontrolu oznaka i dve kontrole ikona:

Postavite svojstva za ove kontrole na ove vrednosti:

Svojstvo	Zaglavlje	Meni	Zatvaranje	Radno mesto
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Y	0	0	0	0
Širina	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Visina	64	Parent.Height	Parent.Height	Parent.Height

Za kontrolu zaglavlje, Parent se odnosi na ekran. Za ostale kontrole, Parent se odnosi na kontrolu zaglavlje.

Kada napišete te formule, možete podesiti veličinu ili položaj kontrole zaglavlje promenom formula za svoja svojstva. Veličine i položaji podređenih kontrola se automatski prilagođavaju u skladu sa njom.

Kontrole kontejnera sa automatskim rasporedom

Možete da koristite funkciju, kontrole kontejnera automatskog rasporeda da biste automatski rasporedili podređene komponente. Ovi kontejneri određuju položaj podređenih komponenti tako da nikada ne morate da podesite X, Y za komponentu unutar kontejnera. Takođe, može da distribuira raspoloživi prostor svojim podređenim komponentama na osnovu podešavanja, kao i da određuje vertikalno i horizontalno poravnanje podređenih komponenti. Još informacija: Kontrole kontejnera sa automatskim rasporedom

Komponente

Ako koristite drugu funkciju pod imenom "Komponente", možete da konstruišete građevinske blokove i ponovo ih koristite u celoj aplikaciji. Kao i kod kontrole kontejner, kontrole koje postavljate u komponentu treba da se zasnivaju na njihovim formulama položaja i veličine Parent.Width i Parent.Height, koje se odnose na veličinu komponente. Još informacija: Kreiranje komponente.

Prilagođavanje rasporeda za veličinu i orijentaciju uređaja

Do sada ste naučili kako da upotrebljavate formule za promenu veličine svake kontrole u odnosu na raspoloživi prostor, istovremeno držeći kontrole poravnate jedna prema drugoj. Ali možda ćete želeti ili morati da napravite značajnije promene izgleda kao odgovor na različite veličine i orijentacije uređaja. Kad se uređaj, na primer, okrene iz uspravnog u vodoravni položaj, možda bi trebalo da pređete iz uspravnog u vodoravni položaj. Na većem uređaju možete predstaviti više sadržaja ili ga preurediti da biste dobili privlačniji raspored. Na manjem uređaju, možda ćete morati da podelite sadržaj na više ekrana.

Orijentacija uređaja

Podrazumevane formule za svojstva Width i Height ekrana, kao što je opisano ranije u ovoj temi, neće nužno pružiti dobro iskustvo ako korisnik rotira uređaj. Na primer, aplikacija dizajnirana za telefon u uspravnom položaju ima DesignWidth od 640 i DesignHeight od 1136. Ista aplikacija na telefonu u vodoravnom položaju imaće ove vrednosti svojstava:

• Svojstvo ekrana Width je postavljeno na Max(App.Width, App.DesignWidth). Svojstvo aplikacije Width (1136) je veće od svojstva DesignWidth (640), tako da rezultat formule iznosi 1136.
• Svojstvo ekrana Height je postavljeno na Max(App.Height, App.DesignHeight). Svojstvo aplikacije Height (640) je veće od svojstva Design (1136), tako da rezultat formule iznosi 1136.

Sa svojstvom ekrana Height od 1136 i visine uređaja (u ovom položaju) od 640, korisnik mora da se kreće uspravno po ekranu da bi prikazao sav sadržaj, što možda nije iskustvo koje želite.

Da biste prilagodili svojstva ekrana Width i Height prema orijentaciji uređaja, možete koristiti ove formule:

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

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

Ove formule menjaju vrednosti aplikacije DesignWidth i DesignHeight, zasnovano na tome da li je širina uređaja manja od njegove visine (uspravni položaj) ili veća od njegove visine (vodoravni položaj).

Kada podesite formule ekrana Width i Height, možda biste želeli i da preuredite kontrole na vašem ekranu kako biste bolje iskoristili raspoloživi prostor. Na primer, ako svaka od dve kontrole zauzima polovinu ekrana, možete ih složiti uspravno u uspravnom položaju, ali ih poređati jednu pored druge u vodoravnom položaju.

Možete koristiti svojstva ekrana Orientation da odredite da li je ekran orijentisan uspravno ili vodoravno.

Napomena

U vodoravnom položaju, kontrole Upper i Lower se prikazuju kao leva i desna kontrola.

Kontrola	Svojstvo	Formula
Viši	X	0
Viši	Y	0
Viši	Širina	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Viši	Visina	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	Širina	Parent.Width - Lower.X
donjolužički	Visina	Parent.Height - Lower.Y

Veličine ekrana i tačke prekida

Raspored možete prilagoditi na osnovu veličine uređaja. Svojstvo ekrana Size klasifikuje trenutnu veličinu uređaja. Veličina je pozitivan celi broj; tip ScreenSize obezbeđuje imenovane konstante za pomoć u čitljivosti. Ova tabela prikazuje konstante:

Konstanta	Vrednost	Uobičajeni tip uređaja (koristeći podrazumevana podešavanja aplikacije)
ScreenSize.Small	1	Telefon
ScreenSize.Medium	2	Tablet koji se drži uspravno
ScreenSize.Large	3	Tablet koji se drži vodoravno
ScreenSize.ExtraLarge	4	Stoni računar

Koristite ove veličine za donošenje odluka o izgledu aplikacije. Na primer, ako želite da kontrola bude sakrivena na uređaju veličine telefona, ali je inače vidljiva, možete podesiti svojstvo kontrole Visible prema ovoj formuli:

Parent.Size >= ScreenSize.Medium

Ova formula se izračunava kao tačno kada je veličina srednja ili veća, a inače netačno.

Ako želite da kontrola zauzima drugačiji deo širine ekrana na osnovu veličine ekrana, podesite svojstvo kontrole Width prema ovoj formuli:

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

Ova formula postavlja širinu kontrole na polovinu širine ekrana na malom ekranu, tri desetine širine ekrana na srednjem ekranu i četvrtinu širine ekrana na svim ostalim ekranima.

Prilagođene tačke prekida

Svojstvo ekrana Size se izračunava upoređivanjem svojstva ekrana Width sa vrednostima u svojstvu aplikacije SizeBreakpoints. Ovo svojstvo je tabela brojeva sa jednom kolonom koja označava tačke prekida širine koje razdvajaju imenovane veličine ekrana:

U aplikaciji kreiranoj za tablet ili veb, podrazumevana vrednost u svojstvu aplikacije SizeBreakpoints su [600, 900, 1200]. U aplikaciji kreiranoj za telefone, ta vrednost je [1200, 1800, 2400]. (Vrednosti za aplikacije za telefone su udvostručene, jer takve aplikacije koriste koordinate koje efektivno udvostručuju koordinate koje se koriste u drugim aplikacijama.)

Tačke prekida aplikacije možete prilagoditi promenom vrednosti u svojstvu aplikacije SizeBreakpoints. Izaberite Aplikacija u prikazu stabla, izaberite SizeBreakpoints na listi svojstava, a zatim uredite vrednosti u traci za formule. Možete kreirati onoliko tačaka prekida koliko vašoj aplikaciji treba, ali samo veličine od 1 do 4 odgovaraju imenovanim veličinama ekrana. U formulama možete upućivati na veličine izvan ExtraLarge prema njihovim numeričkim vrednostima (5, 6 itd).

Takođe možete da odredite manje tačaka prekida. Na primer, vašoj aplikaciji mogu biti potrebne samo tri veličine (dve tačke prekida), tako da su moguće veličine ekrana mala, srednja i velika.

Poznata ograničenja

Podloga za kreiranje ne reaguje na formule za promenu veličine. Da biste testirali prilagodljivo ponašanje, sačuvajte i objavite aplikaciju, a zatim je otvorite na uređajima ili u prozorima pregledača različitih veličina i orijentacija.

Ako pišete izraze ili formule u svojstvima kontrole X, Y, Width i Height zamenićete te izraze ili formule ako kasnije prevučete kontrolu na drugu lokaciju ili promenite veličinu kontrole prevlačenjem njene ivice.

Napomena

Možete li nam reći o svojim željenim postavkama jezika u dokumentaciji? Ispunite kratku anketu. (imajte na umu da je ova anketa na engleskom jeziku)

Anketa će trajati oko sedam minuta. Ne prikupljaju se lični podaci (izjava o privatnosti).