Sortu erantzun diseinatuak mihise aplikazioetan

Power Apps-en mihise-aplikazio bat eraiki aurretik, zehaztu aplikazioa telefono edo tableta baterako egokitu behar den. Aukera honek aplikazioa eraikitzen duzun mihisearen tamaina eta forma zehazten ditu.

Aukera hori egin ondoren, beste aukera batzuk egin ditzakezu Ezarpenak>Bistaratu hautatzen baduzu. Erretratua edo paisaiaren orientazioa eta pantailaren tamaina (tableta bakarrik) aukeratu ditzakezu. Alderdien arteko erlazioa eta gailuaren biraketa (edo ez) ere blokeatu edo desblokeatu ditzakezu.

Aukera horiek pantailaren diseinuak diseinatzen dituzunean egiten dituzun beste aukera guztien azpian daude. Zure aplikazioa tamaina ezberdineko gailuan edo webean exekutatzen bada, diseinu osoa eskala aplikatzen ari den pantailara egokitzeko eskalatzen du. Telefono baterako diseinatutako aplikazioa arakatzailearen leiho handi batean exekutatzen bada, adibidez, aplikazioa bere espazioarekiko konpentsatzeko eta neurriz kanpokoa da. Aplikazioak ezin du pixel gehiagorik aprobetxatu kontrol gehiago edo eduki gehiago agertuz.

Diseinu sentikorra sortzen baduzu, kontrolek gailu edo leihoen tamaina ezberdinei erantzun diezaieke, hainbat esperientzia naturalago sentiaraziz. Diseinu sentikorra lortzeko, ezarpen batzuk doitu eta adierazpenak idatzi aplikazio osoan zehar.

Desgaitu eskala moldatzeko

Pantaila-kontrol bakoitza konfigura dezakezu, bere diseinua aplikazioa exekutatzen ari den benetako espaziora egokitu dadin.

Aplikazioaren Egonkortzeko eskalatzea ezarpena desaktibatuz aktibatzen duzu erantzun-gaitasuna, lehenespenez aktibatuta baitago. Ezarpen hau desaktibatzen duzunean, Blokeatu alderdi-erlazioa ere desaktibatzen duzu, pantailaren forma zehatz baterako diseinatzen ari ez zarelako. (Oraindik aplikazioak gailuaren biraketa onartzen duen zehaztu dezakezu.)

Aplikazioari erantzun egokia emateko, urrats gehigarriak egin behar dituzu, baina aldaketa hori erantzuna posible izateko lehen urratsa da.

Aplikazioaren eta gailuaren pantailaren dimentsioak ulertzea

Zure aplikazioaren diseinuek gailuaren pantailaren edo web arakatzailearen dimentsioen aldaketei erantzuteko, pantailaren Zabalera eta Altuera propietateak erabiltzen dituzten formulak idatziko dituzu. Propietate horiek erakusteko, ireki aplikazio bat Power Apps Studio-n, eta hautatu pantaila-kontrol bat. Propietate hauen formula lehenetsiak eskuineko paneleko Aurreratua fitxan agertzen dira.

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

Altuera = Max(App.Height, App.MinScreenHeight)

Formula hauek aplikazioaren Width, Height, MinScreenWidth eta MinScreenHeight propietateei egiten diete erreferentzia. Aplikazioaren Zabalera eta Altuera propietateak aplikazioa exekutatzen ari den gailuaren edo arakatzailearen leihoaren neurriekin bat datoz. Erabiltzaileak arakatzailearen leihoaren tamaina aldatzen badu (edo gailua biratzen badu Blokeatu orientazioa desaktibatuta baduzu), propietate hauen balioak dinamikoki aldatzen dira. Pantaila-kontrolaren Zabalera eta Altuera propietateetako formulak berriro ebaluatzen dira balio horiek aldatzean.

App.Width eta App.Height propietateetako balioak EzarpenenBistaratze panelean zehaztutako dimentsioetatik datoz. Adibidez, paisaiako "16:9 Lehenetsia" tamaina hautatzen baduzu, App.Width 1366 da eta App.Height 768.

Pantaila-kontrolaren Zabalera eta Altuera propietateen formuletan erabiltzen diren bezala, MinScreenWidth eta MinScreenHeight dira aplikazioa diseinatuko duzun gutxieneko dimentsioak. Zure aplikazioaren erabilgarri dagoen eremua gutxieneko dimentsio horiek baino txikiagoa bada, pantaila-kontrolaren Zabalera eta Altuera propietateen formulek bermatzen dute haien balioak ez direla gutxienekoak baino txikiagoak izango. Kasu horretan, erabiltzaileak korritu egin behar du diseinuaren eduki guztia ikusteko. MinScreenWidth eta MinScreenHeight propietateak aplikazioaren objektuen>propietateen>aurrerapenean ezar daitezke.

