iOS ScrollView Autolayout ile Parallax Header Yapımı

Merhaba arkadaşlar,
Son zamanlarda bir çok uygulamada scrollview’in veya tableview üzerinde parallax header görmüşsünüzdür. Bu gibi şeylerin popülerliği hep artıyor ve kullanıcı açısından iyi bir deneyim sunuyor. Autolayout sayesinde matematiksel hesaplamalara ve tek satır kod yazmaya gerek kalmadan parallax header efektini kolay bir şekilde yakalmış oluyoruz.

Öncelikle bir proje XCode projesi oluşturalım. Burada hataya düşülen bir yer olabilir. Eğer iOS uygulama geliştirmeye yeni başlamışsanız constraint’leri bütün ekran oranları için vermeniz sizin açınızdan yararınıza olacaktır. Bunun için Interface Builder altındaki orta kısımdaki w-h ayarlarını değiştirelim.

Interface Builder Ekran oranları seçme butonu

Interface Builder Ekran oranları seçme butonu

Ortadaki kısmın bütün ekran oryantasyonları için ayarlanmış olması gerekmekte. Tıklandığı anda açılan ekran aşağıdaki gibi ayarlanmalı:

Ekran Oran Seçme

Ekran Oran Seçme

Evet 🙂 Şimdi ekranımızı oluşturmaya başlayabiliriz. Öncelikle aşağıdaki gibi ekran hiyerarşimizi oluşturmaya başlayalım.

iOS Ekran düzeni ve Hiyerarşisi

iOS Ekran düzeni ve Hiyerarşisi

Yukardaki resimi açıklamak gerekirse öncelikle ekrana bir ScrollView yerleştirdik ve içerisinde Content View adında bir view ekledik. Böylelikle Content View içerisindeki içerik uzadıkça View’de o oranda AutoLayout sayesinde uzayacaktır. Content View üzerine bir Image View ekledik ve hemen altına yazıların olabileceği Contents adında bir View ekledik.Buraya resim ile ilgili içerikle gelebilir. Ekran yerleşimlerini ve hiyerarşiyi oluşturduktan sonra sıra layout’ları oluşturmaya geldi 🙂

Öncelikle ScrollView’in ekranı tam olarak kaplamasını istiyoruz. Bu yüzden 4 adet constraint ekliyoruz ve bunlar (trailing, leading, top ve bottom) 0 sabit değerini alacak.

ScrollView pin ekleme

ScrollView pinning

Aynı şekilde ScrollView içerisindeki Content View için de aynı adımları tekrar uyguluyoruz ve ScrollView içerisini kaplamasını sağlıyoruz. Fakat burada önemli bir husus var. ScrollView‘in içerisi aslında sonsuz olduğu için Leading ve Trailing constraint’lerini tek başına vermek malesef ki yetmiyor. Ayrıca en dıştaki View ile Content View‘in genişlikleri aynı olsun ki Scroll View‘in içerisinde uzayıp gitmesin. Bunun için view üzerinden sağ tık ile Content View üzerine sürükleyip Equal Width constraint’ini ekliyoruz.

Content View'in genişliği Main View ile aynı olmalı

Content View’in genişliği Main View ile aynı olmalı

Image View için de 4 adet constraint’e ihtiyacımız olmakta. Senaryomuzda şimdilik Image View en üstte duracak şekilde yerleştirilecek. Bunun için Trailing, Top, Leading ve Width constraint’lerini ekliyoruz. Trailing, top ve leading constraint’lerinin değerlerini 0 olarak belirledik ve resimin boyutunu bu örnekte 190 olarak belirledim. Siz projenize göre bu değerler ile az çok oynayabilirsiniz.

ImageView'in en üstte durması için gerekli constraint'ler

ImageView’in en üstte durması için gerekli constraint’ler

Artık resmimiz de en üstte durduğuna göre sıra alt bilgilerin bulunduğu view’i ayarlamaya geldi 🙂

