Reszponzív vászonalkalmazások építése

Cikk
03/14/2023

A reszponzív tulajdonság arra utal, hogy az alkalmazás képes-e automatikusan igazodni a különböző képernyőméretekhez és az űrlapmérethez, hogy a rendelkezésre álló képernyőt kihasználja, jó felhasználói felületet és felhasználói élményt biztosítva minden eszköz, méret és képernyőméret esetében.

A reszponzív tulajdonság lehetővé teszi, hogy az alkalmazás különböző elemei meghatározák, hogyan:

Nyújtsa és méretezze át magát a képernyőméret módosítása miatt.
A képernyőméret változásával megtarthatja vagy módosíthatja a pozíciókat.

Miért érdemes fogékony alkalmazásokat létrehozni?

A végfelhasználók különböző eszközökön keresztül érhetik el az alkalmazást, például telefonon, tableten, laptopon és nagyméretű monitoros asztali gépeken, különböző képernyőméretekkel, valamint változatos képpontokkal rendelkeznek.

Az alkalmazás nagyszerű felhasználói élménye és használhatósága biztosítása érdekében minden méreten és eszközön, szükséges az alkalmazást reszponzív tervezési elvekkel létrehozni. Még ha az alkalmazás csak a böngészőben vagy a mobiltelefonokon használható, a felhasználói eszköz képernyőjének mérete eltérő lehet, tehát a reszponzív elvekkel való tervezés jó ötlet.

Az alkalmazás kialakítása reszponzív elvekkel

Az alkalmazáshoz tartozó felhasználói felület tervezésének megkezdése előtt az alábbi szempontokat kell figyelembe vennie:

Milyen méreteket vagy eszközöket kíván támogatni?
Hogyan kell kinéznie az alkalmazásnak az egyes méreteknél?
Az alkalmazás mely elemeit kell megnyújtani vagy átméretezni?
A elemek rejtettek valamelyik méret esetén?
Az alkalmazás más-más módon viselkedik egyes méretek esetén?

Ha az összes követelményt összegyűjtötte, érdemes átgondolni, hogyan hozhatja létre ezeket a felhasználóifelület-elrendezéseket egyetlen alkalmazásban a Power Apps-ban elérhető reszponzív eszközökkel.

A rugalmas elrendezések használatának megkezdése előtt a következőket kell tennie:

Menjen a Power Apps felületre.
Nyissa meg azt az alkalmazást, ahol a rugalmas elrendezést használni szeretné.
Ugrás ide: Beállítások > Megjelenítés, ha letiltaná a Mérethez igazítás, Méretarány zárolása és Tájolás rögzítése lehetőségeket, végül válassza az Alkalmazás lehetőséget.

Rugalmas elrendezés

A következő rugalmas elrendezéseket egy új képernyő hozzáadásával hozhatja létre, és kiválaszthatja a megfelelő beállítást az elrendezés lapon:

Képernyő-elrendezések.

Megjegyzés

Az új rugalmas elrendezések az alkalmazások formátumában elérhetők, de az új képernyő-sablonok csak Tablet formátum esetén érhetők el.

Osztott képernyő

Az osztott képernyős elrendezés két szakaszból áll, mindegyik elfoglalja a 50%-os szélességű képernyőt az asztali gépeken. Mobileszközökön a szakaszok egymás alatt helyezkednek el, és mindegyik a teljes képernyős szélességet foglalja el.

Az oldalsáv elrendezés egy rögzített szélességű oldalsávval rendelkezik a bal oldalon. A fő szövegtörzs egy rögzített magasságú fejlécből áll, és a fő szakasz a képernyő többi szélességét foglalja magában. A sablon viselkedése alapértelmezés szerint megegyezik a mobilalkalmazással, de néhány testreszabás ajánlott a mobilélményhez szükséges felhasználóifelület-mintán.

A tárolók használata

A tárolók az összes rugalmas kialakítás építőelemei. A tároló lehet függőleges vagy vízszintes irányban automatikus elrendezésű tároló, illetve rögzített elrendezésű tároló, amely a jövőben a korlátozásokat fogja támogatni.

Az alábbiakban néhány tippet talál az alkalmazás felhasználói felületének tárolókkal történő kiépítéséhez:

Mindig olyan UI-elemeket hozzon létre, amelyek egy UI-táblázatot alkotnak egy konténeren belül.
Lehetővé teszi, hogy a tároló saját rugalmas tulajdonságokkal és beállításokkal határozza meg, hogy a rendszer hogyan helyezi el vagy méretezi a különböző képernyőméreteken.
Lehetővé teszi, hogy megváltoztassa az alárendelt összetevőinek a rugalmasság tekintetében történő meghatározását.

Válassza ki a két elrendezési mód egyikét a tárolóhoz: manuális elrendezés vagy automatikus elrendezés (vízszintes vagy függőleges)

Automatikus elrendezési tárolók

Két vezérlő, vízszintes tároló és függőleges tároló használható az alárendelt összetevők automatikus elrendezésére. Ezek a tárolók határozzák meg az alárendelt összetevők helyzetét, így nem kell X, Y értéket beállítani egy összetevőre a tárolón belül. Emellett a beállítások alapján feloszthatja a rendelkezésre álló helyet az alárendelt összetevők között, valamint meghatározhatja az alárendelt összetevők függőleges és vízszintes igazítását is.

Mikor érdemes automatikus elrendezésű tárolókat használni?

Az automatikus elrendezésű tárolók az alábbi helyzetekben használhatók:

