Кенеп бағдарламаларында респонсивті орналасуларды жасау
Power Apps ішінде кенеп бағдарламасын жасау алдында сіз бағдарламаны телефон немесе планшет үшін бейімдеу керек пе, соны көрсетесіз. Бұл таңдау сіз бағдарламаны жасайтын кенептің өлшемі мен пішінін анықтайды.
Таңдау жасағаннан кейін, Параметрлер > Көрсету тармағын таңдасаңыз тағы бірнеше таңдау жасауға болады. Портреттік немесе альбомдық бағдарды және экран өлшемін (тек планшет) таңдауға болады. Сондай-ақ пропорцияларды құлыптауға немесе құлпын ашуға және құрылғының айналуын қолдауға (немесе қолдамауға) болады.
Бұл таңдаулар экран орналасуларын жасақтағанда сіз жасайтын әрбір екінші таңдаудың негізінде жатады. Бағдарламаңыз өлшемі басқа құрылғыда немесе интернетте жұмыс істесе, бүкіл орналасуыңыз бағдарлама жұмыс істеп жатқан экранға сыю үшін масштабталады. Мысалы, телефонға арналған бағдарлама үлкен шолғыш терезесінде жұмыс істесе, бағдарлама түзету үшін масштабталады және өз кеңістігі үшін өлшемі артық болып көрінеді. Бағдарлама көбірек басқару элементін немесе көбірек мазмұнды көрсету арқылы қосымша пиксельдердің артықшылығын пайдалана алмайды.
Респонсивті орналасуды жасасаңыз, басқару элементтері әртүрлі құрылғыларға немесе терезе өлшемдеріне жауап бере алады, сөйтіп әртүрлі тәжірибелерді табиғилау етіп сезіндіреді. Респонсивті орналасуға қол жеткізу үшін кейбір параметрлерді реттеп, бүкіл бағдарламада өрнектер жазасыз.
Қиыстыру үшін масштабтауды өшіру
Әр экранды орналасуы бағдарлама жұмыс істеп жатқан іс жүзіндегі кеңістікке бейімделетіндей конфигурациялауға болады.
Бағдарламаның әдепкі бойынша қосулы болатын Қиыстыру үшін масштабтау параметрін өшіру арқылы респонсивтікті белсендіруге болады. Бұл параметрді өшірсеңіз, Пропорцияларды құлыптау параметрі де өшіріледі, өйткені енді сіз нақты экран пішіні үшін жасақтап жатқан жоқсыз. (Бағдарламаңыз құрылғыны айналдыруды қолдайтын-қолдамайтынын әлі де көрсете аласыз).
Бағдарламаңызды респонсивті ету үшін қосымша қадамдарды орындау керек, бірақ бұл өзгеріс респонсивтікті мүмкін етуге қарай бірінші қадам болып табылады.
Бағдарлама және экран өлшемдерін түсіну
Бағдарлама орналасуларын экран өлшемдеріндегі өзгерістерге жауап беретін ету үшін сіз экранның Width және Height сипаттарын пайдаланатын формулаларды жазасыз. Бұл сипаттарды көрсету үшін Power Apps Studio ішінде бағдарламаны ашыңыз, содан кейін экранды таңдаңыз. Бұл сипаттар үшін әдепкі формулалар оң жақ бөліктегі Кеңейтілген қойыншасында көрінеді.
Ені = Max(App.Width, App.DesignWidth)
Биіктік = Max(App.Height, App.DesignHeight)
Бұл формулалар бағдарламаның Width, Height, DesignWidth және DesignHeight сипаттарына сілтеме жасайды. Бағдарламаның Width және Height сипаттары бағдарлама жұмыс істеп жатқан құрылғы немесе шолғыш терезесінің өлшемдеріне сәйкес келеді. Пайдаланушы шолғыш терезесінің өлшемін өзгертсе (немесе Бағдарды құлыптау параметрін өшірген болсаңыз, құрылғыны айналдырса), бұл сипаттардың мәндері динамикалық түрде өзгереді. Экранның Width және Height сипаттарындағы формулалар бұл мәндер өзгергенде қайта есептеледі.
DesignWidth және DesignHeight сипаттары Параметрлер бөліміндегі Дисплей тақтасында көрсетілген өлшемдерден алынады. Мысалы, портреттік бағдардағы телефон орналасуын таңдасаңыз, DesignWidth мәні 640 және DesignHeight мәні 1136 болады.
Олар экранның Width және Height сипаттарына арналған формулаларда пайдаланылатындықтан, DesignWidth және DesignHeight бағдарламаны жасақтайтын ең аз өлшемдер деп ойлай аласыз. Бағдарламаңыз үшін қолжетімді іс жүзіндегі аумақ бұл ең аз өлшемдерден де кішірек болса, экранның Width және Height сипаттарына арналған формулалар олардың мәндері минимум мәндерден кішірек болып кетпеуін қамтамасыз етеді. Бұл жағдайда пайдаланушы экранның бүкіл мазмұнын көру үшін айналдыруы керек.
Бағдарламаның DesignWidth және DesignHeight мәндерін белгілегеннен кейін әр экранның Width және Height сипаттары үшін әдепкі формулаларды өзгерту керек болмайды (жағдайлардың көпшілігінде). Кейінірек, бұл тақырыпта бұл формулаларды теңшегіңіз келуі мүмкін жағдайлар талқыланады.
Динамикалық орналасу үшін формулаларды пайдалану
Респонсивті дизайнды жасау үшін сіз абсолюттік (тұрақты) координата мәндерінің орнына формулаларды пайдалана отырып әр басқару элементінің орнын және өлшемін белгілейсіз. Бұл формулалар жалпы экран өлшемі тұрғысынан немесе экрандағы басқа басқару элементтеріне қатысты әр басқару элементінің орнын және өлшемін көрсетеді.
Маңызды
Басқару элементінің X, Y, Width және Height сипаттары үшін формулаларды жазғаннан кейін, кенеп өңдегішінде басқару элементін сүйресеңіз, формулаларыңыз тұрақты мәндермен қайта жазылады. Динамикалық орналасуға қол жеткізу үшін формулаларды пайдалануды бастағанда, басқару элементтерін сүйремеуіңіз керек.
Ең оңай жағдайда, бір басқару элементі бүкіл экранды толтырады. Бұл әсерді жасау үшін басқару элементінің сипаттарын мына мәндерге орнатыңыз:
| Сипат | Мәні |
|---|---|
| X | 0 |
| Y | 0 |
| Ені | Parent.Width |
| Биіктік | Parent.Height |
Бұл формулаларда Parent операторы пайдаланылады. Тікелей экранда орналасқан басқару элементі үшін Parent экранды білдіреді. Бұл сипат мәндері арқылы басқару элементі экранның жоғарғы сол жақ бұрышында (0, 0) көрінеді әрі Width және Height мәндері экранмен бірдей болады.
Осы тақырыпта кейінірек сіз осы принциптерді (және Parent операторын) басқару элементтерін галереялар, топ басқару элементтері және құрамдастар сияқты басқа контейнерлер ішінде орналастыру үшін қолданасыз.
Балама ретінде, басқару элементі экранның жоғарғы жартысын ғана толтыра алады. Бұл әсерді жасау үшін Height сипатын Parent.Height / 2 мәніне орнатыңыз және басқа формулаларды өзгеріссіз қалдырыңыз.
Егер сіз дәл сол экранның төменгі жартысын екінші басқару элементінің толтыруын қаласаңыз, оның формулаларын құруда кемінде екі басқа тәсілді қолдана аласыз. Қарапайым болуы үшін сіз келесі тәсілді қолдана аласыз:
| Басқару | Сипат | Формула |
|---|---|---|
| арттыру | X | 0 |
| арттыру | Y | 0 |
| арттыру | Ені | Parent.Width |
| арттыру | Биіктік | Parent.Height / 2 |
| Төменгі | X | 0 |
| Төменгі | Y | Parent.Height / 2 |
| Төменгі | Ені | Parent.Width |
| Төменгі | Биіктік | Parent.Height / 2 |
Бұл конфигурация қалаған әсерге қол жеткізеді, бірақ басқару элементтерінің салыстырмалы өлшемдері туралы ойыңызды өзгерткен болсаңыз, әр формуланы өңдеуіңіз керек болады. Мысалы, жоғарғы басқару элементі экранның үштен бір бөлігін ғана алуы керек, ал төменгі басқару элементі төменгі үштен екісін толтыруы керек деп шешуіңіз мүмкін.
Бұл әсерді жасау үшін Upper басқару элементінің Height сипатын әрі Lower басқару элементінің Y және Height сипаттарын жаңарту керек. Оның орнына, Lower басқару элементіне арналған формулаларды мына мысалдағыдай Upper басқару элементінің (және өзінің) тұрғысынан жазуды қарастырыңыз:
| Басқару | Сипат | Формула |
|---|---|---|
| арттыру | X | 0 |
| арттыру | Y | 0 |
| арттыру | Ені | Parent.Width |
| арттыру | Биіктік | Parent.Height / 3 |
| Lower | X | 0 |
| Lower | Y | Upper.Y + Upper.Height |
| Lower | Ені | Parent.Width |
| Төменгі | Биіктік | Parent.Height - Lower.Y |
Бұл формулалар орнында болғанда, экран биіктігінің басқа бөлшегін көрсету үшін Upper басқару элементінің Height сипатын ғана өзгерту керек. Lower басқару элементі өзгеріске сай автоматты түрде қозғалады және өлшемін өзгертеді.
Бұл формула үлгілерін C атты басқару элементі және D атты оның тектік немесе бағыныңқы басқару элементі арасындағы жалпы орналасу қатынастарын көрсету үшін пайдалануға болады.
| С және оның тектік элементі арасындағы қатынас | Сипат | Формула | Мысал |
|---|---|---|---|
| C басқару элементі N шетімен тектік элементтің енін толтырады | X | N |
 |
