Interaktīvu pamatnes programmu veidošana

Atbildes reakcija attiecas uz programmas spēju automātiski līdzināt uz dažādiem ekrāna lielumiem un veidlapas faktoriem, lai izmantotu pieejamo ekrāna vietu saprātīgi, nodrošinot lielisku UI un UX katrā ierīcē, veidlapas faktoru un ekrāna lielumu.

Atbildes reakcija ļauj dažādiem programmas elementiem norādīt, kā tie:

• Izstiepj vai maina izmērus, mainoties ekrāna lielumam.

• Uztur vai maina pozīcijas, izmantojot ekrāna lieluma izmaiņas.

Kāpēc vajadzētu veidot reaģējošas programmas

Gala lietotāji var piekļūt jūsu lietojumprogrammai no dažādām ierīcēm, piemēram, tālruņiem, planšetdatoriem, klēpjdatoriem un galddatoriem ar lieliem monitoriem, dažādiem ekrāna izmēriem un dažādu pikseļu skaitu.

Lai nodrošinātu lielisku programmu lietotāju pieredzi un lietojamību katrā veidlapas faktorā un ierīcē, ir nepieciešama programmas projektēšana ar atsaucīgajiem dizaina principiem. Pat ja programma ir paredzēta lietošanai tikai tīmekļa pārlūkprogrammā vai mobilajos tālruņos, lietotāja ierīces ekrāna izmēri var atšķirties, tāpēc laba ideja ir programmas projektēšana ar atsaucīgiem principiem.

Programmas projektēšana ar atsaucības principiem

Pirms sākat noformēt savas programmas UI, ir jāņem vērā šādi aspekti:

• Kādus veidlapas faktorus vai ierīces vēlaties atbalstīt?

• Kā programmai jāizskatās katrā veidlapas faktorā?

• Kādus programmas elementus vajag izstiept vai mainīt?

• Vai elementi ir paslēpti dažos veidlapas faktoros?

• Vai programmas nosacījumi atšķiras pēc dažiem veidlapas faktoriem?

Kad visas šīs prasības ir apkopotas, vajadzētu sākt domāt par to, kā šie dažādie UI izkārtojumi var tikt izveidoti vienā lietojumprogrammā ar pieejamiem interaktīvajiem rīkiem Power Apps.

Pirms sākat lietot interaktīvos izkārtojumus, ir jāveic šādas darbības:

1. Dodieties uz Power Apps.

2. Atveriet programmu, kurā vēlaties lietot interaktīvo izkārtojumu.

3. Dodieties uz Iestatījumi > Attēlot, lai atspējotu Mērogot, lai ietilptu, Slēgt aspektu proporcijas un Slēgt orientāciju un atlasiet Piemērot.

   

Reaģējoša izkārtojuma izveide

Var izveidot šādus reaģējošus izkārtojumus, pievienojot jaunu ekrānu un atlasot atbilstošo opciju cilnē Izkārtojums:

Piezīme

Jaunie, atsaucīgie izkārtojumi ir pieejami programmu formātiem, bet jaunās ekrāna veidnes ir pieejamas tikai Planšetes formātam.

Dalītais ekrāns

Sadalītā ekrāna izkārtojumam ir divas sadaļas, un katra no tām aizņem 50% ekrāna platumu darbvirsmās. Mobilajās ierīcēs sadaļas ir novietotas viena zem otras, katra no tām aizņem visu ekrāna platumu.

Sānjosla

Sānjoslas izkārtojumam ir fiksēta platuma sānjosla kreisajā pusē. Galvenais ķermenis sastāv no fiksēta augstuma virsraksta, un galvenajā sadaļā tiek paņemts atlikušais ekrāna platums. Pēc noklusējuma veidnei ir tāda pati uzvedība mobilajās ierīcēs, tomēr daži pielāgojumi tiek ieteikti, pamatojoties uz lietotāja interfeisa rakstu, kas ir vēlama mobilajai pieredzei.

Darbs ar konteineriem

Konteineri ir visu dinamiskā dizaina elementu elementi. Konteiners var būt automātiskā izkārtojuma konteiners vertikālā vai horizontālā virzienā, vai fiksēta izkārtojuma konteiners, kas nākotnē atbalstīs ierobežojumus.

Tālāk sniegti daži padomi savas programmas lietotāja interfeisa izveidošanai, izmantojot konteinerus:

• Vienmēr izveidojiet UI elementus, kas konteinerā veido UI tabulu.

• Ļauj konteineram izmantot savus reaģējošos rekvizītus un iestatījumus, lai norādītu, kā tas ir pozicionēts vai mainīts uz dažādiem ekrāna lielumiem.

• Ļauj mainīt savu pakārtoto komponentu atbilstību prasībām attiecībā uz atbildes reakciju.

Izvēlieties vienu no diviem konteinera izkārtojuma režīmiem: Manuālais izkārtojums vai automātiskais izkārtojums (horizontāli vai vertikāli)

Automātiskā izkārtojuma konteineri

Divas vadīklas - Horizontālu konteineru un Vertikālu konteineru var izmantot, 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.

Automātiskā izkārtojuma konteineru izmantošana

Varat izmantot automātiskā izkārtojuma konteinerus šādos scenārijos:

• UI ir jābūt atsaucīgam pret ekrāna lielumu vai veidlapas faktora izmaiņām.
• Ir vairāki atvasināti komponenti, kam nepieciešams mainīt izmērus vai pārvietoties, pamatojoties uz ekrāna izmēriem vai veidlapas faktora izmaiņām.
• Ja vienumi ir jāgrupē vertikāli vai horizontāli (neatkarīgi no to lieluma).
• Ja uz ekrāna ir nepieciešams vienmērīgs rindstarpas vienums.

