Making ActionSheet UI By Using XIB Files Rather UIViewController

Herkese merhabalar. Bu yazıda XIB kullanımından bahsedilecek, bir örnek ile detaylı açıklanacaktır.

Projelerinizde pop-up, actionsheet gibi küçük view gösterimlerini sergilemek için view controller kullanmak mantıksız bir seçim olmaktadır. Bu işlemi UIKit kodları ile yapmak da bazen içinden çıkılamaz hal almaktadır. Bu tür viewlerin sergilenmesi XIB dosyaları ile kolaylıkla yapılabilmektedir.

Nedir XIB?

XIB, Xcode Interface Builder yardımıyla oluşturulan custom viewlere verilen addır. İlk çıktığında adı NIB(NeXTSTEPInterfaceBuilder)’ idi. NeXT Steve Jobs’ ın Apple’ dan sonra kurduğu firmanın adı NeXTSTEP ise bu firmada geliştirilen UNIX tabanlı Objective C ile yazılmış bi işletim sisteminin adıdır. Konumuza dönecek olursak daha sonradan adı XIB (XML Interface Builder) olarak değiştirilmiştir. XIB ile custom viewları rahatlıkla IB üzerinden yerleştirip Constraintleri ayarlanarak projede birden fazla alanda render işlemini kolaylıkla gerçekleştirilmesini sağlamaktadır.

Nasıl Yapılır?

Bu işlem için bir proje açıyoruz. File -> New -> File üzerinde View seçip ismini CustomView koyuyoruz.

Daha sonra bu view üzerinde çalışacak sınıfımızı yine File-> New ->File menüsüne gidip bu sefer Swift dosyası seçiyoruz. Dosyanın ismini de CustomView olarak giriyoruz.

Dosyalarımızı oluştruduktan sonra istediğimiz komponentlerle tasarımı oluşturuyoruz. Ben bir text view ve buton ile şikayet action sheet oluşturacağım.

Öncelikle oluşturduğumuz CustomView swift dosyasında UIView’den inherit eden bir class oluşturuyoruz. Daha sonra XIB dosyası ile yeni oluşturduğumuz UIView sınıfımızı File Owner olarak atıyoruz.

Bu işlemin ardından CustomView.swift içerisinde ana View’ın outletini oluşturuyoruz. Bu işlemi yapma amacımız obje oluştururken ana view’ın frame’ini XIB içerisindeki view’a eşitlemek, böylece ekrana tam view Frame ile oturtma işlemi gerçekleştirilmiş olacaktır.

Outlet oluşturduktan sonra CustomView class’ımızın constructorlarını tanımlıyoruz. Bilindiği gibi UIView iki şekilde ilklendirilebilri birisi coder ile diğeri de frame ile. Bu ikisi için de constructor metodları oluşturulması gerekmektedir.

Yukarıda da görüldüğü gibi constructorlar oluşturuldu. Burada commonInit metodu bizim kendi tasarımımızla ilgili oluşturmak istediğimiz işlemlerin gerçekleştirildiği metod. Dikkat edilirse her iki constructor içerisinde de çağrılarak, hangi parametre ile obje oluşturulursa oluşturulsun bu metod çağrılacaktır.

Bu ana kadar XIB dosyamızın konfigürasyon işlemlerini gerçekleştirdik. Şimdi bu CustomView’ın actionsheet formatında ekranda gösterilmesi işlemini gerçekleştireceğiz. Bunun için custom view içerisineiki metod tanımlıyoruz. Bu iki metod ile Custom view’ın gösterilmesi ve gizlenmesi işlemini gerçekleştireceğiz. Ayrıca ayarladığımız yükseklik için de bir outlet atayım, custom view ana view içerisinde subview olarak yerleştirildikten sonra animasyon ile yüksekliğini arttırarak action sheet görünümü verilecektir. Onun için Custom View tasarımı bittikten sonra yükseklik düşük bir değier verilmelidir ki yükselme efekti oluşsun. Ben genelde tasarım bittikten sonra sıfır veriyorum.

Oluşturduğumuz CustomView.xib dosyasında IB üzerinde bir view atıyoruz. Ardından bu view’ın arkaplan rengini değiştiriyoruz(görebilmek açısından). Daha sonra leading, trailing, bottom constrainler veriyoruz ve son olarak belli bir yükseklik veriyoruz. View’ın görüntüsü aşağıdaki gibi olacaktır.

Bu işlemin ardından ViewController’ a bu view’ı göstermesi için bir button ekliyoruz. Daha sonra bu butona bir action veriyoruz. xib gösterimini bu buton ile gerçekleştireceğiz.

Daha sonra bu butonun action metodunda custom view’ımıza ait nesneyi oluşturup show metodu ile çağırıyoruz.

Böylelikle custom view’ın ana ekranda gösterilmesi işlemini gerçekleştirmiş olduk. Şimdi ekranda sürüklenerek gizlenmesini işlemini gerçekleştireceğiz. Bunun için UISwipeGestureRecognizer kullanacağız. Swipe gesture 4 eksende iki yönlü kaydırma işlemlerini algılayan hareket anımsayıcıdır. Bu örnekte swipe gesture recognizer’ın down olanını kullanacağız. Bu recogizer’ın action’da da yukardaki hide metodumuzu kullanacağız. Kodumuzun son hali aşağıdaki gibidir.

Bu işlemin ardından CutomView’ı istediğiniz gibi tasarlayıp içerisini stediğimiz forma getirebilirsiniz.

Bu yazı ile custom action sheet oluşturması işlemini gerçekleştirdik. Umarım faydalı olur. İyi kodlamalar.