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 Anda membangun aplikasi kanvas di Power Apps, tentukan apakah akan menyesuaikan aplikasi untuk ponsel atau tablet. Pilihan ini menentukan ukuran dan bentuk kanvas tempat Anda membuat aplikasi.
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 menyesuaikan beberapa pengaturan dan menulis ekspresi di seluruh aplikasi Anda.
Nonaktifkan Skalakan agar sesuai
Anda dapat mengonfigurasi setiap kontrol layar sehingga tata letaknya beradaptasi dengan ruang aktual tempat aplikasi berjalan.
Anda mengaktifkan responsivitas dengan menonaktifkan pengaturan Skalakan agar sesuai aplikasi, yang aktif secara default. Jika Anda menonaktifkan pengaturan ini, Anda juga akan 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 layar aplikasi dan perangkat
Untuk membuat tata letak aplikasi merespons perubahan di layar perangkat, atau browser web, dimensi, Anda akan menulis rumus yang menggunakan properti Lebar dan Tinggi layar. Untuk menampilkan properti ini, buka aplikasi di Power Apps Studio, lalu pilih kontrol layar. Rumus default untuk properti ini muncul pada tab Lanjutan di panel sebelah kanan.
Lebar = Max(App.Width, App.MinScreenWidth)
Tinggi = Max(App.Height, App.MinScreenHeight)
Rumus ini mengacu pada properti Width, Height, MinScreenWidth, dan MinScreenHeight 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 kontrol layar dievaluasi ulang ketika nilai-nilai ini berubah.
Nilai di properti App.Width dan App.Height berasal dari dimensi yang Anda tentukan di panel TampilanPengaturan. Misalnya, jika Anda memilih ukuran lanskap "Default 16:9", App.Width adalah 1366, dan App.Height adalah 768.
Karena digunakan dalam rumus untuk properti Lebar dan Tinggi kontrol layar, MinScreenWidth dan MinScreenHeight adalah dimensi minimum yang akan Anda desain aplikasinya. Jika area aktual yang tersedia untuk aplikasi Anda bahkan lebih kecil dari dimensi minimum ini, rumus untuk properti Lebar dan Tinggi kontrol layar memastikan bahwa nilainya tidak akan menjadi lebih kecil dari minimum. Dalam hal ini, pengguna harus menggulir untuk melihat semua konten tata letak. Properti MinScreenWidth dan MinScreenHeight dapat diatur diProperti>Objek> AplikasiTingkat Lanjut.
Setelah Anda membuat MinScreenWidth dan MinScreenHeight aplikasi, Anda tidak akan (dalam kebanyakan kasus) perlu mengubah rumus default untuk setiap properti Lebar dan Tinggi kontrol 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). Rumus ini mengekspresikan posisi dan ukuran setiap kontrol dalam hal ukuran layar keseluruhan atau relatif terhadap kontrol lain di layar saat ini.
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. Saat Anda mulai menggunakan formula untuk mencapai tata letak dinamis, Anda sebaiknya menghindari menggeser kontrol.
Dalam kasus yang paling sederhana, satu kontrol mengisi seluruh layar. Untuk membuat efek ini, atur properti kontrol ke nilai berikut:
| Properti | Nilai |
|---|---|
| X | 0 |
| Y | 0 |
| Lebar | Parent.Width |
| Tinggi | Parent.Height |
Rumus ini menggunakan operator Parent . Untuk kontrol apa pun yang ditempatkan langsung di layar, Objek 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 | Y | 0 |
| Atas | Lebar | Parent.Width |
| Atas | Tinggi | Parent.Height / 2 |
| Lebih rendah | X | 0 |
| Lebih rendah | Y | 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 | Y | 0 |
| Atas | Lebar | Parent.Width |
| Atas | Tinggi | Parent.Height / 3 |
| Lebih rendah | X | 0 |
| Lebih rendah | Y | 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 elemen induk, dengan margin sebesar N | X | N |
|
| Lebar | Parent.Width - (N * 2) |
||
| C mengisi tinggi induk, dengan margin N | Y | N |
|
| Tinggi | Parent.Height - (N * 2) |
||
| C selaras dengan tepi kanan elemen induk, dengan margin N | X | Parent.Width - (C.Width + N) |
|
| C sejajar dengan tepi bawah induk, dengan margin N | Y | Parent.Height - (C.Height + N) |
|
| C dipusatkan secara horizontal pada induk | X | (Parent.Width - C.Width) / 2 |
|
| C dipusatkan secara vertikal pada induk | Y | (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 | Y | 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 | Y | 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 | Y | 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 | Y | 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 lebih banyak kontrol, akan menjadi lebih nyaman (atau bahkan perlu) untuk memposisikan kontrol relatif terhadap kontrol induk, daripada relatif terhadap layar atau kontrol sejenis. 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 Tata Letak wadah 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 | Header | Menu | Tutup | Judul |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Y | 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 kontainer Tata letak otomatis untuk secara otomatis mengatur tata letak komponen anak. 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: Pengaturan 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-nilai properti berikut:
- 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 dari DesignHeight (1136), sehingga formula dievaluasi ke 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 | Y | 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. Properti Ukuran layar 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) |
|---|---|---|
| UkuranLayar.Kecil | 1 | Nomor Telepon |
| ScreenSize.Medium | 2 | Tablet, yang dipegang secara vertikal |
| UkuranLayar.Besar | 3 | Tablet, yang dipegang secara horizontal |
| ScreenSize.ExtraLarge | 4 | Komputer meja |
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 properti Visible dari kontrol pada rumus ini:
Parent.Size >= ScreenSize.Medium
Rumus ini akan bernilai benar ketika ukurannya sedang atau lebih besar dan salah jika tidak.
Jika Anda ingin kontrol menempati sebagian lebar layar yang berbeda berdasarkan ukuran layar, atur properti Width kontrol ke 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
Ukuran properti layar dihitung dengan membandingkan properti Lebar layar dengan nilai dalam Titik-UkuranPecah aplikasi tersebut. 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 pada properti aplikasi SizeBreakpoints. 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 properti X, Y, Lebar, dan Tinggi dari kontrol, Anda akan menimpa ekspresi atau rumus tersebut jika nanti Anda menyeret kontrol ke lokasi lain atau mengubah ukurannya dengan menyeret batasnya.