Piemērs automātiskā izkārtojuma konteineram

Lai izveidotu atsaucīgu ekrānu, rīkojieties šādi:

1. Izveidojiet tukšu pamatnes programmu ar Planšetdatora izkārtojumu.

2. Dodieties uz Iestatījumi > Attēlot un atspējojiet Mērogot, lai ietilptu, Slēgt aspektu proporcijas un Slēgt orientāciju un atlasiet Piemērot.

3. Tagad cilnes Izkārtojums rūts Ievietot kreisajā sānjoslā atlasiet Horizontālais konteiners.

   

4. Lai aizņemtu visu platību ar šiem rekvizītiem, vislielākajam konteineram ir jābūt izmērītam. Tas būs tāds pats izmērs kā ekrānam, jo tas maina lielumu.

   1. X = 0
   2. Y= 0
   3. Width = Parent.Width
   4. Height = Parent. Augstums

5. Tagad no rūts Ievietot atlasiet divus Vertikālos konteinerus Horizontālajā konteinerā.

   

6. Lai izveidotu konteinerus, aizpildiet pilno vertikālo atstarpi, atlasiet Container1 un iestatiet Align (vertical) rekvizītu uz Stretch.

   

7. Lai sadalītu ekrānu starp saturu, izmantojiet Fill portions divu atvasināto konteineru rekvizītu. Kreisā konteinera aizņems 1/4 ekrāna vietas.

   1. Atlasīt Container2. Tiek rādīts, ka Flexible width rekvizīts ir ieslēgts. Iestatīt Fill portions uz 1.
   2. Atlasīt Container3. Tiek rādīts, ka Flexible width rekvizīts ir ieslēgts. Iestatīt Fill portions uz 3.

8. Atlasīt Container2. Iestatiet Fill = RGBA(56, 96, 178, 1) rekvizītu formulu joslā. Iestatīt Align (horizontal) uz Stretch

9. Pievienojiet dažas pogas, lai izveidotu izvēlni. Ja nepieciešams, pārdēvējiet pogas.

   

10. Atlasiet Container3 un pievienojiet horizontālu konteineru un izslēdziet Flexible height rekvizītu. Iestatīt Height uz 100. Iestatīt Align (vertical) uz Stretch

11. Pievienojiet dažas Ikonas Container4. Mainiet ikonas, lai tās atšķiras no ikonas rekvizīta.

    

12. Atlasīt Container4. Iestatīt Justify (horizontal) rekvizītu uz End. Iestatīt Align (vertical) uz Center. Iestatiet Gap uz 40, lai izveidotu atstarpi starp ikonām.

13. Atlasīt Container3. Iestatīt Align (horizontal) uz Stretch Iestatīt Vertical Overflow uz Scroll

14. Pievienojiet dažādas Etiķetes, Ievades, Multivides, kamēr tās pārsniedz konteineru. Mainiet taisnstūru krāsu, lai tie būtu citādi. Jūs redzēsiet ritjoslu, lai piekļūtu neredzētajam saturam.

    

15. Atlasiet Priekšskatījums vai F5. Mainiet pārlūkprogrammas loga lielumu, lai skatītu, kā programma pielāgojas dažādiem ekrāna lielumiem.

Zināmās problēmas

• Dažas izkārtojuma konteineru rekvizītu kombinācijas ir nesavietojamas vai var radīt nevēlamu iznākumu, piemēram:

  • Ja konteinera Wrap rekvizīts ir iespējots, Align rekvizīta iestatījums tiek ignorēts atvasinātajās vadīklās.
  • Ja konteinera Wrap rekvizīts ir atspējots un konteinera primārā ass pārpilde ir iestatīta uz Ritināt (horizontāla pārpilde horizontāliem konteineriem vai vertikālu pārplūdi vertikāliem konteineriem), ieteicams iestatīt rekvizītu Justify, lai tas būtu vai nu Sākums, vai Atstarpe.
  • Opcijas Centrs vai Beigas var padarīt nepieejamas atvasinātās vadīklas, ja konteiners ir pārāk mazs, lai parādītu visas vadīklas, pat ja Overflow rekvizīts ir iestatīts uz Ritināt.

• Pamatnes lietojumprogrammā nevar mainīt vadīklu izmērus vai pārvietot tās, jo vilkšanas & nomešanas vadīklas ir atspējotas izkārtojuma konteineros. Tā vietā izmantojiet izkārtojuma konteinera rekvizītus, lai sasniegtu vēlamo lielumu un novietojumu. Vadīklu pasūtīšanu var mainīt, izmantojot Koka skatu, vai izmantojot bulttaustiņus kā īsceļus.

• Izkārtojuma konteineros pašlaik netiek atbalstītas vadīklas Datu tabulas, Diagrammas un Pievienot attēlu.

• Dažu izkārtojumu konteineru rekvizīti ir paslēpti atvasinātajās vadīklās. Paslēptie rekvizīti joprojām var būt pieejami, izmantojot formulu joslu vai papildu paneli. Taču šie rekvizīti tiks ignorēti pat tad, ja tie ir iestatīti šajās vietās.

• Kad vadīklas tiek pārvietotas izkārtojuma konteinerā (piemēram, ja kopējat vai ielīmējat vadīklas), tās tiek ievietotas konteinerā pēc to secības Koka skatā.

Skatiet arī

Reaģējoša izkārtojuma izveide

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).