Creați aspecte responsive în aplicațiile proiectate pe pânză

Înainte de a construi o aplicație pânză în Power Apps, specificați dacă doriți să adaptați aplicația pentru un telefon sau o tabletă. Această alegere determină dimensiunea și forma pânzei pe care veți construi aplicația.

După ce faceți această alegere, puteți face alte câteva alegeri dacă selectați Setări > Afișare. Puteți alege orientarea portret sau peisaj și dimensiunea ecranului (numai tabletă). De asemenea, puteți bloca sau debloca raportul de aspect și oferi suport pentru rotirea dispozitivului (sau nu).

Aceste alegeri stau la baza oricărei alte alegeri pe care o faceți pe măsură ce proiectați aspecte de ecran. Dacă aplicația rulează pe un dispozitiv de o dimensiune diferită sau pe web, întregul aspect se scalează pentru a se potrivi cu ecranul în care rulează aplicația. Dacă o aplicație proiectată pentru un telefon rulează într-o fereastră mare de browser, de exemplu, aplicația se scalează pentru a compensa și pare supradimensionată pentru spațiul său. Aplicația nu poate profita de pixeli suplimentari afișând mai multe controale sau mai mult conținut.

Dacă creați un aspect responsiv, controalele pot răspunde la diferite dispozitive sau dimensiuni ale ferestrei, făcând diverse experiențe să pară mai naturale. Pentru a obține un aspect responsiv, ajustați unele setări și scrieți expresii în întreaga aplicație.

Dezactivați Scalare pentru a se potrivi

Puteți configura fiecare ecran astfel încât aspectul său să se adapteze spațiului real în care rulează aplicația.

Activați responsivitatea prin oprirea setării aplicației Redimensionează pentru potrivire care este activată implicit. Când dezactivați această setare, dezactivați de asemenea Blocarea raportului de aspect, pentru că nu mai proiectați pentru o formă de ecran specifică. (Puteți specifica în continuare dacă aplicația dvs. acceptă rotirea dispozitivului.)

Pentru ca aplicația dvs. să fie responsivă, trebuie să faceți pași suplimentari, dar această schimbare este primul pas spre a face posibilă responsivitatea.

Înțelegeți dimensiunile aplicației și ecranului

Pentru ca aspectele aplicației să răspundă la modificările dimensiunilor ecranului, veți scrie formule care utilizează Lăţime și Înălţime ale ecranului. Pentru a afișa aceste proprietăți, deschideți o aplicație în Power Apps Studio, apoi selectați un ecran. Formulele implicite pentru aceste proprietăți apar pe fila Avansat din panoul din dreapta.

Lăţime = Max(App.Width, App.DesignWidth)

Înălțime = Max(App.Height, App.DesignHeight)

Aceste formule se referă la proprietățile Lăţime, Înălţime, DesignWidth și DesignHeight ale aplicației. Proprietățile Lăţime și Înălţime ale aplicației corespund dimensiunilor dispozitivului sau ferestrei browserului în care rulează aplicația. Dacă utilizatorul redimensionează fereastra browserului (sau rotește dispozitivul dacă ați dezactivat Blocare Orientare), valorile acestor proprietăți se schimbă dinamic. Formulele din proprietățile Lăţime și Înălţime ale ecranului sunt reevaluate atunci când aceste valori se schimbă.

Proprietățile DesignWidth și DesignHeight provin din dimensiunile pe care le specificați în panoul Afișare din Setări. De exemplu, dacă selectați aspectul telefonului în orientarea portret, DesignWidth este 640 și DesignHeight este 1136.

După cum sunt utilizate în formulele pentru proprietățile Lăţime și Înălţime ecran, vă puteți gândi DesignWidth și DesignHeight ca la dimensiuni minime pentru care veți proiecta aplicația. Dacă zona disponibilă pentru aplicația dvs. este chiar mai mică decât aceste dimensiuni minime, formulele pentru proprietățile Lăţime și Înălţime ale ecranului proprietățile se asigură că valorile lor nu vor deveni mai mici decât minimele. În acest caz, utilizatorul trebuie să deruleze pentru a vizualiza întregul conținut al ecranului.

