Tuval uygulamalarında yanıt veren 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 yaptıktan sonra, Ayarlar > Görünüm'ü seçerseniz daha az seçim yapabilirsiniz. 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.)

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, Ayarlar'ın Görüntüleme bölmesinde belirttiğiniz boyutlara göre belirlenir. Ö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
Aşağı	X	0
Aşağı	Y	Parent.Height / 2
Aşağı	Genişlik	Parent.Width
Aşağı	Yükseklik	Parent.Height / 2

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 Upper denetiminin Height özelliğini, Lower denetiminin de Y ve Height özelliklerini güncelleştirmeniz gerekir. Bunun yerine, aşağıdaki örnekte olduğu gibi, Lower denetiminin formüllerini Upper (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 / 3
Alt	X	0
Alt	Y	Upper.Y + Upper.Height
Alt	Genişlik	Parent.Width
Aşağı	Yükseklik	Parent.Height - Lower.Y

Bu formüllerle, ekranın yüksekliğinin farklı bir bölümünü ifade etmek için, yalnızca Upper denetiminin Height özelliğini değiştirmeniz gerekir. Lower 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
	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
	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)
C, üst denetimin alt kenarıyla hizalanıyor ve N kenar boşluğu bırakılıyor	Y	Parent.Height - (C.Height + N)
C üst denetim üzerinde yatay olarak ortaya hizalanmış durumda	X	(Parent.Width - C.Width) / 2
C üst denetim üzerinde dikey olarak ortaya hizalanmış durumda	Y	(Parent.Height - C.Height) / 2

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
	Genişlik	D.Width
C, D ile dikey olarak hizalanmış durumda ve D ile aynı yükseklikte	Y	D.Y
	Yükseklik	D.Height
C'nin sağ kenarı D'nin sağ kenarıyla hizalı	X	D.X + D.Width - C.Width
C'nin alt kenarı D'nin alt kenarıyla hizalı	Y	D.Y + D.Height - C.Height
C, D'ye göre yatay olarak ortaya hizalı	X	D.X + (D.Width - C.Width) / 2
C, D'ye göre dikey olarak ortaya hizalı	Y	D.Y + (D.Height - C.Height) /2
C D'nin sağında, arada N boşluğu var	X	D.X + D.Width + N
C D'nin altında, arada N boşluğu var	Y	D.Y + D.Height + N
C üst denetimin sağ kenarı ile D arasındaki boşluğu dolduruyor	X	D.X + D.Width
	Genişlik	Parent.Width - C.X
C üst denetimin alt kenarı ile D arasındaki boşluğu dolduruyor	Y	D.Y + D.Height
	Yükseklik	Parent.Height - C.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.

Kapsayıcı denetimi

Ana denetim olarak Düzen kapsayıcısı denetimini kullanabilirsiniz.

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:

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

Header 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, Header denetiminin boyutunu ve konumunu özelliklerinin formüllerinde değişiklik yaparak ayarlayabilirsiniz. Alt denetimlerin boyutları ve konumları otomatik olarak uygun şekilde ayarlanır.

Otomatik düzen kapsayıcı denetimleri

Alt bileşenleri otomatik olarak yerleştirebilmek için Otomatik düzen kapsayıcı denetimleri özelliğini 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: Otomatik düzen kapsayıcı denetimleri

Bileşenler

Bileşenler adlı başka bir özellik kullanırsanız, yapı taşları oluşturabilir ve bunları tüm uygulamanızda 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 Orientation özelliğini kullanabilirsiniz.

Not

Yatay yönlendirmede Upper ve Lower 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
Aşağı	Yükseklik	Parent.Height - Lower.Y

Ekran boyutları ve kesme noktaları

Düzeninizi cihazın boyutuna göre ayarlayabilirsiniz. Ekranın Size ö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 Visible ö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 Size ö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.)

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.

Not

Belge dili tercihlerinizi bizimle paylaşabilir misiniz? Kısa bir ankete katılın. (lütfen bu anketin İngilizce olduğunu unutmayın)

Anket yaklaşık yedi dakika sürecektir. Kişisel veri toplanmaz (gizlilik bildirimi).