Slider Menu in IOS

Taha Muhsin Yılmaz
Arcelik IoT Labs
Published in
3 min readDec 28, 2019

Herkese merhabalar. Bu yazıda son zamanlarda mobil dünyasında sıkça kullanılan slider menu oluşturma işlemini anlatacağız. Swift temelleri ve Interface Builder, Constraintler hakkında bilgi sahibi değilseniz öncelikle bu konularda bilgi edinip sonra bu yazıya dönmeniz sizin için daha faydalı olacaktır. Haydi başlayalım.

Slider IOS SDK’sında default bulunan bir component olmadığından IOS geliştiricilerin sıkça karşılaştığı bu sorun genelde pod kullanımı ile çözülür. Ama ben adı üstünde “dependency” kullanımının “çok zorlanmadıkça” tercih edilmesi taraftarı değilim. Tabi Alamofire, SDWebImage gibi yüksek starlı kendi cache yapısı olan güncellemeleri frameworklerine yansıtan önemli podları ben de kullanıyorum. Neyse pod konusunu çok uzatmadan slider oluşturmaya başlayalım. Bir single view app oluşturuyoruz. Main.storyboard’ a iki adet container view atıyoruz. Container View içerisinde view controller ve türevlerini barındırabilen özel bir view yapısı.

Daha sonra bu iki view için, soldaki ekrana oturacak ve birbirlerine bitişik olacak şekilde constraint konfigürasyonu yapıp, soldaki view controller’ı yeşil, sağdakini kırmızı yapıyoruz.

Görüldüğü üzere iki container view birbirlerine bitişik ikisinin de genişliği ekran kadar ve ikisi de ana view controller’ a top ve bottom constraint ile bağlı. Yanlız burada tahmin edeceğiniz gibi soldaki view ‘a ait leading constraint bizim geçiş işlemlerini yapacağımız constraint. Bu constraint’i width kadar negatif değer ile set edersek sağdaki ekranı görünür kılmış olacağız.

Şimdi ana ViewController dosyamıza geliyoruz ve soldaki view ‘ a ait leading constraint’e outlet atıyoruz.

Bu işlemin ardından yine ios sdk’sına ait UISwipeGestureRecognizer ile kaydırma işlemlerini gerçekleştireceğiz.

Gesture recognizer’ları ekledikten sonra yapılacak tek işlem constraint’in sabitiyle oynamak olacaktır. Bunu yaparken left slide yapıldığından constant eksi viewWidth, right slide yaparken de sıfır olarak ayarlanmalıdır. Yani action fonksiyonları aşağıdaki gibi olmalıdır.

Bu işlemin ardından kod derlendiğinde slide işlemi aşağıdaki gibi hızlı gerkeçleşir. Buna UIView’in animate fonksiyonu ile animasyon verildiğinde geçişler daha güzel görülür olacaktır.

Bu yazımızda slider menu entegrasyonundan bahsedildi. Burada dikkat edilmesi gereken konu birinci container view ve ikinci container view aynı anda ram’ e yazılır. Eğer sizin view controller’larınız infinite scroll vs. gibi sürekli yüklenen özelliklere sahip ise bununla ilgili memory management yapmanız gerekebilir. Buna lütfen dikkat edin. Umarım faydalı olur. İyi kodlamalar✋🏻.

--

--