După ce ați stabilit DesignWidth și DesignHeight pentru aplicația dvs., nu va trebui (în majoritatea cazurilor) să schimbați formulele implicite pentru proprietățile Lăţime și Înălţime ale fiecărui ecran. Ulterior, acest subiect discută cazurile în care s-ar putea să doriți să personalizați aceste formule.

Utilizați formule pentru aspectul dinamic

Pentru a crea un design responsiv, localizați și măriți fiecare control utilizând formule în loc de valori absolute (constante) de coordonate. Aceste formule exprimă poziția și dimensiunea fiecărui control în funcție de dimensiunea generală a ecranului sau în raport cu alte controale de pe ecran.

Important

După ce scrieți formule pentru proprietățile X, Y, Lăţime și Înălţime unui control, formulele dvs. vor fi suprascrise cu valori constante dacă apoi trageți controlul în editorul de pânză. Când începeți să utilizați formule pentru a realiza un aspect dinamic, ar trebui să evitați glisarea controalelor.

În cel mai simplu caz, un singur control umple un ecran întreg. Pentru a crea acest efect, setați proprietățile controlului la aceste valori:

Proprietate	Valoare
X	0
Y	0
Lăţime	Parent.Width
Înălțime	Parent.Height

Aceste formule folosesc operatorul Părinte. Pentru un control plasat direct pe un ecran, Părinte se referă la ecran. Cu aceste valori de proprietăți, controlul apare în colțul din stânga sus al ecranului (0, 0) și are aceleași Lăţime și Înălţime ca ecranul.

Mai târziu în acest subiect, veți aplica aceste principii (și operatorul Părinte a) pentru a poziționa controale în interiorul altor containere, cum ar fi galerii, controale de grup și componente.

Ca alternativă, controlul poate umple doar jumătatea superioară a ecranului. Pentru a crea acest efect, setați proprietatea Înălţime la Parent.Height / 2 și lăsați celelalte formule neschimbate.

Dacă doriți un al doilea control care să completeze jumătatea de jos a aceluiași ecran, puteți adopta cel puțin două alte abordări pentru a construi formulele sale. Pentru simplitate, puteți adopta această abordare:

Control	Proprietate	Formulă
Superior	X	0
Superior	Y	0
Superior	Lăţime	Parent.Width
Superior	Înălțime	Parent.Height / 2
Sorabă de jos	X	0
Sorabă de jos	Y	Parent.Height / 2
Sorabă de jos	Lățime	Parent.Width
Sorabă de jos	Înălțime	Parent.Height / 2

Această configurație ar obține efectul dorit, dar ar trebui să editați fiecare formulă dacă vă răzgândiți cu privire la dimensiunile relative ale controalelor. De exemplu, puteți decide ca controlul superior ar trebui să ocupe doar o treime superioară a ecranului, iar controlul de jos umple cele două treimi inferioare.

Pentru a crea acest efect, ar trebui să actualizați proprietatea Înălţime a controlului Superior și proprietățile Y și Înălţime ale controlului Inferior. În schimb, luați în considerare scrierea formulelor pentru controlul Inferior în termenii controlului Superior (și ca sine), ca în acest exemplu:

Control	Proprietate	Formulă
Superior	X	0
Superior	Y	0
Superior	Lăţime	Parent.Width
Superior	Înălțime	Parent.Height / 3
Lower	X	0
Lower	Y	Upper.Y + Upper.Height
Lower	Lățime	Parent.Width
Sorabă de jos	Înălțime	Parent.Height - Lower.Y

Cu aceste formule aplicate, nu trebuie decât să schimbați proprietatea Înălţime a controlului Superior pentru a exprima o fracțiune diferită din înălțimea ecranului. Controlul Inferior se mută automat și redimensionează pentru a ține cont de modificare.

Puteți utiliza aceste modele de formulă pentru a exprima relații de aspect comune între un control, numit C și părintele sau un control frate, numit D.

Relația dintre C și părintele său	Proprietate	Formulă	Ilustrație
C umple lățimea părintelui, cu o marjă de N	X	N
	Lățime	Parent.Width - (N * 2)
C umple înălțimea părintelui, cu o marjă de N	Y	N
	Înălțime	Parent.Height - (N * 2)
C aliniat la marginea dreaptă a părintelui, cu marja de N	X	Parent.Width - (C.Width + N)
C aliniat la marginea de jos a părintelui, cu marja de N	Y	Parent.Height - (C.Height + N)
C centrat pe orizontală pe părinte	X	(Parent.Width - C.Width) / 2
C centrat pe verticală pe părinte	Y	(Parent.Height - C.Height) / 2

Relația dintre C și D	Proprietate	Formula	Ilustrație
C aliniat orizontal cu D și aceeași lățime ca D	X	D.X
	Lățime	D.Width
C aliniat pe verticală cu D și aceeași înălțime ca D	Y	D.Y
	Înălțime	D.Height
Marginea dreapta a C aliniată cu marginea dreapta a D	X	D.X + D.Width - C.Width
Marginea de jos a C aliniată cu marginea de jos a D	Y	D.Y + D.Height - C.Height
C centrat orizontal în raport cu D	X	D.X + (D.Width - C.Width) / 2
C centrat vertical în raport cu D	Y	D.Y + (D.Height - C.Height) /2
C poziționat la dreapta lui D cu un decalaj de N	X	D.X + D.Width + N
C poziționat sub D cu un decalaj de N	Y	D.Y + D.Height + N
C umple spațiul între D și marginea dreaptă a părintelui	X	D.X + D.Width
	Lățime	Parent.Width - C.X
C umple spațiul între D și marginea de jos a părintelui	Y	D.Y + D.Height
	Înălțime	Parent.Height - C.Y

Dispunere ierarhică

Pe măsură ce construiți ecrane care conțin mai multe controale, va deveni mai convenabil (sau chiar necesar) poziționarea controalelor în raport cu un control părinte, mai degrabă decât în raport cu ecranul sau cu un control de frate. Prin organizarea controalelor într-o structură ierarhică, puteți face formulele mai ușor de scris și de întreținut.

Galerii

Dacă utilizați o galerie în aplicația dvs., va trebui să stabiliți controale în șablonul galeriei. Puteți poziționa aceste controale scriind formule care utilizează operatorul Părinte, care se va referi la șablonul galeriei. În formulele privind controalele din cadrul unui șablon de galerie, utilizați proprietățile Parent.TemplateHeight și Parent.TemplateWidth; nu folosiți Parent.Width și Parent.Height, care se referă la dimensiunea generală a galeriei.

Controlul containerelor

Puteți utiliza controlul Container de dispunere, drept control principal.

Luați în considerare exemplul unui antet din partea de sus a unui ecran. Este comun să aveți un antet cu un titlu și mai multe pictograme cu care utilizatorii dvs. pot interacționa. Puteți construi un astfel de antet folosind controlul Container, conținând un control Eticheta și două controale Pictograma:

Setați proprietățile pentru aceste controale la aceste valori:

Proprietate	Antet	Meniu	Închideți	Funcția
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Y	0	0	0	0
Lăţime	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Înălțime	64	Parent.Height	Parent.Height	Parent.Height

Pentru controlul Antet, Parent se referă la ecran. Pentru celelalte, Parent se referă la controlul Antet.

După scrierea acestor formule, puteți ajusta dimensiunea sau poziția controlului Antet prin schimbarea formulelor pentru proprietățile sale. Mărimile și pozițiile comenzilor fiu se vor regla automat în consecință.

Controale de dispunere automată a containerului