Zure aplikazioaren MinScreenWidth eta MinScreenHeight ezarri ondoren, ez duzu (kasu gehienetan) pantaila-kontrol bakoitzaren Zabalera eta Altuera propietateen formula lehenetsiak aldatu beharko. Geroago, gai honetan formula hauek pertsonalizatu nahi dituzun kasuak aztertzen dira.

Erabili diseinu dinamikoa egiteko formulak

Diseinu sentikorra sortzeko, kontrol bakoitza kokatu eta dimentsionatzen duzu formulen bidez koordenatu balio absolutuen (konstanteak) erabiliz. Formula hauek kontrol bakoitzaren posizioa eta tamaina adierazten dituzte pantailaren tamaina orokorraren arabera edo uneko pantailako beste kontrol batzuekin alderatuta.

Garrantzitsua da

Kontrol baten X, Y, Zabalera eta Altuera propietateen formulak idatzi ondoren, zure formulak balio konstanteekin gainidatziko dira ondoren kontrola mihise-editorean arrastatzen baduzu. Diseinua dinamikoa lortzeko formulak erabiltzen hasten zarenean, kontrolak arrastatzea saihestu beharko zenuke.

Kasurik sinpleenean, kontrol batek pantaila oso bat betetzen du. Eragin hori sortzeko, ezarri kontrolaren propietateak balio horietan:

Propietatea	Balioa
X	0
Bai	0
Zabalera	Parent.Width
Altuera	Parent.Height

Formula hauek Parent operadorea erabiltzen dute. Pantaila batean zuzenean jarritako kontrol guztietarako, Gurasoak pantailari egiten dio erreferentzia. Propietate-balio hauekin, kontrola pantailaren goiko ezkerreko izkinan agertzen da (0, 0) eta pantailaren Zabalera eta Altuera berdina du.

Gai honetan aurrerago, printzipio hauek (eta Parent operadorea) aplikatuko dituzu beste edukiontzi batzuen barruko kontrolak kokatzeko, hala nola galerietan, talde-kontroletan eta osagaietan.

Alternatiba gisa, kontrolak pantailaren goiko erdia soilik bete dezake. Efektu hau sortzeko, ezarri Height propietatea Parent.Height / 2 baliora, eta utzi beste formulak aldatu gabe.

Pantaila beraren beheko erdia betetzeko bigarren kontrol bat nahi baduzu, gutxienez beste bi ikuspegi har ditzakezu bere formulak eraikitzeko. Sinpletasunagatik, baliteke ikuspegi hau hartzea:

Kontrolatu	Propietatea	Formula
Goiko	X	0
Goiko	Bai	0
Goiko	Zabalera	Parent.Width
Goiko	Altuera	Parent.Height / 2
Beheko	X	0
Beheko	Bai	Parent.Height / 2
Beheko	Zabalera	Parent.Width
Beheko	Altuera	Parent.Height / 2

Konfigurazio honek nahi duzun efektua lortuko luke, baina formula bakoitza editatu beharko zenuke kontrolen tamaina erlatiboei buruz iritzia aldatuko bazenu. Adibidez, baliteke goiko kontrolak pantailaren goiko herena soilik okupatu behar izatea, beheko kontrolak beheko bi herenak betetzen dituela.

Efektu hori sortzeko, Goiko kontrol-aren Altuera propietatea eta Beheko kontrol-aren Y eta Altuera propietateak eguneratu beharko zenituzke. Horren ordez, kontuan hartu Beheko kontrolaren formulak Goiko kontrolaren (eta beraren) arabera idaztea, adibide honetan bezala:

Kontrolatu	Propietatea	Formula
Goiko	X	0
Goiko	Bai	0
Goiko	Zabalera	Parent.Width
Goiko	Altuera	Parent.Height / 3
Beheko	X	0
Beheko	Bai	Upper.Y + Upper.Height
Beheko	Zabalera	Parent.Width
Beheko	Altuera	Parent.Height - Lower.Y

Formula hauek ezarrita, Goiko kontrolaren Altuera propietatea aldatu besterik ez duzu egin behar pantailaren altueraren zatiki desberdin bat adierazteko. *Beheko* kontrola automatikoki mugitzen eta tamainaz aldatzen da aldaketa kontuan hartzeko.