A felhasználói felületnek reszponzívnak kell lennie a képernyőméret és a méret változásaira.
Egynél több alárendelt összetevőt kell átméretezni vagy áthelyezni a képernyőméret vagy méret változtatások alapján.
Ha függőlegesen vagy vízszintesen kell halmoznia az elemeket (a mérettől függetlenül).
Ha a képernyőn a tételeket egyenletesen kell elhelyezni.

Példa automatikus elrendezésű tárolóra

A rugalmas képernyő kiépítése:

Hozzon létre egy üres vászonalapú alkalmazást Tablet elrendezéssel.
Válassza ki a következőket: Beállítások > Megjelenítés, ha letiltaná a Mérethez igazítás, Méretarány zárolása és Tájolás rögzítése lehetőségeket, végül válassza az Alkalmazás lehetőséget.
Most a Beszúrás panelekből a bal oldalsávból az Elrendezés lapon válassza a Vízszintes tároló elemet.
A legfelső szintű tároló méretének olyannak kell lennie, hogy a teljes teret kihasználja ezekkel a tulajdonságokkal. Mérete megegyezik az átméretezett képernyő méretével.
1. X = 0
2. Y= 0
3. Width = Parent.Width
4. Magasság = Parent. Magasság
Most a beszúrás ablaktáblából vegyen fel két függőleges tárolót a vízszintes tárolóba.
A tárolók létrehozásához töltse ki a teljes függőleges területet, jelölje ki az Container1 elemet, és állítsa be a Align (vertical) tulajdonságot Stretch értékre.
A képernyő felosztásához a tartalmak között, használja a Fill portions tulajdonságot két alárendelt tárolóban. A baloldali tároló a képernyőterület 1/4-ét foglalja el.
1. Válassza a Tároló2 lehetőséget. Láthatja, hogy a Flexible width tulajdonság be van kapcsolva. Állítsa a Fill portions értékét 1-re.
2. Válassza a Tároló3 lehetőséget. Láthatja, hogy a Flexible width tulajdonság be van kapcsolva. Állítsa a Fill portions értékét 3-ra.
Válassza a Tároló2 lehetőséget. Állítsa be a Fill = RGBA(56, 96, 178, 1) tulajdonságot a szerkesztőlécen. Align (horizontal) beállítása Stretch értékre.
Adjon hozzá néhány gombot a menü létrehozásához. Szükség szerint nevezze át a gombokat.
Válassza a Tároló3 lehetőséget, és vegyen fel egy vízszintes tárolót, és kapcsolja ki a Flexible height tulajdonságot. Állítsa a Height értékét 100 értékre. Align (vertical) beállítása Stretch értékre.
Adjon hozzá néhány ikont a Tároló4 elemhez. Változtassa meg az ikonokat, hogy azok eltérjenek az Icon tulajdonságtól.
Válassza a Tároló4 lehetőséget. Állítsa a Justify (horizontal) tulajdonságot End értékre. Állítsa a Align (vertical) értékét Center értékre. Állítsa be Gap értékét 40-re az ikonok közötti térköz létrehozásához.
Válassza a Tároló3 lehetőséget. Align (horizontal) beállítása Stretch értékre. Vertical Overflow beállítása Scroll értékre.
Adjon hozzá más Címke, Bemenetek és Média értéket, amíg túlnyúlnak a tárolón. Módosítsa a téglalapok színét eltérőre. Egy görgetősáv jelenik meg a láthatatlan tartalom eléréséhez.
Válassza az Előnézet elemet vagy F5-t. A böngészőablak méretének megváltoztatásával megtekintheti, hogy az alkalmazás hogyan igazítja a különböző képernyős méreteket.

Ismert problémák

Az elrendezési tárolók tulajdonságainak bizonyos kombinációi összeegyeztethetetlenek, vagy nemkívánatos kimeneteket tudnak előállítani, például:
- Ha a tároló Wrap tulajdonsága engedélyezve van, akkor a Align tulajdonság beállítását a program nem veszi figyelembe az alárendelt vezérlőelemekben.
- Ha a tároló Wrap tulajdonsága le van tiltva, és a tároló elsődleges tengely túlcsordulása görgetésre van beállítva (vízszintesen túlcsordul a vízszintes tárolókon, vagy függőleges túlcsordulás a függőleges tárolók esetében), ajánlott a Justify tulajdonságot a Kezdés vagy a Térköz értékre.
- A Közép vagy a Vég beállítások esetén az alárendelt vezérlők elérhetetlenek lehetnek, amikor a tároló túl kicsi az összes vezérlő megjelenítéséhez, még ha a Overflow tulajdonság beállítása Görgetés is.
A vászonalapú alkalmazásban nem lehet átméretezni vagy áthelyezni a vezérlőelemeket, mert a húzásos vezérlőket az elrendezési tárolókban letiltja a rendszer. Ehelyett az elrendezési tároló tulajdonságai segítségével érheti el a kívánt méretet és pozicionálást. A vezérlőelemek sorrendjét módosíthatja a fanézeten, vagy a nyílbillentyűkkel billentyűparancsként módosítható.
Az Adattábla, Diagramok és Kép hozzáadása vezérlők jelenleg nem támogatottak az elrendezési tárolókban.
Az elrendezési tárolók néhány tulajdonsága rejtett az alárendelt vezérlőelemek esetében. A rejtett tulajdonságok továbbra is elérhetők a szerkesztőléc vagy a speciális panel segítségével. Ezek a tulajdonságok azonban akkor is figyelmen kívül maradnak, ha ezeken a helyeken vannak beállítva.
Amikor a vezérlőelemeket áthelyezzük egy elrendezési tárolóba (például a vezérlők másolása vagy beillesztésekor), a rendszer a tárolóba helyezi azokat a fanézetben.

Kapcsolódó információk

Rugalmas elrendezések létrehozása