Puteți folosi o caracteristică, Aspect automat controale pentru a așeza automat componentele secundare. Aceste containere determină poziția componentelor secundare, astfel încât să nu trebuiască să setați niciodată X, Y pentru o componentă din interiorul containerului. De asemenea, poate distribui spațiul disponibil componentelor sale secundare în funcție de setări, precum și determină atât alinierea verticală cât și cea orizontală a componentelor secundare. Mai multe informații: Controale de dispunere automată a containerului

Componente

Dacă utilizați o altă caracteristică, numită Componente, puteți construi blocuri și le puteți reutiliza în aplicația dvs. Ca și cu controlul Container, controalele pe care le plasați într-o componentă ar trebui să își bazeze formulele de poziție și dimensiune Parent.Width și Parent.Height, care se referă la dimensiunea componentei. Mai multe informații: Creați o componentă.

Dispunerea adaptării pentru dimensiunea și orientarea dispozitivului

Până acum, ai învățat cum să folosești formule pentru a schimba dimensiunea fiecărui control ca răspuns la spațiul disponibil, păstrând în același timp controalele unul față de celălalt. Însă este posibil să doriți sau să aveți nevoie să faceți modificări mai substanțiale ale aspectului ca răspuns la diferite dimensiuni și orientări ale dispozitivului. Când un dispozitiv este rotit de la orientare portret la peisaj, de exemplu, poate doriți să treceți de la un aspect vertical la unul orizontal. Pe un dispozitiv mai mare, puteți prezenta mai mult conținut sau îl pot rearanja pentru a oferi un aspect mai atrăgător. Pe un dispozitiv mai mic, poate fi necesar să împărțiți conținutul pe mai multe ecrane.

Orientarea dispozitivului

Formulele implicite pentru proprietățile Lăţime și Înălţime ale unui ecran, așa cum s-a descris mai sus acest subiect, nu vor oferi neapărat o experiență bună dacă un utilizator roteste un dispozitiv. De exemplu, o aplicație proiectată pentru un telefon cu orientare portret are un DesignWidth de 640 și DesignHeight de 1136. Aceeași aplicație de pe un telefon cu orientare peisaj va avea aceste valori ale proprietății:

• Proprietatea Lăţime pentru ecran este setată la Max(App.Width, App.DesignWidth). Aplicația are Lăţimea (1136) mai mare decât DesignWidth (640), deci formula se evaluează la 1136.
• Proprietatea Înălţime pentru ecran este setată la Max(App.Height, App.DesignHeight). Înălţimea aplicației (640) este mai mică decât DesignHeight (1136) a sa, deci formula se evaluează la 1136.

Cu un ecran cu Înălţime de 1136 și o înălțime a dispozitivului (în această orientare) de 640, utilizatorul trebuie să deruleze ecranul pe verticală pentru a afișa tot conținutul său, ceea ce poate să nu fie experiența dorită.

Pentru a adapta Lăţime și Înălţime ale ecranului pentru orientarea dispozitivului, puteți utiliza aceste formule:

Lăţime = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Înălțime = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Aceste formule comută valorile DesignWidth și DesignHeight ale aplicației, bazate pe dacă lățimea dispozitivului este mai mică decât înălțimea sa (orientare portret) sau mai mare decât înălțimea sa (orientare peisaj).

După ce reglați formulele Lăţime și Înălţime ale ecranului, s-ar putea să doriți să rearanjați controalele pe ecranul dvs. pentru a utiliza mai bine spațiul disponibil. De exemplu, dacă fiecare dintre cele două comenzi ocupă jumătate din ecran, s-ar putea să le stivuiți vertical în portret, dar să le aranjezi una lângă alta în peisaj.

Puteți utiliza prorpietatea Orientare a ecranului pentru a determina dacă ecranul este orientat vertical sau orizontal.

Notă

În orientarea peisaj, controalele Superior și Inferior apar ca la stânga și la dreapta.

Control	Proprietate	Formulă
Superior	X	0
Superior	Y	0
Superior	Lăţime	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Superior	Înălțime	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	Lățime	Parent.Width - Lower.X
Sorabă de jos	Înălțime	Parent.Height - Lower.Y

Dimensiunile ecranului și punctele de întrerupere