Hiyerarşideki Contents için bu örneğimizde boş bir View kullanacağız. Bu yüzden belli bir yükseklik vermek gerekmekte ve 4 taraftan da en yakın View’lere pinlenmesi gerekmekte. Leading, Trailing, Top, Bottom Constraint’lerini 0 olarak ayarlıyoruz ve hemen ardından height constraint’imizi de bu örnekte 700 olarak ekliyoruz. Böylelikle ScrollView bir scrollable content olduğunu algılamış oluyor. Son eklenen constraint’lerden sonra Interface Builder’in hata vermemesi gerekmektedir.

Contents için gerekli Constraint'ler

Contents için gerekli Constraint’ler

Buradan sonra normal bir şekilde Parallax özelliği olmayan üstte resimin olduğu scrollable content’imiz olmuş oldu. Şimdi gelelim işin can alıcı kısmına 🙂

Öncelikle Contents için Image View‘in uzunluğu kadar bir offset eklememiz gerekmekte. Bu ileride Image View‘in height’ını sildiğimizde işimize yarayacak bir durum. Bunu yapmak için sol taraftan Contents üzerinden Scroll View üzerine bir Top Space to Container‘i seciyoruz ve değerini 190 olarak belirliyoruz.

Screen Shot 2015-09-06 at 02.03.12

Hemen ardından Image View‘in Content View‘ile olan Top Space ve Height  Constraint‘ini devre dışı bırakıyoruz.

Resimdeki Leading Space to SuperView ve Height Constraint'leri devre dışı bırakılmalı.

Resimdeki Leading Space to SuperView ve Height Constraint’leri devre dışı bırakılmalı.

Yine aynı şekilde Image View in yukarıda asılı olarak görünmesini sağlayabilmek için  ekranın en üstüne asılı olarak kalması gerekmekte. Hemen ardından soldaki hiyerarşi menüsünden Image View üzerine sağ tık sürükleme yaparak Top Layout Guide üzerinde duruyoruz ve Vertical Spacing‘i seçiyoruz.

Böylelikle Parallax Header‘imiz olmuş oluyor. Fakat şöyle bir durum var. Biz son eklenen Constraint ile ImageView’in ekranın en üstüne Pin edilmesini istemiştik fakat ScrollView’i biraz daha yukarı çektiğimizde

Unable to simultaneously satisfy constraints.

hatası ile karşılaşıyoruz. Bu normal tabiki. Neden soracak olursanız yukarıya çekilen ScrollView ile resim görünemez bir hale geldiğinde normalde resimin üstü ile ekranın üstü arasındaki aralık 0 olması gerekirken 0’dan daha küçük değerler almış oluyor ve böylelikle bu Constraint’imiz sağlanamamış oluyor. Bu yüzden son yaptığımız Constraint ekleme işlemini bir defa daha yapıyoruz. Yani hiyerarşi menüsünden Image View üzerine sağ tık sürükleme yaparak Top Layout Guide üzerinde duruyoruz ve Vertical Spacing‘i seçiyoruz ve Constraint’in özelliklerine gelip Relation kısmından Less Than or Equal değerini seçiyoruz. Böylelikle küçük değerleri de sağlıyor olmuş olacağız. Fakat bir sorunumuz daha var. Önceden eklediğimiz Relation‘ı Equals olan Vertical Spacing Constraint’i ile conftlict olmaması için Equal olanın Priority’sini 750‘ye çekiyoruz. Böylelikle sadece birisinin diğerine göre bir önceliği olmuş oluyor.

Artık hata da almadığımıza göre işlemlerimizi tamamlamış oluyoruz :

Örnek Projeye Github üzerinden ulaşabilmeniz için link:

https://github.com/sehmusgokce/ParallaxHeader

Umarım açıklayıcı olmuştur.

 

Bu yazı iOS Programlama, Yazılarım kategorisine gönderilmiş ve , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir