Membuat tata letak responsif di aplikasi kanvas
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 menentukan pilihan tersebut, Anda dapat membuat beberapa pilihan lagi jika 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 keresponsifan dengan menonaktifkan pengaturan Skalakan agar sesuai aplikasi, yang diaktifkan 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 aplikasi dan layar
Agar tata letak aplikasi Anda merespons perubahan pada dimensi layar, Anda akan menulis formula yang menggunakan properti Lebar dan Tinggi pada layar. Untuk menampilkan properti ini, buka aplikasi di Power Apps Studio, lalu pilih layar. Formula default untuk properti ini muncul di tab Lanjutan pada panel kanan.
Lebar = Max(App.Width, App.DesignWidth)
Tinggi = Max(App.Height, App.DesignHeight)
Formula ini merujuk pada properti Lebar, Tinggi, DesignWidth dan DesignHeight aplikasi. Properti Lebar dan Tinggi aplikasi terkait dengan dimensi perangkat atau jendela browser di mana aplikasi Anda berjalan. Jika pengguna mengubah ukuran jendela browser (atau memutar perangkat jika Anda menonaktifkan Kunci orientasi), nilai properti ini akan berubah secara dinamis. Formula di properti Lebar dan Tinggi layar dievaluasi ulang saat nilai ini berubah.
Properti DesignWidth dan DesignHeight berasal dari dimensi yang Anda tentukan di panel Tampilan dari Pengaturan. Misalnya, jika Anda memilih tata letak ponsel dalam orientasi potret, DesignWidth adalah 640 dan DesignHeight adalah 1136.
Saat digunakan dalam formula untuk properti Lebar dan Tinggi layar, Anda dapat mempertimbangkan DesignWidth dan DesignHeight sebagai dimensi minimum dari aplikasi yang akan Anda desain. Jika area aktual yang tersedia untuk aplikasi Anda bahkan lebih kecil dari dimensi minimum ini, formula untuk properti Lebar dan Tinggi layar, pastikan 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 tidak akan (dalam kebanyakan kasus) perlu mengubah formula default untuk properti Lebar dan Tinggi 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 formula untuk properti X, Y, Lebar dan Tinggi kontrol, formula Anda akan ditimpa dengan nilai konstan jika Anda kemudian menarik kontrol 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 |
| Y | 0 |
| Lebar | Parent.Width |
| Tinggi | Parent.Height |
Formula ini menggunakan operator Induk. Untuk kontrol yang ditempatkan langsung pada layar, Induk merujuk ke layar. Dengan nilai properti ini, kontrol akan muncul di sudut kiri atas layar (0, 0) dan memiliki Lebar dan Tinggi yang sama dengan layar.
Nanti di topik ini, Anda akan menerapkan 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 Tinggi ke Parent.Height /2, dan biarkan formula lainnya tidak diubah.
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 |
|---|---|---|
| Lebih tinggi | X | 0 |
| Lebih tinggi | Y | 0 |
| Lebih tinggi | Lebar | Parent.Width |
| Lebih tinggi | 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 membuat efek tersebut, Anda harus memperbarui properti Tinggi pada kontrol Atas dan properti Y serta Tinggi pada kontrol Bawah. Tetapi, pertimbangkan untuk menulis formula untuk kontrol Bawah dalam hal kontrol Atas (dan itu sendiri), seperti dalam contoh ini:
| Kontrol | Properti | Rumus |
|---|---|---|
| Lebih tinggi | X | 0 |
| Lebih tinggi | Y | 0 |
| Lebih tinggi | Lebar | Parent.Width |
| Lebih tinggi | Tinggi | Parent.Height / 3 |
| Lower | X | 0 |
| Lower | Y | Upper.Y + Upper.Height |
| Lower | Lebar | Parent.Width |
| Lebih rendah | Tinggi | Parent.Height - Lower.Y |
Dengan menggunakan formula ini, Anda hanya perlu mengubah properti Tinggi pada kontrol Atas untuk mengekspresikan bagian yang berbeda dari tinggi layar. Kontrol Bawah secara otomatis bergerak dan berubah ukuran untuk memperhitungkan perubahan.
Anda dapat menggunakan pola formula 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 | Y | N |
 |
| Tinggi | Parent.Height - (N * 2) |
||
| C selaras dengan tepi kanan dari induk, dengan margin N | X | Parent.Width - (C.Width + N) |
 |
| C selaras dengan tepi bawah dari induk, dengan margin N | Y | Parent.Height - (C.Height + N) |
 |
| C terpusat secara horizontal pada induk | X | (Parent.Width - C.Width) / 2 |
 |
| C terpusat secara vertikal pada induk | Y | (Parent.Height - C.Height) / 2 |
 |
| Hubungan antara C dan D | Properti | Rumus | Ilustrasi |
|---|---|---|---|
| C secara horizontal selaras dengan D dan dengan lebar yang sama dengan D | X | D.X |
 |
| Lebar | D.Width |
||
| C secara vertikal selaras dengan D dan dengan tinggi yang sama dengan D | Y | D.Y |
 |