Puteți ajusta aspectul în funcție de dimensiunea dispozitivului. Proprietatea Dimensiune pentru ecran clasifică dimensiunea curentă a dispozitivului. Dimensiunea este un număr întreg pozitiv; tipul ScreenSize oferă constante numite pentru a ajuta la lizibilitate. Acest tabel listează constantele:

Constantă	Valoare	Tip de dispozitiv tipic (utilizând setările implicite ale aplicației)
ScreenSize.Small	1	Numărul de telefon
ScreenSize.Medium	2	Tabletă, ținută vertical
ScreenSize.Large	3	Tableta, ținută orizontală
ScreenSize.ExtraLarge	4	Computer desktop

Utilizați aceste dimensiuni pentru a lua decizii cu privire la aspectul aplicației. De exemplu, dacă doriți ca un control să fie ascuns pe un dispozitiv cu dimensiuni de telefon, dar vizibil altfel, puteți seta proprietatea Vizibil a controlului la această formulă:

Parent.Size >= ScreenSize.Medium

Această formulă se evaluează adevărat când mărimea este medie sau mai mare și fals in caz contrar.

Dacă doriți ca un control să ocupe o fracțiune diferită a lățimii ecranului în funcție de dimensiunea ecranului, setați proprietate Lăţime a controlului pentru această formulă:

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

Această formulă stabilește lățimea controlului la jumătate din lățimea ecranului pe un ecran mic, trei zecimi din lățimea ecranului pe un ecran mediu și un sfert din lățimea ecranului pe toate celelalte ecrane.

Puncte de pauză personalizate

Proprietatea Dimensiune pentru ecran este calculată comparând cu proprietatea Lăţime ecranul pentru valorile din proprietatea SizeBreakpoints a aplicației. Această proprietate este o tabelă de numere cu o singură coloană care indică punctele de întrerupere lățime care separă dimensiunile ecranului numit:

Într-o aplicație creată pentru tabletă sau web, valoarea implicită din proprietatea SizeBreakpoints a aplicației sunt [600, 900, 1200]. Într-o aplicație creată pentru telefoane, valoarea este [1200, 1800, 2400]. (Valorile pentru aplicațiile de telefon sunt dublate, deoarece astfel de aplicații folosesc coordonate care dublează efectiv coordonatele utilizate în alte aplicații.)

Puteți personaliza punctele de întrerupere ale aplicației dvs. modificând valorile din proprietatea de aplicație SizeBreakpoints. Selectați Aplicație în vizualizarea arbore, selectați SizeBreakpoints în lista de proprietăți, apoi modificați valorile din bara de formule. Puteți crea atâtea puncte de pauză cât are nevoie de aplicație, dar numai dimensiunile de la 1 la 4 corespund dimensiunilor de ecran numite. În formule, puteți face referințe la dimensiuni dincolo de ExtraLarge prin valorile lor numerice (5, 6 și așa mai departe).

De asemenea, puteți specifica mai puține puncte de întrerupere. De exemplu, aplicația dvs. poate avea nevoie de doar trei dimensiuni (două puncte de întrerupere), astfel încât dimensiunile posibile ale ecranului vor fi mici, medii și mari.

Limitări cunoscute

Pânza de creație nu răspunde la formulele de dimensionare create. Pentru a testa comportamentul responsiv, salvați și publicați aplicația, apoi deschideți-o pe dispozitive sau în ferestrele browserului de diferite dimensiuni și orientări.

Dacă scrieți expresii sau formule în proprietățile unui control X, Y, Width și Height, veți suprascrie acele expresii sau formule dacă mai târziu trageți controlul într-o altă locație sau redimensionați controlul trăgând chenarul.

Notă

Ne puteți spune care preferințele dvs. lingvistice pentru documentație? Răspundeți la un chestionar scurt. (rețineți că acest chestionar este în limba engleză)

Chestionarul va dura aproximativ șapte minute. Nu sunt colectate date personale (angajament de respectare a confidențialității).