Tuval uygulamalarında uyumlu düzenler oluşturma

Power Apps'te bir tuval uygulaması oluşturmadan önce, uygulamanın bir telefon için mi, yoksa tablet için mi özelleştirileceğini belirtirsiniz. Bu seçenek, üzerinde uygulamanızı oluşturacağınız tuvalin boyut ve şeklini belirler.

Bu seçeneği belirledikten sonra Dosya > Uygulama ayarları > Ekran boyutu + yönü'nü seçerseniz birkaç seçenek daha kullanabilirsiniz. Dikey veya yatay yönü ve ekran boyutunu (yalnızca tablet) seçebilirsiniz. Ayrıca, en boy oranını kilitleyebilir veya kilidini açabilir, cihaz döndürmeyi destekleyebilir veya desteklemeyebilirsiniz.

Bu seçimler, ekran düzeni tasarlarken yaptığınız diğer seçeneklerin her birinde belirleyici olur. Uygulamanız farklı boyuttaki bir cihazda veya web üzerinde çalışıyorsa, tüm düzeniniz uygulamanın çalıştığı ekrana uyacak şekilde ölçeklenir. Örneğin, telefon için tasarlanmış bir uygulama büyük bir tarayıcı penceresinde çalışırsa, uygulama uyum sağlamak için ölçek değiştirir ve alanı için aşırı büyük görünür. Uygulama, daha fazla denetim veya daha fazla içerik göstererek ek piksellerden yararlanamaz.

Uyumlu bir düzen oluşturursanız, denetimler farklı cihazlara veya pencere boyutlarına yanıt vererek çeşitli deneyimlerin daha doğal his vermesini sağlar. Uyumlu düzen elde etmek için uygulamanızda bazı ayarlar yapar ve ifadeler yazarsınız.

Sığdırmak için ölçeklendir'i devre dışı bırakma

Her ekranı, düzenini uygulamanın çalıştığı gerçek alana uyarlayacak şekilde yapılandırabilirsiniz.

Uygulamanın Sığdırmak için ölçeklendir ayarını (varsayılan olarak etkindir) devre dışı bırakarak uyumluluğu etkinleştirirsiniz. Bu ayarı devre dışı bırakırsanız En boy oranını kilitle'yi de devre dışı bırakmış olursunuz çünkü artık belirli bir ekran şekli tasarlamayacaksınız. (Yine de uygulamanızın cihaz döndürmeyi destekleyip desteklemeyeceğini belirtebilirsiniz.)

Sığdırmak için ölçeklendir ayarını devre dışı bırakma

Uygulamanızı uyumlu hale getirmek için ek adımlar uygulamanız gerekir ancak bu değişiklik, uyumluluğu olası kılmanın ilk adımıdır.

Uygulama ve ekran boyutlarını anlama

Uygulamanızın düzenlerinin ekran boyutlarındaki değişikliklere uyum sağlaması için ekranın Width ve Height özelliklerini kullanan formüller yazacaksınız. Bu özellikleri göstermek için Power Apps Studio'da bir uygulama açın ve ekran seçin. Bu özelliklerin varsayılan formülleri sağ bölmedeki Gelişmiş sekmesinde görünür.

Genişlik = Max(App.Width, App.DesignWidth)

Yükseklik = Max(App.Height, App.DesignHeight)

Bu formüller uygulamanın Width, Height, DesignWidth ve DesignHeight özelliklerine başvurur. Uygulamanın Width ve Height özellikleri, uygulamanızın çalıştırıldığı cihaz veya tarayıcı penceresinin boyutlarına karşılık gelir. Kullanıcı tarayıcı penceresini yeniden boyutlandırırsa (veya Yönlendirmeyi kilitle'yi devre dışı bıraktıysanız, cihazı döndürdüğünde) bu özelliklerin değerleri dinamik olarak değiştirilir. Bu değerler değiştiğinde ekranın Width and Height özelliklerindeki formüller yeniden değerlendirilir.

Designwidth ve DesignHeight özellikleri, Uygulama ayarları'nın Ekran boyutu + yönü bölmesinde belirttiğiniz boyutlardan gelir. Örneğin dikey yönde telefon düzenini seçerseniz DesignWidth 640 ve DesignHeight 1136 olur.

DesignWidth ve DesignHeight, ekranın Width ve Height özelliklerinin formüllerinde kullanıldığı için, bunları uygulamayı tasarlayacağınız en küçük boyutlar olarak düşünebilirsiniz. Uygulamanızda kullanılabilen gerçek alan bu en küçük boyutlardan da küçükse, ekranın Width ve Height özelliklerinin formülleri, değerlerinin en küçük boyutlardan daha küçük olmamasını sağlar. Bu durumda, kullanıcının tüm ekran içeriğini görüntülemek için ekranı kaydırması gerekir.

Uygulamanızın DesignWidth ve DesignHeight özelliklerini ayarladıktan sonra her ekranın Width ve Height özellikleri için varsayılan formülleri değiştirmeniz gerekmez (çoğu durumda). Bu konunun ilerideki kısımlarında bu formülleri özelleştirmek isteyebileceğiniz bazı durumlar ele alınmaktadır.

Dinamik düzen için formülleri kullanma

Uyumlu bir tasarım oluşturmak için, her denetimi, mutlak (sabit) koordinat değerleri yerine formüller kullanarak bulup yeniden boyutlandırın. Bu formüller her denetimin konumunu ve boyutunu genel ekran boyutu bakımından veya ekrandaki diğer denetimlere göre ifade eder.

Önemli

Bir denetimin X, Y, Width ve Height özellikleri için formüller yazdıktan sonra tuval düzenleyicide denetimi sürüklerseniz formülleriniz üzerine sabit değerler yazılır. Dinamik düzen elde etmek için formülleri kullanmayı başlarsanız denetimleri sürüklememelisiniz.

En basit örnekte, bir denetim tüm ekranı dolduruyor. Bu efekti oluşturmak için denetimin özelliklerini bu değerlere ayarlayın:

Özellik Değer
X 0
Y 0
Genişlik Parent.Width
Yükseklik Parent.Height

Bu formüller Üst işleci kullanır. Ekrana doğrudan yerleştirilen bir denetim için Üst, ekrana karşılık gelir. Bu özellik değerleriyle denetim ekranın sol üst köşesinde görünür (0, 0) ve Width ve Height değerleri ekranınkiyle aynı olur.

Bu konunun ilerideki kısımlarında, bu ilkeleri (ve Üst işleci) galeriler, grup denetimleri ve bileşenler gibi diğer kapsayıcıların içinde denetimleri konumlandırmak için uygulayacaksınız.

Alternatif olarak, denetim yalnızca ekranın üst yarısını doldurabilir. Bu efekti oluşturmak için Height özelliğini Parent. Height /2 değerine ayarlayın ve diğer formülleri değiştirmeyin.

İkinci bir denetimin aynı ekranın alt yarısını doldurmasını istiyorsanız, formüllerini oluşturmak için en az iki farklı yaklaşım kullanabilirsiniz. Kolaylık olması için şu yaklaşımı kullanabilirsiniz:

Denetim Özellik Formül
Üst X 0
Üst Y 0
Üst Genişlik Parent.Width
Üst Yükseklik Parent.Height / 2
Alt X 0
Alt Y Parent.Height / 2
Alt Genişlik Parent.Width
Alt Yükseklik Parent.Height / 2

Üst ve Alt denetim

Bu yapılandırma istediğiniz efekti verir ancak denetimlerin göreli boyutlarıyla ilgili fikrinizi değiştirdiğiniz zaman her bir formülü düzenlemeniz gerekir. Örneğin, üst kısım denetiminin ekranda yalnızca yukarıdan üçte birlik bölümü ve alt kısım denetiminin aşağıdan üçte ikilik bölümü doldurmasına karar verebilirsiniz.

Bu efekti oluşturmak için Üst denetiminin Height özelliğini, Alt denetiminin de Y ve Height özelliklerini güncelleştirmeniz gerekir. Bunun yerine, aşağıdaki örnekte olduğu gibi, Alt denetiminin formüllerini Üst (ve kendisi) denetimine göre yazmayı düşünebilirsiniz:

Denetim Özellik Formül
Üst X 0
Üst Y 0
Üst Genişlik Parent.Width
Üst Yükseklik Parent.Height / 2
Alt X 0
Alt Y Upper.Y + Upper.Height
Alt Genişlik Parent.Width
Alt Yükseklik Parent.Height - Lower.Y

Üst ve Alt denetimlerini göreli boyutlandırma

Bu formüllerle, ekranın yüksekliğinin farklı bir bölümünü ifade etmek için, yalnızca Üst denetiminin Height özelliğini değiştirmeniz gerekir. Alt denetimi otomatik olarak değişikliğe göre taşınır ve yeniden boyutlandırılır.

C denetimi ve üst ya da eşdüzey D denetimi arasındaki genel düzen ilişkisini ifade etmek için bu formülleri kullanabilirsiniz.

C ve üstü arasındaki ilişki Özellik Formül Çizim
C denetimi, üst denetimin genişliğini dolduruyor ve N kenar boşluğu bırakılıyor X N Üst denetimin genişliğini C ile doldurma örneği
Genişlik Parent.Width - (N * 2)
C denetimi üst denetimin yüksekliğini dolduruyor ve N kenar boşluğu bırakılıyor Y N Üst denetimin yüksekliğini C ile doldurma örneği
Yükseklik Parent.Height - (N * 2)
C, üst denetimin sağ kenarıyla hizalanıyor ve N kenar boşluğu bırakılıyor X Parent.Width - (C.Width + N) Üst denetimin kenarıyla hizalanan C örneği
C, üst denetimin alt kenarıyla hizalanıyor ve N kenar boşluğu bırakılıyor Y Parent.Height - (C.Height + N) Üst denetimin kenarıyla hizalanan C örneği
C üst denetim üzerinde yatay olarak ortaya hizalanmış durumda X (Parent.Width - C.Width) / 2 Üst denetim üzerinde yatay olarak ortaya hizalanmış C örneği
C üst denetim üzerinde dikey olarak ortaya hizalanmış durumda Y (Parent.Height - C.Height) / 2 Üst denetim üzerinde dikey olarak ortaya hizalanmış C örneği
C ile D arasındaki ilişki Özellik Formül Çizim
C, D ile yatay olarak hizalanmış durumda ve D ile aynı genişlikte X D.X Desen örneği
Genişlik D.Width
C, D ile dikey olarak hizalanmış durumda ve D ile aynı yükseklikte Y D.Y Desen örneği
Yükseklik D.Height
C'nin sağ kenarı D'nin sağ kenarıyla hizalı X D.X + D.Width - C.Width Desen örneği
C'nin alt kenarı D'nin alt kenarıyla hizalı Y D.Y + D.Height - C.Height Desen örneği
C, D'ye göre yatay olarak ortaya hizalı X D.X + (D.Width - C.Width) / 2 Desen örneği
C, D'ye göre dikey olarak ortaya hizalı Y D.Y + (D.Height - C.Height) /2 Desen örneği
C D'nin sağında, arada N boşluğu var X D.X + D.Width + N Desen örneği
C D'nin altında, arada N boşluğu var Y D.Y + D.Height + N Desen örneği
C üst denetimin sağ kenarı ile D arasındaki boşluğu dolduruyor X D.X + D.Width Desen örneği
Genişlik Parent.Width - C.X
C üst denetimin alt kenarı ile D arasındaki boşluğu dolduruyor Y D.Y + D.Height Desen örneği
Yükseklik Parent.Height - D.Y

Hiyerarşik düzen

Siz daha fazla denetim içeren ekranlar oluşturdukça, denetimleri ekran veya eşdüzey bir denetime göre değil üst denetime göre konumlandırmak daha uygun (ve hatta gerekli) olacaktır. Denetimlerinizi hiyerarşik bir yapıda düzenleyerek, formüllerinizin yazımını ve bakımını kolaylaştırabilirsiniz.

Galeriler

Uygulamanızda bir galeri kullanırsanız, galeri şablonu içinde denetimleri düzenlemeniz gerekir. Bu denetimleri, galeri şablonuna başvuruda bulunan ve Üst işlecini kullanan formüller yazarak konumlandırabilirsiniz. Bir galeri şablonu içindeki denetimlerdeki formüllerde galerinin genel boyutuna başvuran Parent.Width ve Parent.Height özelliklerini değil, Parent.TemplateHeight ve Parent.TemplateWidth özelliklerini kullanın.

Şablon genişliğini ve yüksekliğini gösteren dikey galeri

Kapsayıcı denetimi

Deneysel bir özellik olan Kapsayıcı denetimini bir üst denetim olarak kullanabilirsiniz. Bu özelliği etkinleştirmek için Dosya > Uygulama ayarları > Gelişmiş ayarlar'ı seçin.

Ekranın üst kısmındaki başlık örneğini inceleyin. Bir başlık adı ve kullanıcılarınızın etkileşime geçebileceği çeşitli simgeler içeren bir başlığın kullanımı yaygındır. Bir Etiket denetimi ve iki Simge denetimi içeren Kapsayıcı denetimini kullanarak böyle bir başlık oluşturabilirsiniz:

Grup kullanılan bir başlık örneği

Bu denetimlerin özelliklerini şu değerlere ayarlayın:

Özellik Üstbilgi Menü Kapat Başlık
X 0 0 Parent.Width - Close.Width Menu.X + Menu.Width
Y 0 0 0 0
Genişlik Parent.Width Parent.Height Parent.Height Close.X - Title.X
Yükseklik 64 Parent.Height Parent.Height Parent.Height

Başlık denetimi için Parent ekrana başvurur. Diğerleri için, Parent Başlık denetimine başvurur.

Bu formülleri yazdığınız zaman, Başlık denetiminin boyutunu ve konumunu özelliklerinin formüllerinde değişiklik yaparak ayarlayabilirsiniz. Alt denetimlerin boyutları ve konumları otomatik olarak uygun şekilde ayarlanır.

Kapsayıcı denetimlerini otomatik düzenleme

Alt bileşenleri otomatik olarak düzenlemek için deneysel bir özellik olan kapsayıcısı denetimlerini Otomatik Düzenle'yi kullanabilirsiniz. Bu kapsayıcılar, alt bileşenlerin konumunu belirler, böylece kapsayıcının içindeki bir bileşen için X, Y'yi hiçbir zaman ayarlamanız gerekmez. Ayrıca, ayarlara bağlı olarak kullanılabilir alanı alt bileşenlerine dağıtır ve hem dikey hem yatay hizalamada alt bileşenlerin hizalamasını belirler. Daha fazla bilgi: Kapsayıcı denetimlerini otomatik düzenleme

Bileşenler

Bileşenler adlı başka bir deneysel özellik kullanırsanız, yapı taşları oluşturabilir ve bunları uygulamanızın tamamında yeniden kullanabilirsiniz. Kapsayıcı denetiminde olduğu gibi, bileşene yerleştirdiğiniz denetimlerde, bileşenin boyutuna başvuran Parent.Width ve Parent.Height'teki konum ve boyut formülleri temel alınır. Daha fazla bilgi: Bileşen oluşturma.

Düzeni cihaz boyut ve yönüne uyarlama

Şu ana kadar, kullanılabilir alana yanıt olarak her bir denetimin boyutunu değiştirmek ve aynı zamanda denetimlerin birbirleriyle hizalarını korumak için formüllerin nasıl kullanılacağını öğrendiniz. Ancak, farklı cihaz boyut ve yönlerle yanıt olarak daha önemli düzen değişiklikleri yapmanız gerekebilir. Örneğin, bir cihaz dikey yönden yatay yöne döndürüldüğünde dikey düzenden yatay düzene geçiş yapmak isteyebilirsiniz. Daha büyük bir cihazda daha fazla içerik sunabilir veya daha göz alıcı bir düzen sağlamak için yeniden düzenleyebilirsiniz. Daha küçük bir cihazda içeriği birden çok ekrana bölmeniz gerekebilir.

Cihaz yönü

Daha önce açıklandığı gibi, ekranın Width ve Height özelliklerinin varsayılan formülleri, kullanıcı cihazı döndürdüğü zaman iyi bir deneyim sunmayabilir. Örneğin, dikey yönde bir telefon için tasarlanan uygulamanın DesignWidth değeri 640 ve DesignHeight değeri 1136'dır. Yatay yönlü telefonda aynı uygulamanın özellik değerleri şöyle olur:

  • Ekranın Width özelliği Max(App.Width, App.DesignWidth) olarak ayarlanır. Uygulamanın Width değeri (1136), DesignWidth değerinden (640) daha büyük olduğu için formül 1136 değerini kullanır.
  • Ekranın Height özelliği Max(App.Height, App.DesignHeight) olarak ayarlanır. Uygulamanın Height değeri (640), DesignHeigth değerinden (1136) daha küçük olduğu için formül 1136 değerini kullanır.

Ekran Height değeri 1136 ve cihaz yüksekliği (bu yönde) 640 iken kullanıcının tüm içeriği görmek için ekranı dikey olarak kaydırması gerekir ve bu, istediğiniz deneyim olmayabilir.

Ekranın Width ve Height özelliklerini cihaz yönüne uyarlamak için şu formülleri kullanabilirsiniz:

Genişlik = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Yükseklik = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Bu formüllerin uygulamadaki DesignWidth ve DesignHeight değerlerinin yerlerini değiştirmesi, cihaz genişliğinin yüksekliğinden az (dikey yön) veya çok (yatay yön) olmasına bağlıdır.

Ekranın Width ve Height formüllerini ayarladıktan sonra, kullanılabilir alanı daha iyi değerlendirmek için ekranınızdaki denetimleri yeniden düzenlemek isteyebilirsiniz. Örneğin, iki denetimin her biri ekranın yarısını kaplıyorsa, dikey yönde bunları dikey olarak yığabilir, yatay yönde yan yana yerleştirebilirsiniz.

Ekranın dikey mi yatay mı yönlendirileceğini belirlemek için Yönlendirme özelliğini kullanabilirsiniz.

Not

Yatay yönlendirmede Üst ve Alt denetimler sol ve sağ denetimler olarak görünür.

Denetim Özellik Formül
Üst X 0
Üst Y 0
Üst Genişlik If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)
Üst Yükseklik If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)
Alt X If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)
Alt Y If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)
Alt Genişlik Parent.Width - Lower.X
Alt Yükseklik Parent.Height - Lower.Y

Dikey yönlendirmeyi uyarlamak için ifadeler

Yatay yönlendirmeyi uyarlamak için ifadeler

Ekran boyutları ve kesme noktaları

Düzeninizi cihazın boyutuna göre ayarlayabilirsiniz. Ekranın Boyut özelliği, geçerli cihazın boyutunu sınıflandırır. Boyut pozitif bir tamsayıdır; ScreenSize türü, okunabilirlik konusunda yardımcı olmak için adlandırılmış sabitler sağlar. Bu tabloda sabitler verilmektedir:

Sabit Value Tipik cihaz türü (varsayılan uygulama ayarları kullanılarak)
ScreenSize.Small 1 Telefon
ScreenSize.Medium 2 Tablet, dikey tutulmuş
ScreenSize.Large 3 Tablet, yatay tutulmuş
ScreenSize.ExtraLarge 4 Masaüstü bilgisayar

Uygulamanızın düzeni hakkında karar vermek için bu boyutları kullanın. Örneğin bir denetimin telefon boyutundaki cihazda gizlenmesini ama diğerlerinde görünmesini istiyorsanız, denetimin Görünür özelliğini bu formüle ayarlayabilirsiniz:

Parent.Size >= ScreenSize.Medium

Bu formül büyük veya orta boyutta doğru, küçük boyutta yanlış değerini kullanır.

Bir denetimin ekran boyutuna göre ekran genişliğinin farklı bir bölümünü kaplamasını istiyorsanız denetimin Width özelliğini bu formüle ayarlayın:

Parent.Width *  
    Switch(Parent.Size,  
        ScreenSize.Small, 0.5,  
        ScreenSize.Medium, 0.3,  
        0.25)

Bu formül, denetimin genişliğini küçük bir ekranda ekran genişliğinin yarısına, orta büyüklükteki bir ekranda ekran genişliğinin onda üçüne, ve tüm diğer ekranlarda ekran genişliğinin çeyreğine ayarlar.

Özel kesme noktaları

Ekranın Boyut özelliği, ekranın Width özelliğini uygulamanın SizeBreakpoints özelliğindeki değerlerle karşılaştırarak hesaplanır. Bu özellik, adlandırılmış ekran boyutlarını ayıran genişlik kesme noktalarını belirten sayıların bulunduğu tek sütunlu bir tablodur:

Tablet veya web için oluşturulan bir uygulamada, uygulamanın SizeBreakpoints özelliğindeki varsayılan değer [600, 900, 1200]'dir. Telefonlar için oluşturulan bir uygulamada değer [1200, 1800, 2400]'dür. (Telefona yönelik uygulamalar diğer uygulamalarda kullanılan koordinatların iki katını alan koordinatları kullandığı için, değerleri iki katına çıkar.)

App.SizeBreakpoints özelliğinin varsayılan değerleri

Uygulamanın SizeBreakpoints özelliğindeki değerleri değiştirerek uygulamanızın kesme noktalarını özelleştirebilirsiniz. Ağaç görünümünde Uygulama öğesini, ardından özellik listesinde SizeBreakpoints öğesini seçin ve formül çubuğundaki değerleri düzenleyin. Uygulamanız için gerektiği kadar kesme noktası oluşturabilirsiniz ancak yalnızca 1 ile 4 arasındaki boyutlar adlandırılan ekran boyutlarına karşılık gelir. Formüllerde ExtraLarge'dan büyük boyutlara sayısal değerleriyle (5, 6 vb.) başvurabilirsiniz.

Daha az kesme noktası da belirtebilirsiniz. Örneğin, uygulamanız için yalnızca üç boyut (iki kesme noktası) gerekebilir ve bu durumda olası ekran boyutları Küçük, Orta ve Büyük olur.

Bilinen sınırlamalar

Yazma tuvali, oluşturulan boyutlandırma formüllerine yanıt vermez. Uyumlu davranış sınamak için, uygulamanızı kaydedip yayımlayın ve cihazlarda veya çeşitli boyut ve yönlerdeki tarayıcı pencerelerinde açın.

Bir denetimin X, Y, Width ve Height özelliklerinde ifadeler veya formüller yazarsanız, denetimi daha sonra farklı bir konuma sürüklediğiniz ya da kenarlığını sürükleyerek yeniden boyutlandırdığınız zaman bu ifadelerin veya formüllerin üzerine yazarsınız.