Formula-eredu hauek erabil ditzakezu C izeneko kontrol baten eta bere guraso edo anai-arreba kontrol baten arteko diseinu-erlazio arruntak adierazteko, D izenekoa.

C eta bere gurasoaren arteko harremana	Propietatea	Formula	ilustrazioa
C gurasoaren zabalera betetzen du, N marjinarekin	X	N
	Zabalera	Parent.Width - (N * 2)
C gurasoaren altuera betetzen du, N marjinarekin	Bai	N
	Altuera	Parent.Height - (N * 2)
C gurasoaren eskuineko ertzarekin lerrokatuta, N marjinarekin	X	Parent.Width - (C.Width + N)
C gurasoaren beheko ertzarekin lerrokatuta, N marjinarekin	Bai	Parent.Height - (C.Height + N)
C horizontalki zentratuta gurasoaren gainean	X	(Parent.Width - C.Width) / 2
C gurasoaren gainean bertikalki zentratuta	Bai	(Parent.Height - C.Height) / 2

C eta D arteko harremana	Propietatea	Formula	ilustrazioa
C horizontalki lerrokatuta D rekin eta D-ren zabalera bera	X	D.X
	Zabalera	D.Width
C D rekin bertikalki lerrokatuta eta D-ren altuera bera	Bai	D.Y
	Altuera	D.Height
*C*-ren eskuineko ertza *D*-ren eskuineko ertzarekin lerrokatuta	X	D.X + D.Width - C.Width
C-ren beheko ertza D-ren beheko ertzarekin lerrokatuta	Bai	D.Y + D.Height - C.Height
C horizontalki zentratuta D-rekiko	X	D.X + (D.Width - C.Width) / 2
C D-rekiko bertikalki zentratuta	Bai	D.Y + (D.Height - C.Height) /2
C D -ren eskuinaldean kokatuta, N-ko tartearekin	X	D.X + D.Width + N
C D aren azpian kokatuta N-ko tartearekin	Bai	D.Y + D.Height + N
C D eta gurasoaren eskuineko ertzaren arteko espazioa betetzen du	X	D.X + D.Width
	Zabalera	Parent.Width - C.X
C D eta gurasoaren beheko ertzaren arteko espazioa betetzen du	Y	D.Y + D.Height
	Altuera	Parent.Height - C.Y

Diseinu hierarkikoa

Kontrol gehiago dituzten pantailak eraikitzen doazen heinean, erosoagoa izango da (edo are beharrezkoa) gurasoen kontrolarekin erlazionatutako kontrolak kokatzea, pantailarekin edo anai-arrebekin kontrola baino. Zure kontrolak egitura hierarkikoan antolatuta, zure formulak errazago idatzi eta mantentzeko errazak izan ditzakezu.

Galeriak

Zure aplikazioan galeria bat erabiltzen baduzu, galerien txantiloiaren barruan kontrolak jarri beharko dituzu. Kontrol hauek kokatu ditzakezu Parent operadorea erabiltzen duten formulak idatziz, eta horrek galeriaren txantiloiari erreferentzia egingo dio. Galeria txantiloi bateko kontrolen formuletan, erabili Parent.TemplateHeight eta Parent.TemplateWidth propietateak; ez erabili Parent.Width eta Parent.Height, hauek galeriaren tamaina orokorrari egiten diote erreferentzia.

Edukiontzien kontrola

Diseinu edukiontzia kontrola erabil dezakezu guraso-kontrol gisa.

Ikus ezazu pantailaren goialdean goiburuaren adibidea. Ohikoa da zure goiburua edukitzea izenburu batekin eta erabiltzaileekin elkarreragiteko hainbat ikono. Horrelako goiburu bat eraiki dezakezu *Container* kontrol hau erabiliz, *Label* kontrol bat eta bi *Icon* kontrol dituena:

Ezarri kontrol horien propietateak balio hauetan:

Propietatea	Goiburua	Menua	Itxi	lanpostua
X	0	0	Parent.Width - Close.Width	Menu.X + Menu.Width
Bai	0	0	0	0
Zabalera	Parent.Width	Parent.Height	Parent.Height	Close.X - Title.X
Altuera	64	Parent.Height	Parent.Height	Parent.Height

Goiburua kontrolerako, Parent pantailari egiten dio erreferentzia. Besteentzat, Parent Goiburuko kontrolari egiten dio erreferentzia.

Formula hauek idatzi ondoren, Goiburua kontrolaren tamaina edo posizioa doi dezakezu bere propietateen formulak aldatuz. Haurraren kontrolen tamainak eta posizioak automatikoki egokituko dira.

Auto diseinuen edukiontziaren kontrolak

Ezaugarri bat erabil dezakezu, *Auto-layout* edukiontziaren kontrolak, haurren osagaiak automatikoki antolatzeko. Edukiontzi horiek zehazten dute haurren osagaien kokapena zehazten du, edukiontzi barruko osagai batentzat X, Y inoiz ezarri beharrik ez izateko. Gainera, bana dezake bertikala kontrolak eskuragarri dagoen espazioa bere haurren osagaietara banatzen du ezarpenen arabera, biak bertikala eta horizontala baita haurren osagaien lerrokatzea zehazten du. Informazio gehiago: Edukiontzien diseinu automatikoaren kontrolak

Osagaiak

Osagaiak izeneko beste funtzio bat erabiltzen baduzu, eraikuntza-blokeak eraiki eta aplikazio osoan berrerabili ditzakezu. *Container* kontrolarekin gertatzen den bezala, osagai baten barruan jartzen dituzun kontrolek beren posizio eta tamaina formulak *a29> eta *a30> *-etan oinarritu behar dituzte, eta hauek osagaiaren tamainari egiten diote erreferentzia. Parent.WidthParent.Height Informazio gehiago: Osagai bat sortu.

Diseinua egokitzea gailuaren tamaina eta orientaziorako

Orain arte, kontrol-tamaina aldatzeko formulak nola erabili ikasi duzu espazioari erantzuteko, kontrolak elkarren artean lerrokatuta mantenduz. Hala ere, baliteke diseinuaren aldaketa garrantzitsuak egitea gailuaren tamaina eta orientazio desberdinei erantzuteko. Gailua erretratutik paisaiaren orientaziora biratzen denean, adibidez, baliteke diseinu bertikal batetik horizontalera pasatzea. Gailu handiagoetan, eduki gehiago aurkez dezakezu edo berriro antolatu ahal izango duzu. Gailu txikiago batean, baliteke edukia hainbat pantailatan zatitzea.

Gailuaren orientazioa

Gai honetan lehenago deskribatu den bezala, pantailaren Zabalera eta Altuera propietateen formula lehenetsiek ez dute zertan esperientzia ona eskainiko erabiltzaileak gailu bat biratzen badu. Adibidez, bertikalki diseinatutako telefono baterako diseinatutako aplikazio batek 640ko DesignWidth eta 1136ko DesignHeight ditu. Paisaiaren orientaziorako telefonoko aplikazio berak propietate balio hauek izango ditu:

• Pantailaren Zabalera propietatea Max(App.Width, App.DesignWidth)-ra ezarrita dago. Aplikazioaren Zabalera (1136) bere DiseinuarenZabalera (640) baino handiagoa da, beraz, formulak 1136 ematen du.
• Pantailaren Altuera propietatea Max(App.Height, App.DesignHeight)-ra ezarrita dago. Aplikazioaren altuera (640) bere diseinu-altuera (1136) baino txikiagoa da, beraz, formula 1136 da.

1136ko pantailaren altuera eta 640ko gailuaren altuera (orientazio honetan) bada, erabiltzaileak pantaila bertikalki mugitu beharko du eduki guztia erakusteko, eta baliteke hori ez izatea nahi duzun esperientzia.

Pantailaren Zabalera eta Altuera propietateak gailuaren orientaziora egokitzeko, formula hauek erabil ditzakezu:

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

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

Formula hauek aplikazioaren DesignWidth eta DesignHeight balioak trukatzen dituzte, gailuaren zabalera altuera baino txikiagoa den (bertikalki) edo altuera baino handiagoa den (paisaia-orientazioa) kontuan hartuta.

Pantailaren Zabalera eta Altuera formulak doitu ondoren, baliteke pantailako kontrolak berrantolatu nahi izatea eskuragarri dagoen espazioa hobeto erabiltzeko. Adibidez, bi kontrol bakoitzak pantailaren erdia hartzen badu, bertikalki erretratuan pilatu ditzakezu baina paisaian banan-banan antolatu.

Pantailaren Orientazioa propietatea erabil dezakezu pantaila bertikalki edo horizontalki orientatuta dagoen zehazteko.

Oharra

Paisaia-orientazioan, Goiko eta Beheko kontrolak ezkerreko eta eskuineko kontrol gisa agertzen dira.

