Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Sebelum membuat aplikasi kanvas di Power Apps, Anda menentukan apakah akan menyesuaikan aplikasi untuk ponsel atau tablet. Pilihan ini menentukan ukuran dan bentuk kanvas yang akan digunakan untuk membuat aplikasi Anda.
Setelah Anda membuat pilihan tersebut, Anda dapat membuat beberapa pilihan lagi jika Anda memilih Pengaturan>Tampilan. Anda dapat memilih orientasi potret atau lanskap dan ukuran layar (hanya tablet). Anda juga dapat mengunci atau membuka rasio aspek dan mendukung rotasi perangkat (atau tidak).
Pilihan tersebut mendasari setiap pilihan lain yang Anda buat saat merancang tata letak layar. Jika aplikasi berjalan pada perangkat dengan ukuran berbeda atau di web, seluruh skala tata letak akan menyesuaikan dengan layar tempat aplikasi berjalan. Jika aplikasi yang dirancang untuk ponsel berjalan di jendela browser besar, misalnya, aplikasi akan diskalakan untuk mengimbanginya dan terlihat terlalu besar untuk ruang tersebut. Aplikasi ini tidak dapat memanfaatkan piksel tambahan dengan menampilkan kontrol lainnya atau lebih banyak konten.
Jika Anda membuat tata letak responsif, kontrol dapat merespons terhadap berbagai perangkat atau ukuran jendela, sehingga berbagai pengalaman akan terasa lebih alami. Untuk mencapai tata letak responsif, Anda dapat menyesuaikan beberapa pengaturan dan menulis ekspresi di seluruh aplikasi.
Nonaktifkan Skalakan agar sesuai
Anda dapat mengonfigurasi setiap layar sehingga tata letaknya menyesuaikan ke ruang aktual tempat aplikasi berjalan.
Anda mengaktifkan responsivitas dengan menonaktifkan pengaturan Skalakan agar sesuai aplikasi, yang aktif secara default. Saat Anda menonaktifkan pengaturan ini, Anda juga menonaktifkan Kunci rasio aspek karena Anda tidak lagi mendesain untuk bentuk layar tertentu. (Anda tetap dapat menentukan apakah aplikasi Anda mendukung rotasi perangkat.)
Untuk membuat aplikasi Anda responsif, Anda harus melakukan langkah-langkah tambahan, namun perubahan ini adalah langkah pertama untuk dapat membuat keresponsifan.
Memahami dimensi aplikasi dan layar
Untuk membuat tata letak aplikasi Anda merespons perubahan dimensi layar, Anda akan menulis rumus yang menggunakan properti Lebar dan Tinggi layar. Untuk menampilkan properti ini, buka aplikasi di Power Apps Studio, lalu pilih layar. Rumus default untuk properti ini muncul pada tab Lanjutan di panel sebelah kanan.
Lebar = Max(App.Width, App.DesignWidth)
Tinggi = Max(App.Height, App.DesignHeight)
Rumus ini merujuk pada properti Width, Height, DesignWidth, dan DesignHeight aplikasi. Properti Lebar dan Tinggi aplikasi sesuai dengan dimensi perangkat atau jendela browser tempat aplikasi Anda berjalan. Jika pengguna mengubah ukuran jendela browser (atau memutar perangkat jika Anda telah menonaktifkan Kunci orientasi), nilai properti ini berubah secara dinamis. Rumus dalam properti Lebar dan Tinggi layar dievaluasi ulang saat nilai-nilai ini berubah.
Properti DesignWidth dan DesignHeight berasal dari dimensi yang Anda tentukan di panel Display pada Settings. Misalnya, jika Anda memilih tata letak telepon dalam orientasi potret, DesignWidth adalah 640, dan DesignHeight adalah 1136.
Karena keduanya digunakan dalam rumus untuk properti Lebar dan Tinggi layar, Anda dapat menganggap DesainLebar dan DesainTinggi sebagai dimensi minimum untuk mendesain aplikasi. Jika area aktual yang tersedia untuk aplikasi Anda bahkan lebih kecil dari dimensi minimum ini, rumus untuk properti Lebar dan Tinggi layar memastikan bahwa nilainya tidak akan menjadi lebih kecil dari minimum. Dalam kasus tersebut, pengguna harus menggulir untuk melihat semua konten layar.
Setelah Anda menetapkan DesignWidth dan DesignHeight aplikasi Anda, Anda tidak (dalam sebagian besar kasus) perlu mengubah rumus default untuk setiap properti Width dan Height layar. Kemudian, topik ini membahas kasus yang memungkinkan Anda menyesuaikan formula ini.
Gunakan formula untuk tata letak dinamis
Untuk membuat desain responsif, Anda akan mencari dan mengukur setiap kontrol dengan menggunakan formula dan bukan dengan nilai koordinat absolut (konstan). Formula ini mengekspresikan posisi dan ukuran setiap kontrol dari segi ukuran layar secara keseluruhan atau relatif terhadap kontrol lain pada layar.
Penting
Setelah Anda menulis rumus untuk properti X, Y, Width dan Height dari suatu kontrol, rumus Anda akan ditimpa dengan nilai konstan jika Anda kemudian menyeret kontrol tersebut di editor kanvas. Jika Anda mulai menggunakan formula untuk mencapai tata letak dinamis, Anda harus menghindari kontrol seret.
Dalam kasus yang paling sederhana, satu kontrol mengisi seluruh layar. Untuk membuat efek ini, atur properti kontrol ke nilai berikut:
| Properti | Nilai |
|---|---|
| X | 0 |
| kamu | 0 |
| Lebar | Parent.Width |
| Tinggi | Parent.Height |
Rumus ini menggunakan operator Parent . Untuk kontrol yang ditempatkan langsung di layar, Induk mengacu pada layar. Dengan nilai properti ini, kontrol muncul di sudut kiri atas layar (0, 0) dan memiliki Lebar dan Tinggi yang sama dengan layar.
Nanti dalam topik ini, Anda akan menerapkan prinsip-prinsip ini (dan operator Induk ) untuk memposisikan kontrol di dalam wadah lain, seperti galeri, kontrol grup, dan komponen.
Sebagai alternatif, kontrol hanya dapat mengisi separuh bagian atas layar. Untuk membuat efek ini, atur properti Height ke Parent.Height / 2, dan biarkan rumus lainnya tidak berubah.
Jika Anda menginginkan kontrol kedua untuk mengisi separuh bawah layar yang sama, Anda dapat mengambil setidaknya dua pendekatan lain untuk membangun formulanya. Secara sederhana, Anda dapat mengambil pendekatan ini:
| Kontrol | Properti | Rumus |
|---|---|---|
| Atas | X | 0 |
| Atas | kamu | 0 |
| Atas | Lebar | Parent.Width |
| Atas | Tinggi | Parent.Height / 2 |
| Lebih rendah | X | 0 |
| Lebih rendah | kamu | Parent.Height / 2 |
| Lebih rendah | Lebar | Parent.Width |
| Lebih rendah | Tinggi | Parent.Height / 2 |
Konfigurasi ini akan menghasilkan efek yang Anda inginkan, namun Anda harus mengedit setiap formula jika Anda berubah pikiran tentang ukuran relatif kontrol ini. Misalnya, Anda dapat memutuskan bahwa kontrol atas hanya akan menempati sepertiga teratas layar, dengan kontrol bawah mengisi dua pertiga dari bagian yang lebih rendah.
Untuk menciptakan efek tersebut, Anda perlu memperbarui properti Height pada kontrol Upper dan properti Y dan Height pada kontrol Lower . Sebaliknya, pertimbangkan untuk menulis rumus untuk kontrol Bawah dalam kaitannya dengan kontrol Atas (dan dirinya sendiri), seperti dalam contoh ini:
| Kontrol | Properti | Rumus |
|---|---|---|
| Atas | X | 0 |
| Atas | kamu | 0 |
| Atas | Lebar | Parent.Width |
| Atas | Tinggi | Parent.Height / 3 |
| Lebih rendah | X | 0 |
| Lebih rendah | kamu | Upper.Y + Upper.Height |
| Lebih rendah | Lebar | Parent.Width |
| Lebih rendah | Tinggi | Parent.Height - Lower.Y |
Dengan menggunakan rumus ini, Anda hanya perlu mengubah properti Height dari kontrol Upper untuk mengekspresikan fraksi berbeda dari tinggi layar. Kontrol Bawah secara otomatis bergerak dan mengubah ukuran untuk memperhitungkan perubahan.
Anda dapat menggunakan pola rumus ini untuk mengekspresikan hubungan tata letak umum antara kontrol, bernama C, dan kontrol induk atau saudaranya, bernama D.
| Hubungan antara C dan induknya | Properti | Rumus | Ilustrasi |
|---|---|---|---|
| C mengisi lebar induk, dengan margin N | X | N |
|
| Lebar | Parent.Width - (N * 2) |
||
| C mengisi tinggi induk, dengan margin N | kamu | N |
|
| Tinggi | Parent.Height - (N * 2) |
||
| C sejajar dengan tepi kanan induk, dengan margin N | X | Parent.Width - (C.Width + N) |
|
| C sejajar dengan tepi bawah induk, dengan margin N | kamu | Parent.Height - (C.Height + N) |
|
| C dipusatkan secara horizontal pada induk | X | (Parent.Width - C.Width) / 2 |
|
| C dipusatkan secara vertikal pada induk | kamu | (Parent.Height - C.Height) / 2 |
|
| Hubungan antara C dan D | Properti | Rumus | Ilustrasi |
|---|---|---|---|
| C sejajar secara horizontal dengan D dan lebarnya sama dengan D | X | D.X |
|
| Lebar | D.Width |
||
| C sejajar vertikal dengan D dan tingginya sama dengan D | kamu | D.Y |
|
| Tinggi | D.Height |
||
| Tepi kanan C sejajar dengan tepi kanan D | X | D.X + D.Width - C.Width |
|
| Tepi bawah C sejajar dengan tepi bawah D | kamu | D.Y + D.Height - C.Height |
|
| C dipusatkan secara horizontal relatif terhadap D | X | D.X + (D.Width - C.Width) / 2 |
|
| C dipusatkan secara vertikal relatif terhadap D | kamu | D.Y + (D.Height - C.Height) /2 |
|
| C diposisikan di sebelah kanan D dengan celah N | X | D.X + D.Width + N |
|
| C diposisikan di bawah D dengan celah N | kamu | D.Y + D.Height + N |
|
| C mengisi ruang antara D dan tepi kanan induk | X | D.X + D.Width |
|
| Lebar | Parent.Width - C.X |
||
| C mengisi ruang antara D dan tepi bawah induk | Y | D.Y + D.Height |
|
| Tinggi | Parent.Height - C.Y |
Tata letak hierarki
Saat Anda membuat layar yang berisi kontrol lainnya, akan menjadi lebih nyaman (atau bahkan perlu) untuk memposisikan kontrol relatif terhadap kontrol induk, bukan relatif terhadap layar atau kontrol saudara. Dengan mengatur kontrol Anda ke dalam struktur hierarki, Anda dapat membuat formula lebih mudah untuk ditulis dan dipelihara.
Galeri
Jika Anda menggunakan galeri di aplikasi, Anda harus meletakkan kontrol dalam templat galeri. Anda dapat memposisikan kontrol ini dengan menulis rumus yang menggunakan operator Induk , yang akan merujuk ke templat galeri. Dalam rumus pada kontrol dalam templat galeri, gunakan properti Parent.TemplateHeight dan Parent.TemplateWidth ; jangan gunakan Parent.Width dan Parent.Height, yang merujuk pada ukuran keseluruhan galeri.
Kontrol wadah
Anda dapat menggunakan kontrol wadah Tata Letak sebagai kontrol induk.
Pertimbangkan contoh header di bagian atas layar. Ini umum untuk memiliki header dengan judul dan beberapa ikon yang dapat berinteraksi dengan pengguna Anda. Anda dapat membuat header seperti itu menggunakan kontrol Container , yang berisi kontrol Label dan dua kontrol Icon :
Atur properti untuk kontrol ini ke nilai ini:
| Properti | Kop | Menu | Tutup | Jabatan |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| kamu | 0 |
0 |
0 |
0 |
| Lebar | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Tinggi | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Untuk kontrol Header , Parent mengacu pada layar. Untuk yang lainnya, Parent mengacu pada kontrol Header .
Setelah menulis rumus ini, Anda dapat menyesuaikan ukuran atau posisi kontrol Header dengan mengubah rumus untuk propertinya. Ukuran dan posisi kontrol anak akan disesuaikan secara otomatis.
Kontrol kontainer tata letak otomatis
Anda dapat menggunakan fitur, kontrol wadah Tata Letak Otomatis untuk menata komponen anak secara otomatis. Kontainer ini menentukan posisi komponen anak sehingga Anda tidak perlu mengatur X, Y untuk komponen di dalam kontainer. Selain itu, dapat mendistribusikan ruang yang tersedia untuk komponen anak berdasarkan pengaturan, serta menentukan keselarasan vertikal dan horizontal komponen anak. Informasi selengkapnya: Kontrol wadah tata letak otomatis
Komponen
Jika Anda menggunakan fitur lain, bernama Komponen, Anda dapat membangun blok penyusun dan menggunakannya kembali di seluruh aplikasi Anda. Seperti halnya kontrol Container , kontrol yang Anda tempatkan dalam suatu komponen harus mendasarkan rumus posisi dan ukurannya pada Parent.Width dan Parent.Height, yang merujuk pada ukuran komponen. Informasi selengkapnya: Buat komponen.
Menyesuaikan tata letak untuk ukuran dan orientasi perangkat
Sejauh ini, Anda telah mempelajari cara menggunakan formula untuk mengubah ukuran setiap kontrol sebagai respons terhadap ruang yang tersedia, sekaligus menjaga kontrol selaras relatif terhadap satu sama lain. Namun Anda mungkin ingin atau perlu membuat perubahan tata letak yang lebih substansial sebagai respons terhadap ukuran dan orientasi perangkat yang berbeda. Saat perangkat diputar dari orientasi potret ke lanskap, misalnya, Anda mungkin ingin beralih dari tata letak vertikal ke horizontal. Pada perangkat yang lebih besar, Anda dapat menyajikan lebih banyak konten atau menyusunnya kembali untuk menyediakan tata letak yang lebih menarik. Pada perangkat yang lebih kecil, Anda mungkin harus membagi konten di beberapa layar.
Orientasi perangkat
Rumus default untuk properti Lebar dan Tinggi layar, sebagaimana dijelaskan topik ini sebelumnya, belum tentu memberikan pengalaman yang baik apabila pengguna memutar perangkat. Misalnya, aplikasi yang dirancang untuk ponsel dalam orientasi potret memiliki DesignWidth 640 dan DesignHeight 1136. Aplikasi yang sama pada ponsel dalam orientasi lanskap akan memiliki nilai properti ini:
- Properti Lebar layar diatur ke
Max(App.Width, App.DesignWidth). Lebar aplikasi (1136) lebih besar daripada LebarDesain (640), sehingga rumus bernilai 1136. - Properti Ketinggian layar diatur ke
Max(App.Height, App.DesignHeight). Tinggi aplikasi (640) lebih kecil daripada TinggiDesain (1136), sehingga rumus bernilai 1136.
Dengan tinggi layar 1136 dan tinggi perangkat (dalam orientasi ini) 640, pengguna harus menggulir layar secara vertikal untuk menampilkan semua kontennya, yang mungkin bukan pengalaman yang Anda inginkan.
Untuk menyesuaikan properti Lebar dan Tinggi layar dengan orientasi perangkat, Anda dapat menggunakan rumus berikut:
Lebar = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
Tinggi = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Rumus ini menukar nilai DesignWidth dan DesignHeight aplikasi, berdasarkan apakah lebar perangkat kurang dari tingginya (orientasi potret) atau lebih dari tingginya (orientasi lanskap).
Setelah Anda menyesuaikan rumus Lebar dan Tinggi layar, Anda mungkin juga ingin mengatur ulang kontrol dalam layar Anda untuk memanfaatkan ruang yang tersedia dengan lebih baik. Misalnya, jika masing-masing dari dua kontrol menempati separuh layar, Anda mungkin menumpuk mereka secara vertikal dalam potret, namun mengaturnya berdampingan dalam lanskap.
Anda dapat menggunakan properti Orientasi layar untuk menentukan apakah layar berorientasi vertikal atau horizontal.
Catatan
Dalam orientasi lanskap, kontrol Atas dan Bawah muncul sebagai kontrol kiri dan kanan.
| Kontrol | Properti | Rumus |
|---|---|---|
| Atas | X | 0 |
| Atas | kamu | 0 |
| Atas | Lebar | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| Atas | Tinggi | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| Lebih rendah | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| Lebih rendah | Y | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| Lebih rendah | Lebar | Parent.Width - Lower.X |
| Lebih rendah | Tinggi | Parent.Height - Lower.Y |
Ukuran layar dan titik henti
Anda dapat menyesuaikan tata letak berdasarkan ukuran perangkat. Layarnya Ukuran properti mengklasifikasikan ukuran perangkat saat ini. Ukuran adalah integer positif; jenis ScreenSize menyediakan konstanta bernama untuk membantu keterbacaannya. Tabel ini mencantumkan daftar konstanta:
| Konstanta | Nilai | Jenis perangkat biasa (menggunakan pengaturan aplikasi default) |
|---|---|---|
| ScreenSize.Small | 1 | Nomor Telepon |
| ScreenSize.Medium | 2 | Tablet, yang dipegang secara vertikal |
| ScreenSize.Large | 3 | Tablet, yang dipegang secara horizontal |
| ScreenSize.ExtraLarge | 4 | Komputer desktop |
Gunakan ukuran ini untuk membuat keputusan tentang tata letak aplikasi Anda. Misalnya, jika Anda ingin kontrol disembunyikan pada perangkat seukuran telepon tetapi terlihat di perangkat lain, Anda dapat mengatur kontrol Bisa dilihat properti untuk rumus ini:
Parent.Size >= ScreenSize.Medium
Rumus ini mengevaluasi ke BENAR ketika ukurannya sedang atau lebih besar dan PALSU jika tidak.
Jika Anda ingin kontrol menempati sebagian lebar layar yang berbeda berdasarkan ukuran layar, atur kontrol Lebar properti untuk rumus ini:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
Formula ini mengatur lebar kontrol menjadi setengah dari lebar layar pada layar kecil, tiga per sepuluh dari lebar layar pada layar sedang dan seperempat dari lebar layar pada semua layar lainnya.
Titik henti yang disesuaikan
Layarnya Ukuran properti dihitung dengan membandingkan layar Lebar properti ke nilai dalam aplikasi UkuranTitik Putus milik. Properti ini adalah tabel nomor satu kolom yang menunjukkan titik henti lebar yang memisahkan ukuran layar yang disebutkan:
Dalam aplikasi yang dibuat untuk tablet atau web, nilai default dalam aplikasi UkuranTitik Putus properti adalah [600, 900, 1200]. Dalam aplikasi yang dibuat untuk ponsel, nilainya adalah [1200, 1800, 2400]. (Nilai untuk aplikasi ponsel digandakan karena aplikasi tersebut menggunakan koordinat yang secara efektif menggandakan koordinat yang digunakan di aplikasi lain.)
Anda dapat menyesuaikan titik henti aplikasi Anda dengan mengubah nilai dalam aplikasi UkuranTitik Putus milik. Memilih Aplikasi dalam tampilan pohon, pilih UkuranTitik Putus dalam daftar properti, lalu edit nilai dalam bilah rumus. Anda dapat membuat titik henti sebanyak apa pun yang dibutuhkan oleh aplikasi Anda, namun hanya ukuran 1 hingga 4 yang sesuai dengan ukuran layar yang dinamai. Dalam formula, Anda dapat merujuk ke ukuran di luar ExtraLarge dengan nilai numerik (5, 6, dan seterusnya).
Anda juga dapat menentukan titik henti yang lebih sedikit. Contohnya, aplikasi Anda mungkin hanya memerlukan tiga ukuran (dua titik henti), sehingga ukuran layar yang mungkin adalah kecil, sedang, dan besar.
Batasan yang diketahui
Kanvas penulisan tidak merespons formula ukuran yang dibuat. Untuk menguji perilaku responsif, simpan dan publikasikan aplikasi, lalu buka di perangkat atau di jendela browser dengan berbagai ukuran dan orientasi.
Jika Anda menulis ekspresi atau rumus di X Bahasa Indonesia: kamu Bahasa Indonesia: Lebar, Dan Tinggi properti suatu kontrol, Anda akan menimpa ekspresi atau rumus tersebut jika nanti Anda menyeret kontrol ke lokasi lain atau mengubah ukuran kontrol dengan menyeret batasnya.