Жауапты кенеп бағдарламаларын құрастыру

Мақала
03/14/2023

Жауаптылық дегеніміз - қолданбаның әртүрлі экран өлшемдері мен пішін шарттарына автоматты түрде туралануы, қол жетімді экран кеңістігін ақылға қонымды пайдалану, әр құрылғыда интерфейс пен интерфейсті, пішін шарты және экран өлшемін қамтамасыз ету қабілеті.

Жауаптылық бағдарламаның әртүрлі элементтеріне келесі әрекеттерді жасау жолын көрсетуге мүмкіндік береді:

Экран өлшемінің өзгеруіне байланысты созыңыз немесе өлшемін өзгертіңіз.
Экран өлшемінің өзгеруіне байланысты позицияларды сақтаңыз немесе өзгертіңіз.

Неліктен жауап беретін бағдарламалар жасау керек?

Соңғы пайдаланушылар бағдарламаңызға үлкен мониторлы, әртүрлі экран өлшемді және пиксельдер саны әртүрлі телефондар, планшеттер, ноутбуктар және жұмыс үстелдері сияқты әртүрлі құрылғылардан қатынаса алады.

Әрбір пішін шарты пен құрылғыда үздік пайдаланушы тәжірибесі мен бағдарламаның ыңғайлылығын қамтамасыз ету үшін бағдарламаны жауап беретін құру қағидаларымен жобалау қажет. Бағдарлама тек веб-шолғышта немесе ұялы телефондарда қолдануға арналған болса да, пайдаланушы құрылғысының экран өлшемдері әртүрлі болуы мүмкін, сондықтан бағдарламаны жауапты қағидалармен жобалау жақсы идея болып табылады.

Бағдарламаны жауап беретін қағидалармен жобалау

Бағдарламаның пайдаланушы интерфейсін жобалауды бастамас бұрын, сіз келесі аспектілерді ескеруіңіз керек:

Қандай пішін карталарына немесе құрылғыларға қолдау көрсету керектігін анықтау керек.
Бағдарлама әрбір пішін шартында қалай көрінуі керек?
Бағдарламаның қандай элементтерін созып немесе өлшемін өзгерту қажет?
Элементтер кейбір пішін шарттарында жасырылған ба?
Бағдарлама кейбір пішін шарттарында өзгеше бола ма?

Осы талаптардың барлығы жинақталғаннан кейін, осы пайдаланушы интерфейсінің әртүрлі орналасуын бір бағдарламада Power Apps ішіндегі жауап беретін құралдармен қалай жасауға болатындығы туралы ойлануыңыз керек.

Жауап беретін орналасуларды қолдануды бастамас бұрын, келесі әрекеттерді орындау қажет:

Power Apps торабына өтіңіз.
Жауап беретін орналасуды пайдалану керек бағдарламаны ашыңыз.
Параметрлер > Көрсету тармағына өту арқылы Сәйкестендіру үшін масштабтау, Тараптар қатынасын құлыптау және Бағытты құлыптау опцияларын өшіріңіз және Қолдану түймешігін таңдаңыз.

Жауап беретін орналасулар

Келесі жауап беретін орналасуларды жаңа экран қосып, Орналасу қойыншасынн тиісті опцияны таңдау арқылы жасауға болады:

Экранның орналасуы.

Ескерім

Жаңа жауап беретін орналасулар бағдарлама пішімдері үшін қолжетімді, бірақ экранның жаңа үлгілері тек Планшет пішімі үшін қолжетімді.

Бөлінген экран

Бөлінген экран орналасуы екі бөлімнен тұрады, олардың әрқайсысы жұмыс үстелдерінде экранның 50% енін алады. Мобильді құрылғыларда бөлімдер бірінің астына бірі орналастырады, олардың әрқайсысы бүкіл экран енін алады.

Шеткі жазба орналасуында сол жақта бекітілген ені бар шеткі жазба бар. Негізгі бөлік бекітілген биіктік тақырыбынан тұрады, ал негізгі бөлім экранның қалған енін алады. Әдепкі бойынша үлгі мобильді құрылғыда бірдей әрекет етеді, бірақ кейбір теңшелімдер мобильді құрылғы тәжірибесіне қажетті пайдаланушы интерфейсі үлгісіне сәйкес ұсынылады.