Kontrolatu	Propietatea	Formula
Goiko	X	0
Goiko	Bai	0
Goiko	Zabalera	If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Goiko	Altuera	If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)
Beheko	X	If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)
Beheko	Y	If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)
Beheko	Zabalera	Parent.Width - Lower.X
Beheko	Altuera	Parent.Height - Lower.Y

Pantailaren neurriak eta eten puntuak

Zure diseinua gailuaren tamainaren arabera egokitu dezakezu. Pantailaren Tamaina propietateak uneko gailuaren tamaina sailkatzen du. Tamaina zenbaki oso positiboa da; ScreenSize tipoak konstanteak eskaintzen ditu irakurgarritasunarekin laguntzeko. Taula honek konstanteak zerrendatzen ditu:

Etengabeko	Balioa	Gailu mota tipikoa (aplikazio lehenetsitako ezarpenak erabiliz)
ScreenSize.Small	1	telefono-zenbakia
ScreenSize.Medium	2	Tablet, bertikalki eusten
ScreenSize.Large	3	Tablet, horiz horiz
ScreenSize.ExtraLarge	4	Mahaigaineko ordenagailua

Erabili tamaina hauek zure aplikazioaren diseinurako erabakiak hartzeko. Adibidez, telefono tamainako gailu batean kontrol bat ezkutatuta baina bestela ikusgai egotea nahi baduzu, kontrol horren balioa ezar dezakezu Ikusgai formula honen propietatea:

Parent.Size >= ScreenSize.Medium

Formula honek honela ebaluatzen du: egia tamaina ertaina edo handiagoa denean eta faltsua bestela.

Pantailaren tamainaren arabera kontrol batek pantailaren zabaleraren zati desberdin bat hartzea nahi baduzu, ezarri kontrolaren Zabalera formula honen propietatea:

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

Formula honek kontrolaren zabalera pantailaren zabaleraren pantailaren erdian, pantailaren ertainaren hiru hamarrenen zabalera eta pantailaren zabaleraren laurdena beste pantaila guztietan ezartzen du.

Neurri pertsonalizatuak

Pantailaren Tamaina propietatea pantailaren alderatuz kalkulatzen da Zabalera aplikazioaren balioen propietatea Tamaina-haustura-puntuak jabetza. Jabetza zutabe bakarreko zenbakien taula da, izendatutako pantailaren tamainak bereizten dituzten zabalera puntuak adierazten dituztenak:

Tableta edo weberako sortutako aplikazio batean, aplikazioaren balio lehenetsia Tamaina-haustura-puntuak jabetzak dira [600, 900, 1200]. Telefonoetarako sortutako aplikazio batean, balioa hau da: [1200, 1800, 2400]. (Telefono bidezko aplikazioen balioak bikoiztu egiten dira, horrelako aplikazioek beste aplikazio batzuetan erabilitako koordenatuak bikoizten baitituzte.)

Aplikazioaren eten-puntuak pertsonaliza ditzakezu aplikazioaren balioak aldatuz. Tamaina-haustura-puntuak jabetza. Hautatu Aplikazioa zuhaitz ikuspegian, hautatu Tamaina-haustura-puntuak propietateen zerrendan, eta ondoren editatu balioak formula barran. Aplikazioaren beharrak bezainbat puntu sor ditzakezu, baina 1etik 4ra bitarteko tamainak soilik bat datoz pantailaren tamainari. Formuletan ExtraLargez harago dauden tamainak aipa ditzakete beren balio numerikoen arabera (5, 6 eta abar).

Matxura puntu gutxiago ere zehaztu ditzakezu. Adibidez, zure aplikazioak hiru tamaina baino ez ditu behar izan (bi puntu-puntu), eta, beraz, baliteke pantailaren tamaina txikia, ertaina eta handia izatea.

Murriztapen ezagunak

Mihisea idazteak ez ditu sortutako neurri-formulei erantzuten. Erantzunkorra den portaera probatzeko, gorde eta argitaratu aplikazioa eta, ondoren, ireki gailutan edo arakatzailearen leihoetan, tamaina eta orientazio desberdinetakoak.

Adierazpenak edo formulak idazten badituzu X, Bai, Zabalera, eta Altuera Kontrol baten propietateak, adierazpen edo formula horiek gainidatziko dituzu geroago kontrola beste kokapen batera arrastatzen baduzu edo kontrolaren tamaina aldatzen baduzu bere ertza arrastatuz.