| Tinggi | D.Height |
||
| Tepi kanan C selaras dengan tepi kanan D | X | D.X + D.Width - C.Width |
 |
| Tepi bawah C selaras dengan tepi bawah D | Y | D.Y + D.Height - C.Height |
 |
| C terpusat secara horizontal relatif terhadap D | X | D.X + (D.Width - C.Width) / 2 |
 |
| C terpusat secara vertikal relatif terhadap D | Y | D.Y + (D.Height - C.Height) /2 |
 |
| C diposisikan di sebelah kanan D dengan jarak N | X | D.X + D.Width + N |
 |
| C diposisikan di bawah D dengan jarak N | Y | D.Y + D.Height + N |
 |
| C mengisi jarak antara D dan tepi kanan dari induk | X | D.X + D.Width |
 |
| Lebar | Parent.Width - C.X |
||
| C mengisi jarak antara D dan tepi bawah dari 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 formula yang menggunakan operator Induk, yang akan merujuk ke templat galeri. Dalam formula pada kontrol dalam template galeri, gunakan properti Parent.TemplateHeight dan Parent.TemplateWidth; jangan gunakan Parent.Width dan Parent.Height, yang merujuk pada ukuran galeri secara keseluruhan.
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 tersebut menggunakan kontrol Wadah, yang berisi kontrol Label dan dua kontrol Ikon:
Atur properti untuk kontrol ini ke nilai ini:
| Properti | Kop | Menu | Tutup | Jabatan |
|---|---|---|---|---|
| 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 merujuk ke layar. Untuk lainnya, Parent merujuk ke kontrol Header.
Setelah menulis formula ini, Anda dapat menyesuaikan ukuran atau posisi kontrol Header dengan mengubah formula untuk properti. 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 menata 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: Kontrol kontainer tata letak otomatis
Komponen
Jika menggunakan fitur lain, bernama Komponen, Anda dapat membuat blok penyusun dan menggunakannya kembali di seluruh aplikasi. Seperti dengan kontrol Wadah, kontrol yang Anda tempatkan dalam komponen harus berdasarkan pada posisi dan formula ukuran pada Parent.Width dan Parent.Height, yang merujuk ke ukuran komponen. Informasi lainnya: Membuat 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
Formula default untuk properti Lebar dan Tinggi layar, seperti yang dijelaskan sebelumnya di topik ini, tidak akan selalu memberikan pengalaman yang baik jika 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 dari DesignWidth (640), sehingga formula dievaluasi ke 1136. - Properti Tinggi 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 merupakan pengalaman yang Anda inginkan.
Untuk menyesuaikan properti Lebar dan Tinggi layar dengan orientasi perangkat, Anda dapat menggunakan formula 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))
Formula ini menukar nilai DesignWidth dan DesignHeight aplikasi, berdasarkan apakah lebar perangkat kurang dari tingginya (orientasi potret) atau lebih besar dari tingginya (orientasi lanskap).
Setelah menyesuaikan formula Lebar dan Tinggi, Anda juga dapat mengatur ulang kontrol dalam layar agar menggunakan 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
Di orientasi lanskap, kontrol Atas dan Bawah muncul sebagai kontrol kiri dan kanan.
| Kontrol | Properti | Rumus |
|---|---|---|
| Lebih tinggi | X | 0 |
| Lebih tinggi | Y | 0 |
| Lebih tinggi | Lebar | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| Lebih tinggi | Tinggi | 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 | 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) |
|---|---|---|
| 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 di perangkat berukuran telepon namun terlihat di perangkat lain, Anda dapat mengatur properti Terlihat kontrol ke formula ini:
Parent.Size >= ScreenSize.Medium
Formula ini dievaluasi ke true saat ukuran sedang atau lebih besar dan false untuk lainnya.
Jika Anda ingin kontrol untuk menempati bagian yang berbeda dari lebar layar berdasarkan ukuran layar, atur properti Lebar kontrol ke formula 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
Properti Ukuran layar dihitung dengan membandingkan properti Lebar layar terhadap nilai di properti SizeBreakpoints aplikasi. Properti ini adalah tabel nomor satu kolom yang menunjukkan titik henti lebar yang memisahkan ukuran layar yang disebutkan:
Pada aplikasi yang dibuat untuk tablet atau web, nilai default di properti SizeBreakpoints aplikasi adalah [600, 900, 1200]. Pada aplikasi yang dibuat untuk ponsel, nilainya [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 di properti SizeBreakpoints aplikasi. Pilih Aplikasi di tampilan hierarki, pilih SizeBreakpoints di daftar properti, lalu Edit nilai di bilah formula. 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 formula pada properti X, Y, Lebar dan Tinggi kontrol, Anda akan menimpa ekspresi atau formula tersebut jika Anda kemudian menyeret kontrol ke lokasi lain atau mengubah ukuran kontrol dengan menyeret tepinya.
Catatan
Apa bahasa dokumentasi yang Anda inginkan? Lakukan survei singkat. (perlu diketahui bahwa survei ini dalam bahasa Inggris)
Survei akan berlangsung kurang lebih selama tujuh menit. Tidak ada data pribadi yang dikumpulkan (pernyataan privasi).
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk