ConstraintLayout ile duyarlı kullanıcı arayüzü oluşturma Android Jetpack'in bir parçasıdır.
ConstraintLayout
düz görünüm hiyerarşisiyle büyük, karmaşık düzenler oluşturmanıza olanak tanır.
görünüm grupları oluşturabilirsiniz. Benzer
RelativeLayout
Çünkü tüm görüşler, iki taraflı görüşler arasındaki ilişkilere göre
üst düzeni içerir, ancak RelativeLayout
ile karşılaştırıldığında daha esnektir.
ve Android Studio'nun Düzen Düzenleyicisi
ile daha kolay kullanılır.
ConstraintLayout
ürününün tüm avantajlarına doğrudan
Layout API ve Layout Editor gibi araçları kullanarak Düzen Düzenleyici'nin
geliştirmeyi öğreneceksiniz. Düzeninizi şununla oluşturabilirsiniz:
ConstraintLayout
öğesini düzenlemek yerine sürükleyerek tamamen
XML.
Bu sayfada, ConstraintLayout
ile düzenin nasıl oluşturulacağı gösterilmektedir
Android Studio 3.0 veya sonraki sürümler. Düzen Düzenleyici hakkında daha fazla bilgi için
Düzen Düzenleyici ile kullanıcı arayüzü oluşturma başlıklı makaleyi inceleyin.
ConstraintLayout
ile oluşturabileceğiniz çeşitli düzenleri görmek için:
bkz.
GitHub'daki Kısıtlama Düzeni Örnekleri projesi.
Kısıtlamalara genel bakış
ConstraintLayout
için bir görünümün konumunu tanımlamak için
Görünüm için en az bir yatay ve bir dikey sınırlama. Her kısıtlama
başka bir görünüm, üst düzen veya görünümle olan bağlantıyı ya da hizalamayı temsil eder
izin vermez. Her sınırlama, görünümün görünüm için
kullanabilirsiniz. Her görünümde
ancak genellikle daha fazlası gerekir.
Bir görünümü Düzen Düzenleyici'ye bıraktığınızda, bıraktığınız yerde kalır. hiçbir kısıtlamanın olmaması gerekir. Bu özelliğin amacı yalnızca düzenlemeyi kolaylaştırmaktır. Bir görünümde kısıtlarsanız düzeninizi [0,0] (sol üst köşe).
Şekil 1'de düzen, düzenleyicide iyi görünüyor ancak dikey öğe yok görüntüleme kısıtlaması uygulayabilirsiniz. Bu düzen bir cihaz üzerinde çizim yaptığında C'yi yatay olarak görüntüle A görünümünün sol ve sağ kenarlarıyla hizalanır, ancak ekranın en üstünde görünür olmadığından emin olun.
![](https://developer.android.com/static/training/constraint-layout/images/constraint-fail_2x.png?authuser=9&hl=tr)
Şekil 1. Düzenleyici, C görünümünü A'nın altında gösteriyor ancak dikey kısıtlaması yok.
![](https://developer.android.com/static/training/constraint-layout/images/constraint-fail-fixed_2x.png?authuser=9&hl=tr)
Şekil 2. C görünümü artık dikey olarak kısıtlandı A görünümünün altında görünür.
Eksik bir kısıtlama, derleme hatasına neden olmasa da Düzen
Düzenleyici, eksik kısıtlamaları araç çubuğunda hata olarak gösteriyor.
diğer uyarıları görmek için Uyarıları ve Hataları Göster'i tıklayın.
.
Kısıtlamaları kaçırmamanıza yardımcı olmak için Düzen Düzenleyici otomatik olarak
sizin için kısıtlayıcı durumlar
Otomatik bağlanma ve çıkarım kısıtlamaları
özellikleri.
Projenize ConstraintLayout ekleme
Projenizde ConstraintLayout
kullanmak için aşağıdaki adımları uygulayın:
maven.google.com
deposunu bildirdiğinizden emin olunsettings.gradle
dosyanızda:Eski
dependencyResolutionManagement { ... repositories { google() } )
Kotlin
dependencyResolutionManagement { ... repositories { google() } }
- Kitaplığı modül düzeyinde bağımlılık olarak ekleyin
build.gradle
dosyası olmalıdır. En son sürümü, örnekte gösterilenden farklı olabilir.Modern
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14") }
- Araç çubuğunda veya senkronizasyon bildiriminde Projeyi Gradle ile Senkronize Et'i tıklayın. Dosyalar.
Artık ConstraintLayout
ile düzeninizi oluşturmaya hazırsınız.
Düzen dönüştürme
![](https://developer.android.com/static/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png?authuser=9&hl=tr)
Şekil 3. Bir düzenin dönüştürüleceği menü
ConstraintLayout
Mevcut bir düzeni kısıtlama düzenine dönüştürmek için şu adımları uygulayın:
- Düzeninizi Android Studio'da açın ve aşağıdaki sayfada Tasarım sekmesini tıklayın: düğmesini tıklayın.
- Bileşen Ağacı penceresinde ilgili düzeni sağ tıklayın ve LineLayout'u ConstraintLayout'a dönüştürün.
Yeni düzen oluştur
Yeni bir kısıtlama düzeni dosyası başlatmak için aşağıdaki adımları uygulayın:
- Project (Proje) penceresinde modül klasörünü tıklayıp seçin Dosya > Yeni > XML > Düzen XML.
- Düzen dosyası için bir ad girin ve "androidx.Restricttlayout.widget.ConstraintLayout" Root Etiketle.
- Son'u tıklayın.
Kısıtlama ekleme veya kaldırma
Kısıtlama eklemek için aşağıdakileri yapın:
1. video. Görünümün sol tarafı sol tarafa kısıtlıdır tarafından yürütülür.
Palet penceresinden bir görünümü düzenleyiciye sürükleyin.
ConstraintLayout
içine bir görünüm eklediğinizde her köşesinde kare yeniden boyutlandırma tutamaçları bulunan sınırlayıcı kutu ve dairesel her iki taraftaki kısıtlama tutamaçları yer alır.- Görünümü tıklayarak seçin.
- Aşağıdakilerden birini yapın:
- Sınırlama tutamaçlarından birini tıklayın ve onu kullanılabilir bir sabitleme noktasına sürükleyin. Bu nokta, başka bir görünümün kenarı, düzenin kenarı veya bir aykırıdır. Kısıtlama tutamacını sürüklerken Düzen öğesinin Düzenleyici, olası bağlantı sabitlerini ve mavi yer paylaşımlarını gösterir.
Bağlantı oluşturun
Özellikler penceresinin Düzen bölümündeki düğmeleri kullanarak görebilirsiniz.
4.Şekil Düzen Özellikler penceresinin altındaki bölümden bağlantılar.
Kısıtlama oluşturulduğunda, düzenleyici, kısıtlamaya İki görünümü ayırmak için varsayılan kenar boşluğu.
Kısıtlamalar oluştururken aşağıdaki kuralları unutmayın:
- Her görünümde, biri yatay, diğeri yatay olmak üzere en az iki kısıtlama bulunmalıdır dikey.
- Yalnızca kısıtlama tutamacı ve bağlayıcı arasında kısıtlamalar oluşturabilirsiniz. bir nokta bulun. Dikey bir düzlem (sol ve sağ) bir görünüm yalnızca başka bir dikey düzlemle sınırlanabilir ve referans değerler yalnızca diğer temel değerlerle sınırlanabilir.
- Her kısıtlama tutamacı yalnızca bir kısıtlama için kullanılabilir. aynı sabitleme noktasına farklı görünümlerden birden çok kısıtlama oluşturabilirsiniz.
Bir kısıtlamayı, aşağıdakilerden birini yaparak silebilirsiniz:
- Bir kısıtlamayı tıklayarak seçin ve ardından Sil'i tıklayın.
Control tuşuna basın ve ardından macOS'te Command tuşunu basılı tutarak tıklayın) kısıtlama bağlayıcısı. Kısıtlama, tıklayabileceğinizi belirtmek için kırmızı renge döner Şekil 5'te gösterildiği gibi silin.
5. Şekil. Kırmızı bir kısıtlama, tıklayarak silebilirsiniz.
Özellikler penceresinin Düzen bölümünde Şekil 6'da gösterildiği gibi bir sınırlama çapasına sahiptir.
6. Şekil. Bir kısıtlamayı tıklayın sabit tıklayın.
2. video. Mevcut bir kısıtlamaya karşılık gelen bir kısıtlama ekleme.
Bir görünüme zıt kısıtlamalar eklerseniz kısıtlama çizgileri 2. videoda gösterildiği gibi rakip güçleri belirtmek için bir yay gibi sarmalanmış. İlgili içeriği oluşturmak için kullanılan efekti en çok, görüntüleme boyutu "sabit" olarak ayarlandığında görülür veya "içeriği sarmala" Bu durumda görünüm, kısıtlamaların arasında ortalanır. Google Ads'in görünümün kısıtları karşılayacak şekilde genişletilmesi, boyutu "kısıtlamalarla eşleştir" olarak değiştirin. Eğer geçerli boyutu korumak ancak görünümü ortalanmayacak şekilde taşımak istiyorsanız kısıt ağırlıklandırmasını ayarlayın.
Farklı düzen davranışı türlerine ulaşmak için kısıtlamalar kullanabilirsiniz. aşağıdaki bölümlerde açıklanmıştır.
Üst konum
Bir görünümün kenarını düzenin karşılık gelen kenarıyla sınırlandırın.
Şekil 7'de, görünümün sol tarafı, görünümün sol kenarına bağlanmıştır. üst düzeni kullanabilirsiniz. Kenar boşluğunu kullanarak kenardan uzaklığı tanımlayabilirsiniz.
![](https://developer.android.com/static/training/constraint-layout/images/parent-constraint_2x.png?authuser=9&hl=tr)
Şekil 7. Yatay sınırlama ebeveyndir.
Sipariş konumu
İki görünüm için dikey veya dikey olarak görünüm sırasını tanımlayın. yerleştireceğiz.
Şekil 8'de B, her zaman A'nın sağında olacak şekilde sınırlanmıştır ve C A altında sınırlandırılmıştır. Ancak, bu kısıtlamalar hizalamayı ima etmez; bu nedenle B hareket eder.
![](https://developer.android.com/static/training/constraint-layout/images/position-constraint_2x.png?authuser=9&hl=tr)
8. Şekil. Yatay ve dikey kısıtlayın.
Hizalama
Bir görünümün kenarını, başka bir görünümün aynı kenarına hizalayın.
Şekil 9'da, B'nin sol tarafı, A'nın sol kenarına hizalanmıştır. Şunu istiyorsanız: görüntü merkezlerini hizalamak için her iki tarafta bir sınırlama oluşturun.
Görünümü sınırlamadan içeri sürükleyerek hizalamayı uzaklaştırabilirsiniz. Örneğin, Şekil 10'da B'yi 24 dp ofset hizalamasıyla gösterilmektedir. Göreli konum: sınırlı görünümün kenar boşluğuyla tanımlanır.
Ayrıca, hizalamak istediğiniz tüm görünümleri seçip ardından
Hizala
hizalama türünü seçmek için araç çubuğunda görebilirsiniz.
![](https://developer.android.com/static/training/constraint-layout/images/alignment-constraint_2x.png?authuser=9&hl=tr)
9. Şekil. Yatay hizalama kısıtlayın.
![](https://developer.android.com/static/training/constraint-layout/images/alignment-constraint-offset_2x.png?authuser=9&hl=tr)
Şekil 10. Yatay ofset hizalama kısıtlaması vardır.
Temel hizalama
Bir görünümün metin referans çizgisini başka bir görünümün metin temel çizgisine hizalayın.
Şekil 11'de, B'nin ilk satırı A'daki metinle hizalanır.
Temel sınırlama oluşturmak için, ilgili metin görünümünü sağ tıklayın. kısıtlayın ve Referans Değeri Göster'i tıklayın. Ardından metni ve çizgiyi referans çizgisine sürükleyin ve çizgiyi başka bir taban çizgisine sürükleyin.
![](https://developer.android.com/static/training/constraint-layout/images/baseline-constraint_2x.png?authuser=9&hl=tr)
Şekil 11. Temel hizalama kısıtlayın.
Bir kuralla sınırla
Hedeflerinizi kısıtlamanıza olanak tanıyan dikey veya yatay bir kılavuz uygulamanızın kullanıcıları tarafından görülemez. Yönergeyi dp birimlerine veya kenarını sabitleyelim.
Kural oluşturmak için Kurallar'ı tıklayın.
dokunun ve Dikey Kılavuz Ekle veya Ekle'yi tıklayın
Yatay yönergeler.
Noktalı çizgiyi sürükleyerek yeniden konumlandırın ve kenarındaki daireyi tıklayın açma/kapatma düğmesini de kullanabilirsiniz.
![](https://developer.android.com/static/training/constraint-layout/images/guideline-constraint_2x.png?authuser=9&hl=tr)
Şekil 12. Belirli bir aykırıdır.
Bariyerle sınırla
Yönergelere benzer şekilde, bariyer de kısıtlayabileceğiniz görünmez bir çizgidir Ancak bir engel kendi konumunu tanımlamaz. Aksine bariyer konum, videonun içerdiği görüntülemelerin konumuna göre hareket eder. Bu Bir görünümü tek bir görünüm yerine bir dizi görünümle sınırlamak istediğinizde kullanışlıdır görebilirsiniz.
Örneğin, Şekil 13'te görünüm C, bir panelin sağ tarafıyla engel oluşturabilirsiniz. Bariyer “son” olarak ayarlanmıştır. (veya sağ tarafta, soldan sağa hem A hem de B görünümünde) yer alır. Bariyer, projenin A görünümünün sağ tarafı veya B görünümünün en sağ tarafıdır.
Bariyer oluşturmak için aşağıdaki adımları izleyin:
- Kurallar'ı tıklayın.
seçin ve Dikey Engelleri Ekle'yi tıklayın veya Yatay Bariyer Ekleyin.
- Bileşen Ağacı penceresinde, bariyer bileşeninin içine sürükleyin.
- Bileşen Ağacı'ndan engeli seçin,
Özellikler
penceresine dokunup barrierDirection'ı ayarlayın.
Artık başka bir görünümden engele yönelik bir sınırlama oluşturabilirsiniz.
Bir engelin içinde yer alan görünümleri bariyer. Bu şekilde bariyerdeki tüm görünümleri birbirine hizalayabilir, tanımasanız bile görüntüleyebilir veya düzenleyebilirsiniz.
Bir bariyerin içine “minimum” değer sağlamak için bir kural da ekleyebilirsiniz. bariyer için daha iyi bir fırsattır.
![](https://developer.android.com/static/training/constraint-layout/images/barrier-constraint_2x.png?authuser=9&hl=tr)
Şekil 13. C Görünümü bir engelle sınırlıdır. hem A hem de B görünümünün konumuna ve boyutuna göre hareket eder.
Kısıtlama ağırlıklandırmasını ayarlayın
Bir görünümün her iki tarafına da sınırlama eklediğinizde, iki boyutun da "sabit" olup olmadığını veya "içeriği kaydır"ı seçerseniz görüntü ortalanır. iki kısıtlama arasında varsayılan değer% 50 olur. Her bir Özellikler penceresindeki ağırlık kaydırma çubuğunu sürükleyerek veya (3. video'da gösterildiği gibi) görünüm.
Bunun yerine görünümün kısıtlamaları karşılayacak şekilde boyutunu genişletmesini istiyorsanız boyutu "kısıtlamalarla eşleştir" olarak değiştirin.
3. video. Kısıtlama ağırlıklandırmasını ayarlama.
Görünüm boyutunu ayarlama
![](https://developer.android.com/static/images/training/constraint-layout/constraint-layout-editor-attributes-2x.png?authuser=9&hl=tr)
Şekil 14. Bir görünüm seçerken, Özellikler penceresi, 1 boyut oranı, 2Kısıtlamaları silme, 3 yükseklik veya genişlik modu, 4 kenar boşluğu ve 5 Kısıt ağırlıklandırması. Ayrıca metinleri öne çıkarabilirsiniz Düzen Düzenleyicisi'nde istediğiniz sınırlamaları 6 kısıtlama listesi.
Bir görünümü yeniden boyutlandırmak için köşe tutamaçlarını kullanabilirsiniz, ancak bu işlem
bir boyut kullanın: Görünüm, farklı içerikler veya ekran boyutları için yeniden boyutlandırılmaz. Alıcı:
farklı bir boyutlandırma modu seçin, bir görünümü tıklayın ve Özellikler
sağ tarafında bulunan bir penceredir.
Özellikler penceresinin üst tarafına yakın yerde bulunan görünüm inceleyicisi Şekil 14'te gösterildiği gibi çeşitli düzen özelliklerine ilişkin denetimler içerir. Bu yalnızca kısıtlama düzenindeki görünümler için kullanılabilir.
Yükseklik ve genişliğin hesaplanma şeklini değiştirmek için Şekil 14'te 3 açıklama metni ile belirtilen simgeler. Bu semboller, beden modunu aşağıdaki gibi temsil eder. Geçiş yapmak için simgeyi tıklayın şu ayarlar arasında geçiş yapın:
-
. Sabit: Aşağıdaki metin kutusunda veya görünüm düzenleyicide yeniden boyutlandırılıyor.
-
. İçeriği Sar: görünüm yalnızca sığması için gereken kadar genişler içerik.
- layout_restrictededWidth
-
. Eşleme Kısıtlamaları: Görünüm, mevcut şartları karşılamak için her iki tarafta da kısıtlar olduğunu unutmayın. Ancak, aşağıdaki özellikler ve değerlerle bu davranışı değiştirebilir. Bu özellikleri, yalnızca görünüm genişliğini "eşleşme kısıtlamaları" olarak ayarladığınızda geçerli olur:
- layout_RestricttGenişliği_min
Bu, görünümün minimum genişliği için
dp
boyut alır. - layout_restrictiontGenişliği_maks
Bu, görünümün maksimum genişliği için
dp
boyut alır.
Ancak belirtilen boyutta yalnızca bir sınırlama varsa görünüm genişler. Bu modun yükseklik veya genişlikte de kullanılması bir boyut oranı belirlemenize olanak tanır.
- layout_RestricttGenişliği_min
Yatay boyutun şu şekilde değişmesine izin vermek için bunu true
olarak ayarlayın:
ve kısıtlara uyar. Varsayılan olarak WRAP_CONTENT
seçeneğine ayarlanmış bir widget
sınırlı olmadığını ifade eder.
Boyutu oran olarak ayarla
![](https://developer.android.com/static/images/training/constraint-layout/constraint-layout-ratio-2x.png?authuser=9&hl=tr)
Şekil 15. Görünüm 16:9 en boy oranında yüksekliğin oranına göre genişliği.
Görünüm boyutunu 16:9 gibi bir orana (örneğin,
görünüm boyutlarının "eşleşme kısıtlamaları" olarak ayarlanması (0dp
).
oranında, En boy oranı kısıtlamasını aç/kapat'ı (açıklama metni) tıklayın.
1'i tıklayın) ve
Görüntülenen girişteki width:height oranı.
Hem genişlik hem de yükseklik "kısıtlamalarla eşleşecek" değerine ayarlanırsa bu rapora En boy oranı kısıtlamasını aç/kapat seçeneğiyle hangi boyutun temel oranıdır. Görünüm inceleyici, hangi boyutun en-boy oranı ikiye katlanabilir.
Örneğin, her iki tarafı da "eşleşme kısıtlamaları" Geçiş yap En Boy Oranı Kısıtlaması'nı seçerek genişliği, yüksekliğin oranı olacak şekilde ayarlayın. Tüm boyut, görünümün yüksekliğine göre belirlenir; bu boyut şekilde değiştirin.
Görüntüleme kenar boşluklarını ayarlama
Görünümlerinizin eşit aralıklı olarak gösterilmesi için Kenar boşluğu'nu tıklayın.
eklediğiniz her görünüm için varsayılan kenar boşluğunu
kullanır. Varsayılan kenar boşluğunda yaptığınız değişiklikler yalnızca bu seçimi yaptığınız
ekleme yapabilirsiniz.
Özellikler penceresindeki her görünümün kenar boşluğunu her bir kısıtlamayı temsil eden satırdaki sayıyı tıklayın. Şekil 14'te 4 açıklama metni, alt kenar boşluğunun 16dp.
Şekil 16. Araç çubuğunun Kenar boşluğu düğmesini tıklayın.
Aracın sunduğu tüm kenar boşlukları, görünümlerinizin hizalanmasına yardımcı olmak için 8 dp faktörleridir. önerilerine göz atacağız.
Zincirle doğrusal grupları kontrol etme
![](https://developer.android.com/static/training/constraint-layout/images/constraint-chain_2x.png?authuser=9&hl=tr)
Şekil 17. Yatay bir zincirle iki görünüm.
Zincir, birbirine çift yönlü bir bağlı görünüm grubudur. ve konum sınırlamalarına Bir zincirdeki görünümler, bir şablondur.
![](https://developer.android.com/static/training/constraint-layout/images/constraint-chain-styles_2x.png?authuser=9&hl=tr)
Şekil 18. Her zincire ait örnekler stiline sahip.
Zincirlerin stilini belirlemek için şu yöntemlerden birini kullanabilirsiniz:
- Yayıl: Görüntülemeler, kenar boşlukları ayarlandıktan sonra eşit olarak dağıtılır yardımcı olur. Bu, varsayılan ayardır.
- Dağılım: İlk ve son görünümler Zincirin her iki ucunda da kısıtlamalar olur, geri kalanlar da eşit olarak dağıtıldı.
- Ağırlıklı: Zincir yaygın olarak ayarlandığında veya
içine yayıldıysa bir veya daha fazla ayar yaparak kalan alanı doldurabilirsiniz
görüntülemeleri "eşleme kısıtlamaları"na (
0dp
). Alan varsayılan olarak "eşleme kısıtlamaları"na ayarlanmış her bir görünüm arasında eşit olarak dağıtılır. ama her görünüme önem derecesini atayaraklayout_constraintHorizontal_weight
velayout_constraintVertical_weight
özellikleri. Bu, bir dildekilayout_weight
ile aynı şekilde çalışır. doğrusal düzen: en yüksek ağırlık değerine sahip görünüm en fazla alanı kaplar ve aynı ağırlığa sahip görünümlerde aynı miktarda alan olur. - Paketlenmiş: Görüntüleme sayısı, kenar boşlukları hesaplandıktan sonra bir araya getirilir. . Tüm zincirin önyargısını sol veya sağ ya da yukarı veya zincirin "başını" değiştirerek görünüm ön yargısı.
Zincirin "head"i görünüm: yatay bir zincirde en soldan görünüm
(soldan sağa düzende) ve
en üstte yer alan görünüm: XML'de zincirin stilini tanımlar.
Ancak yaygın, içine yayılmış ve
Zincirdeki herhangi bir görünümü seçip zincir düğmesini tıklayarak paketlenmiş
bir düğme görürsünüz.
Zincir oluşturmak için video 4'te gösterildiği gibi aşağıdakileri yapın:
- Zincire dahil edilecek tüm görünümleri seçin.
- Görünümlerden birini sağ tıklayın.
- Zincirler'i seçin.
- Yatay olarak ortala veya Dikey olarak ortala'yı seçin.
4. video. Yatay zincir oluşturuluyor.
Zincirleri kullanırken göz önünde bulundurmanız gereken birkaç nokta aşağıda belirtilmiştir:
- Bir görünüm hem yatay hem de dikey bir zincirin parçası olabilir. Dolayısıyla, esnek ızgara düzenleri oluşturabilirsiniz.
- Bir zincirin düzgün çalışması için zincirin her bir ucu aynı eksende başka bir nesne görmek için aşağıdaki şemalardan birini seçin.
- Zincirin yönü dikey veya yatay olsa da uyumlu hale getirebilirsiniz. Ekip için uygun konumu elde etmek üzere her görünümün feed'i olduğu gibi, Hizalama kısıtlamaları hakkında daha fazla bilgi edinin.
Otomatik olarak kısıtlamalar oluştur
Kısıtlamaları düzene yerleştirdiğinizde her görünüme kısıtlamalar eklemek yerine
her görünümü Düzen Düzenleyicisi'nde istediğiniz konumlara taşıyabilir ve
ardından Kısıtlamaları Çıkar'ı tıklayın.
otomatik olarak kısıtlar oluşturun.
Kısıtlamaları Çıkar seçeneği, en etkili grubu belirlemek için düzeni tarar. kısıtlanmasını sağlayabilirsiniz. Görünümleri mevcut konumlarıyla sınırlar bir yandan da esneklik sağlar. Müşterilerinizin daha etkili bir şekilde çalışmasını sağlamak için ekran boyutları ve yönleri ile uyumlu olmasını sağlayın.
Ebeveyne otomatik bağlan, etkinleştirebileceğiniz ayrı bir özelliktir. Zaman etkinleştirilirse ve bir ebeveyne alt görüntüleme eklerseniz bu özellik otomatik olarak siz her görünüm için iki veya daha fazla sınırlama oluşturur. düzen (yalnızca görünümün üst öğe ile kısıtlanması uygun olduğunda) kullanır. Otomatik bağlanma, düzendeki diğer görünümler için kısıtlama oluşturmaz.
Otomatik bağlanma varsayılan olarak devre dışıdır. Bu seçeneği etkinleştirmek için Etkinleştir'i
Ebeveyn ile otomatik bağlantı
tıklayın.
Animasyon karesi animasyonları
ConstraintLayout
içinde, boyutta yapılan değişikliklere animasyon uygulayabilirsiniz
öğelerin konumunu belirlemek için
ConstraintSet
ve
TransitionManager
.
ConstraintSet
, öğesini temsil eden hafif bir nesnedir
ve dolguları, boşlukları ve dolguları
ConstraintLayout
. Bir ConstraintSet
yönergesini
ConstraintLayout
görüntülenirse düzen,
sorumlu olduğunu söyleyebilir.
ConstraintSet
kullanarak animasyon oluşturmak için iki düzen belirtin
animasyon için başlangıç ve bitiş animasyon kareleri görevi gören dosyaları. Ardından,
ikinci animasyon karesi dosyasından bir ConstraintSet
ve bunu
ConstraintLayout
gösteriliyor.
Aşağıdaki kod örneğinde, tek bir düğmenin dokunun.
// MainActivity.kt
fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.keyframe_one)
constraintLayout = findViewById(R.id.constraint_layout) // member variable
}
fun animateToKeyframeTwo() {
val constraintSet = ConstraintSet()
constraintSet.load(this, R.layout.keyframe_two)
TransitionManager.beginDelayedTransition()
constraintSet.applyTo(constraintLayout)
}
// layout/keyframe1.xml // Keyframe 1 contains the starting position for all elements in the animation // as well as final colors and text sizes. <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
// layout/keyframe2.xml // Keyframe 2 contains another ConstraintLayout with the final positions. <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Ek kaynaklar
ConstraintLayout
,
Yayçiçeği
demo uygulama.