Контейнерлермен жұмыс істеу

Контейнерлер барлық жауап беретін құрылымның стандартты блоктары болып табылады. Контейнер тік немесе көлденең бағытта автоматты орналасу контейнері немесе болашақта шектеулерге қолдау көрсететін бекітілген орналасу контейнері болуы мүмкін.

Төменде бағдарламаның пайдаланушы интерфейсін контейнерлермен құруға арналған бірнеше кеңестер берілген:

Әрдайым контейнер ішінде пайдаланушы интерфейсінің кестесін құрайтын пайдаланушы интерфейсінің элементтерін жасаңыз.
Контейнерге әртүрлі экран өлшемдеріне қалай орналастырылатынын немесе өлшемін анықтайтын жеке жауап беретін сипаттар мен параметрлерге ие болуға мүмкіндік береді.
Жауаптылыққа қатысты оның еншілес құрамдастарының орналасу жолын өзгертуге мүмкіндік береді.

Контейнерге арналған екі орналасу режимінің бірін таңдаңыз: қолмен орналастыру немесе автоматты түрде орналастыру (көлденең немесе тік)

Автоматты орналастыру контейнерлері

Еншілес құрамдастарды автоматты орналастыру үшін Көлденең контейнер және Тік контейнер екі басқару элементін пайдалануға болады. Бұл контейнерлер еншілес құрамдастардың орнын анықтайды, сондықтан контейнер ішіндегі құрамдас үшін X, Y осьтерін орнатудың қажеті болмайды. Сондай-ақ ол параметрлер негізінде қолжетімді кеңістікті өзінің еншілес құрамдастарына бөледі, сонымен қатар еншілес құрамдастардың тік және көлденең туралануын анықтайды.

Автоматты орналастыру контейнерлерін қашан қолдану керек

Автоматты орналастыру контейнерлерін келесі сценарийлерде пайдалануға болады:

Пайдаланушы интерфейсі экран өлшеміне немесе пішін шарты өзгерістеріне жауап беруі керек.
Экран өлшеміне немесе пішін шарты өзгеруіне байланысты өлшемін өзгерту немесе жылжыту қажет бірнеше құрамдас бар.
Элементтерді тігінен немесе көлденеңінен (өлшеміне қарамастан) жинақтау қажет болған жағдайда.
Элементтерді экранда біркелкі орналастыру қажет болғанда.

Автоматты орналастыру контейнерінің мысалы

Жауап беретін экран құру үшін:

Бос кенеп бағдарламасын Планшет орналасуымен жасаңыз.
Параметрлер > Көрсету тармағын таңдаңыз және Сәйкестендіру үшін масштабтау, Тараптар қатынасын құлыптау және Бағытты құлыптау опцияларын өшіріңіз және Қолдану түймешігін таңдаңыз.
Енді сол жақ бүйірлік тақтада Кірістіру тақталарынан Орналасу қойыншасынан Көлденең контейнер опциясын таңдаңыз.
Бүкіл кеңістікті осы сипаттарымен қамту үшін ең жоғарғы контейнер өлшемін өзгерту қажет. Өлшемін өзгерткен кезде ол экран өлшемімен бірдей өлшемді болады.
1. X = 0
2. Y= 0
3. Ені = Parent.Width
4. Биіктігі = Негізгі. Биіктік
Енді Кірістіру тақтасынан екі Тік контейнерді көлденең контейнерге қосыңыз.
Контейнерлерді жасау үшін толық тік кеңістікті толтырыңыз, Container1 опциясын таңдаңыз және Align (vertical) сипатын Stretch параметріне орнатыңыз.
Экранды мазмұн арасында бөлу үшін, екі еншілес контейнердегі Fill portions сипатын пайдаланыңыз. Сол жақ контейнер экран кеңістігінің 1/4 бөлігін алады.
1. Container2 опциясын таңдаңыз. Flexible width сипатының қосылғандығын көресіз. Fill portions сипатын 1 мәніне орнатыңыз.
2. Container3 опциясын таңдаңыз. Flexible width сипатының қосылғандығын көресіз. Fill portions сипатын 3 мәніне орнатыңыз.
Container2 опциясын таңдаңыз. Формула жолағына Fill = RGBA(56, 96, 178, 1) сипатын орнатыңыз. Align (horizontal) параметрін Stretch мәніне орнатыңыз.
Мәзір жасау үшін бірнеше түймешік қосыңыз. Қажет болса, түймешіктердің атын өзгертіңіз.
Container3 опциясын таңдаңыз және көлденең контейнер қосып, Flexible height сипатын өшіріңіз. Height параметрін 100 мәніне орнатыңыз. Align (vertical) параметрін Stretch мәніне орнатыңыз.
Кейбір элементтерді Container4 опциясын қосыңыз. Белгіше сипатымен белгішелерді басқаша етіп өзгертіңіз.
Container4 опциясын таңдаңыз. Justify (horizontal) сипатын End параметріне орнатыңыз. Align (vertical) сипатын Center мәніні орнатыңыз. Белгішелер арасында кеңістік жасау үшін Gap параметрін 40 мәніне орнатыңыз.
Container3 опциясын таңдаңыз. Align (horizontal) параметрін Stretch мәніне орнатыңыз. Vertical Overflow параметрін Scroll мәніне орнатыңыз.
Контейнер шегінен шыққанша басқа Белгі, Енгізулер, Файл қосыңыз. Төртбұрыштардың түсін әртүрлі етіп өзгертіңіз. Көрмеген мазмұнға қатынасу үшін айналдыру жолағын көресіз.
Алдын ала қарау опциясын немесе F5 пернесін таңдаңыз. Бағдарламаның әртүрлі экран өлшемдеріне қалай бейімделетінін көру үшін шолғыш терезесінің өлшемін өзгертіңіз.

Белгілі мәселелер

Орналастыру контейнері сипаттарының белгілі бір тіркесімдері үйлесімді емес немесе қажет емес нәтиже беруі мүмкін, мысалы:
- Егер контейнердің Wrap сипаты қосулы болса, Align сипатының параметрі еншілес басқару элементтеріне еленбейді.
- Егер контейнердің Wrap сипат өшіріліп, контейнердің негізгі осінен асып кетуі Айналдыру (Көлденең контейнерлер үшін көлденең асып кету немесе тік контейнерлер үшін тігінен асып кету) параметріне орнатылған болса, Justify сипатын Бастау немесе Арасындағы аралық параметріне орнату ұсынылады.
- Орталық немесе Соңы опциялары контейнер барлық басқару элементтерін көрсету тым кішкентай болған кезде еншілес басқару элементтерінің қолжетімсіз болуына әкеледі, тіпті Overflow сипаты Айналдыру параметріне орнатылған болса да.
Кенеп бағдарламасындағы басқару элементтерінің өлшемін немесе олардың орнын өзгертуге болмайды, себебі орналасу контейнерлерінде сүйреп апару басқару элементтері өшірілген. Керісінше, қажетті өлшем мен орынға жету үшін орналасу контейнерінің сипаттарын пайдаланыңыз. Тапсырысты басқаруды Тармақ көрінісі арқылы немесе көрсеткі пернелерін пернелер тіркесімі ретінде пайдалану арқылы өзгертуге болады.
Орналасу контейнерлерінде қазіргі уақытта Деректер кестесі, Диаграммалар және Сурет қосу басқару элементтеріне қолдау көрсетілмейді.
Кейбір орналастыру контейнерлерінің сипаттамалары еншілес басқару элементтері үшін жасырылған. Жасырын сипаттарға формула жолағы арқылы немесе кеңейтілген панель арқылы қолжетімді болады. Алайда, бұл сипаттар осы жерлерде орнатылған болса да еленбейді.
Басқару элементтері орналасу контейнеріне жылжытылған кезде (мысалы, басқару элементтерін көшіру немесе қою кезінде), олар контейнерге Тармақ көрінісі параметріндегі реті бойынша енгізіледі.

Сондай-ақ келесіні қараңыз

Жауап беретін орналасулар жасау