| Ені | Parent.Width - (N * 2) |
||
| C басқару элементі N шетімен тектік элементтің биіктігін толтырады | Y | N |
 |
| Биіктік | Parent.Height - (N * 2) |
||
| C басқару элементі N шетімен тектік элементтің оң жақ жиегімен тураланған | X | Parent.Width - (C.Width + N) |
 |
| C басқару элементі N шетімен тектік элементтің төменгі жиегімен тураланған | Y | Parent.Height - (C.Height + N) |
 |
| C басқару элементі тектік элементте көлденеңінен ортаға келтірілген | X | (Parent.Width - C.Width) / 2 |
 |
| C басқару элементі тектік элементте тігінен ортаға келтірілген | Y | (Parent.Height - C.Height) / 2 |
 |
| C және D арасындағы қатынас | Сипат | Формула | Мысал |
|---|---|---|---|
| C басқару элементі D элементімен көлденеңінен тураланған және ені D элементімен бірдей | X | D.X |
 |
| Ені | D.Width |
||
| C басқару элементі D элементімен тігінен тураланған және биіктігі D элементімен бірдей | Y | D.Y |
 |
| Биіктік | D.Height |
||
| C басқару элементінің оң жақ жиегі D элементінің оң жақ жиегімен тураланған | X | D.X + D.Width - C.Width |
 |
| C басқару элементінің төменгі жиегі D элементінің төменгі жиегімен тураланған | Y | D.Y + D.Height - C.Height |
 |
| C басқару элементі D элементіне қатысты көлденеңінен ортаға келтірілген | X | D.X + (D.Width - C.Width) / 2 |
 |
| C басқару элементі D элементіне қатысты тігінен ортаға келтірілген | Y | D.Y + (D.Height - C.Height) /2 |
 |
| C басқару элементі N аралығымен D элементінің оң жағында орналастырылған | X | D.X + D.Width + N |
 |
| C басқару элементі N аралығымен D астында орналастырылған | Y | D.Y + D.Height + N |
 |
| C басқару элементі D және тектік элементтің оң жиегі арасындағы кеңістікті толтырады | X | D.X + D.Width |
 |
| Ені | Parent.Width - C.X |
||
| C басқару элементі D және тектік элементтің төменгі жиегі арасындағы кеңістікті толтырады | Y | D.Y + D.Height |
 |
| Биіктік | Parent.Height - C.Y |
Иерархиялық орналасу
Көбірек басқару элементтерін қамтитын экрандарды құрастырғанда, басқару элементтерін экранға немесе бағыныңқы басқару элементіне қатысты емес, тектік басқару элементіне қатысты орналастыру ыңғайлырақ (немесе тіпті қажет) болады. Басқару элементтерін иерархиялық құрылымға реттеу арқылы формулаларыңызды жазуды және жүргізуді жеңілдетуге болады.
Галереялар
Егер бағдарламаңызда галереяны пайдалансаңыз, галерея үлгісі ішінде басқару элементтерін орналастыруыңыз керек. Бұл басқару элементтерін галерея үлгісіне сілтеме жасайтын Parent операторын пайдаланатын формулаларды жазу арқылы орналастыруға болады. Галерея үлгісі ішіндегі басқару элементтеріндегі формулаларда, Parent.TemplateHeight және Parent.TemplateWidth сипаттарын пайдаланыңыз; галереяның жалпы өлшемін білдіретін Parent.Width және Parent.Height сипаттарын пайдаланбаңыз.
Контейнер басқару элементі
Басты басқару элементі ретінде Орналасу контейнері басқару элементін пайдалануға болады.
Экранның жоғарғы жағындағы үстіңгі деректеме мысалын қарастырыңыз. Атауы және пайдаланушылар өзара әрекеттесе алатын бірнеше белгішесі бар үстіңгі деректеме жиі кездеседі. Мұндай үстіңгі деректемені Белгі басқару элементін және Белгіше басқару элементін қамтитын Контейнер басқару элементін пайдаланып құрастыруға болады:
Осы басқару элементтерінің сипаттарын мына мәндерге орнатыңыз:
| Сипат | Үстіңгі деректеме | Мәзір | Жабу | Аты |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Y | 0 |
0 |
0 |
0 |
| Ені | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Биіктік | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Үстіңгі деректеме басқару элементі үшін Parent экранды білдіреді. Басқалары үшін Parent сөзі Үстіңгі деректеме басқару элементін білдіреді.
Осы формулаларды жазғаннан кейін сіз Үстіңгі деректеме басқару элементінің өлшемін немесе орнын сипаттарының формулаларын өзгерту арқылы реттей аласыз. Еншілес басқару элементтерінің өлшемдері мен орындары сәйкесінше автоматты түрде реттеледі.
Контейнер басқару элементтерін автоматты түрде орналастыру
Сіз еншілес құрамдастарды автоматты түрде орналастыру үшін Автоматты орналастыру контейнер басқару элементтерін пайдалана аласыз. Бұл контейнерлер еншілес құрамдастардың орнын анықтайды, сондықтан контейнер ішіндегі құрамдас үшін X, Y осьтерін орнатудың қажеті болмайды. Сондай-ақ ол параметрлер негізінде қолжетімді кеңістікті өзінің еншілес құрамдастарына бөледі, сонымен қатар еншілес құрамдастардың тік және көлденең туралануын анықтайды. Қосымша ақпарат: Контейнер басқару элементтерін автоматты түрде орналастыру
Компоненттер
Құрамдас бөліктер деп аталатын басқа мүмкіндікті пайдалансаңыз, құрылыс блоктарын жасап, оларды қолданбаңызда қайта пайдалануға болады. Контейнер басқару элементінде сияқты, сіз құрамдас ішіне орналастыратын басқару элементтерінің орны мен өлшемі құрамдастың өлшемін білдіретін Parent.Width және Parent.Height сипаттарына негізделуі керек. Қосымша ақпарат: Құрамдасты жасау.
Орналасуды құрылғы өлшеміне және бағдарына бейімдеу
Осы уақытқа дейін сіз басқару элементтерін бір-біріне қатысты туралай отырып, қолжетімді кеңістікке жауап ретінде әр басқару элементінің өлшемін өзгерту үшін формулаларды пайдалану жолын үйрендіңіз. Құрылғының әртүрлі өлшемдері мен бағдарларына жауап ретінде орналасуға елеулірек өзгерістер енгізгіңіз келуі немесе қажет болуы мүмкін. Мысалы, құрылғы портреттік бағдардан альбомдық бағдарға айналғанда, тік орналасудан көлденеңге ауысқыңыз келуі мүмкін. Үлкенірек құрылғыда көбірек мазмұнды көрсете аласыз немесе тартымдырақ орналасуды қамтамасыз ету үшін оны қайта реттей аласыз. Кішірек құрылғыда мазмұнды бірнеше экранға бөлу қажет болуы мүмкін.
Құрылғының бағдары
Осы тақырыпта бұрынырақ сипатталғандай, экранның Width және Height сипаттарының әдепкі формулалары пайдаланушы құрылғыны айналдырғанда міндетті түрде жақсы тәжірибені қамтамасыз етпейді. Мысалы, портреттік бағдардағы телефонға арналған бағдарламаның DesignWidth мәні 640 және DesignHeight мәні 1136 болады. Планшеттік бағдардағы телефондағы сол бағдарламада мына сипат мәндері болады:
- Экранның Width сипаты
Max(App.Width, App.DesignWidth)деп орнатылған. Бағдарламаның Width (1136) мәні оның DesignWidth (640) мәніне үлкенірек, сондықтан есептегенде формула 1136 мәнін береді. - Экранның Height сипаты
Max(App.Height, App.DesignHeight)деп орнатылған. Бағдарламаның Height (640) мәні оның DesignHeight (1136) мәніне кішірек, сондықтан есептегенде формула 1136 мәнін береді.
Экранның Height мәні 1136 және құрылғының биіктігі (осы бағдарда) 640 болғанда, пайдаланушы бүкіл мазмұнын көрсету үшін экранды тігінен айналдыруы керек (бұл сіз қалаған тәжірибе болмауы мүмкін).
Экранның Width және Height сипаттарын құрылғы бағдарына бейімдеу үшін мына формулаларды пайдалануға болады:
Ені = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
Биіктік = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Бұл формулалар құрылғының ені биіктігінен азырақ екеніне (портреттік бағдар) немесе биіктігінен үлкенірек екеніне (альбомдық бағдар) негізделіп бағдарламаның DesignWidth және DesignHeight мәндерін орындарымен ауыстырады.
Экранның Width және Height формулаларын реттегеннен кейін сонымен бірге қолжетімді кеңістікті жақсырақ пайдалану үшін экран ішінде басқару элементтерін қайта реттегіңіз келуі мүмкін. Мысалы, егер екі басқару элементінің әрқайсысы экранның жартысын алса, оларды портреттік бағдарда тігінен дестелеуге болады, бірақ альбомдық бағдарда қатар реттей аласыз.
Экранның Orientation сипатын экран бағдары тік немесе көлденең екенін анықтау үшін пайдалануға болады.
Ескерім
Альбомдық бағдарда Upper және Lower басқару элементтері сол және оң басқару элементтері түрінде көрінеді.
| Басқару | Сипат | Формула |
|---|---|---|
| арттыру | X | 0 |
| арттыру | Y | 0 |
| арттыру | Ені | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| арттыру | Биіктік | 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 | Ені | Parent.Width - Lower.X |
| Төменгі | Биіктік | Parent.Height - Lower.Y |
Экран өлшемдері және тоқтау орындары
Орналасуды құрылғының өлшемі негізінде реттеуге болады. Экранның Size сипаты ағымдағы құрылғы өлшемін жіктейді. Өлшем — оң бүтін сан; ScreenSize түрі оқу ыңғайлылығына көмектесу үшін аталған тұрақты мәндерді қамтамасыз етеді. Бұл кестеде тұрақты мәндер тізілген:
| Тұрақты мән | Мәні | Әдеттегі құрылғы (бағдарламаның әдепкі параметрлерін пайдаланады) |
|---|---|---|
| ScreenSize.Small | 1 | Телефон |
| ScreenSize.Medium | 2 | Планшет, тігінен ұсталған |
| ScreenSize.Large | 3 | Планшет, көлденеңінен ұсталған |
| ScreenSize.ExtraLarge | 4 | Үстелдік компьютер |
Бұл өлшемдерді бағдарламаның орналасуы туралы шешімдер қабылдау үшін пайдаланыңыз. Мысалы, басқару элементі телефон өлшемді құрылғыда жасырын болуын, бірақ басқа жағдайда көрінетін болуын қаласаңыз, басқару элементінің Visible сипатын мына формулаға орнатуға болады:
Parent.Size >= ScreenSize.Medium
Өлшем орташа немесе үлкенірек болғанда, бұл формула есептегенде true мәнін береді, олай болмаса, false мәнін береді.
Экран өлшемі негізінде басқару элементінің экран енінің басқа бөлігін алуын қаласаңыз, басқару элементінің Width сипатын мына формулаға орнатыңыз:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
Бұл формула шағын экранда басқару элементінің енін экран енінің жартысына, орташа экранда экран енінің оннан үшіне және барлық басқа экрандарда экарн енінің ширегіне орнатады.
Теңшелетін тоқтау орындары
Экранның Size сипаты экранның Width сипатын бағдарламаның SizeBreakpoints сипатындағы мәндермен салыстыру арқылы есептеледі. Бұл сипат — аталған экран өлшемдерін бөлетін ен тоқтау орындарын көрсететін сандардың бір бағандық кестесі:
Планшет немесе интернет үшін жасалған бағдарламада, бағдарламаның SizeBreakpoints сипатындағы әдепкі мән — [600, 900, 1200]. Телефондар үшін жасалған бағдарламада мән — [1200, 1800, 2400]. (Телефон бағдарламалары үшін мәндер екі еселенеді, өйткені мұндай бағдарламалар басқа бағдарламаларда пайдаланылатын координаттардың екі есесі болып табылатын координаттарды пайдаланады).
Бағдарламаның тоқтау орындарын бағдарламаның SizeBreakpoints сипатындағы мәндерді өзгерту арқылы теңшеуге болады. Тармақ көрінісінде Бағдарлама тармағын таңдаңыз, сипаттар тізімінде SizeBreakpoints сипатын таңдаңыз, содан кейін формула жолағында мәндерді өңдеңіз. Сіз бағдарламаға қанша тоқтау орны қажет болса, соншасын жасай аласыз, бірақ 1 - 4 өлшемдері ғана аталған экран өлшемдеріне сай. Формулаларда сіз сандық мәндері бойынша (5, 6 және т.с.с.) ExtraLarge өлшемінен тыс өлшемдерге сілтеме жасай аласыз.
Сондай-ақ сіз азырақ тоқтау орындарын көрсете аласыз. Мысалы, бағдарламаңыз тек үш өлшемді (екі тоқтау орнын) қажет етуі мүмкін, осылайша ықтимал экран өлшемдері Small, Medium және Large болады.
Белгілі шектеулер
Жасау кенебі жасалған өлшем формулаларына жауап бермейді. Респонсивті мінез-құлықты сынау үшін бағдарламаңызды сақтаңыз және жариялаңыз, содан кейін оны өлшемдері және бағдарлары әртүрлі құрылғылард немесе шолғыш терезелерінде ашыңыз.
Басқару элементінің X, Y, Width және Height сипаттарында өрнектерді немесе формулаларды жазсаңыз, кейінірек басқару элементін басқа орынға сүйресеңіз немесе жиегін сүйреу арқылы басқару элементінің өлшемін өзгертсеңіз, бұл өрнектер немесе формулалар қайта жазылады.
Ескерім
Сіз құжат тіліңіздің артықшылықтары туралы айта аласыз ба? Қысқа сауалнамаға қатысыңыз. (бұл сауалнама ағылшын тілінде екеніне назар аударыңыз)
Сауалнама шамамен жеті минут уақытыңызды алады. Жеке деректер жиналмайды (құпиялылық туралы мәлімдеме).