Balon Şeklinde Etiket Oluşturmak

Swift ile balon şeklinde etiket nasıl oluşturulur merak ediyorsanız sizi içeri alalım 🙂

Ön Bilgi

Etiket oluşturmak: örnek gösterim

iOS uygulamanızı geliştirirken balon şeklinde etiketler oluşturmak istediğiniz durumlar zaman zaman olabilir.

Benim olmuştu. Buldum, araştırdım, öğrendim ve sıra yazılım dünyasıyla paylaşmaya geldi 😊

Uygulayacağımız işin adı tag list diye geçiyor. Bazen gereken anahtar kelimeleri yazmayınca aradığınızı bulmak çok zor olabiliyor gerçekten 🙂

Tag list konseptini uyguladığımız zaman uygulamamızda sizin istediğiniz veya kullanıcının girdiği String leri baloncuk içine almış olacağız.

 

 

Hemen örnek proje üzerinden başlayalım 🔨

 

Balon Şeklinde Etiket Oluşturmak: Örnek Uygulama

Örnek uygulamamızda kullanıcıdan birden çok kategori seçmesini isteyeceğiz. Bunu LinkedIn de profili düzenlerken yetenek ekleme kısmına benzetebiliriz.

Etiket Örnek: LinkedIn

 

Bu dersi takip edebilmeniz için CocoaPods bilgisine sahip olmalısınız. Eğer henüz bilmiyorsanız CocoaPods Kullanımı dersine mutlaka göz atın 🙂

 

SingleView proje yaratalım ve projeyi pod init ile initialize edelim.

 

Pod dosyasına TagListView adlı kütüphaneyi ekleyelim. Github sayfasına buradan gidebilirsiniz.

 

pod install ile kütüphaneyi kuralım ve beyaz renkli workspace dosyasını açalım.

 

Storyboard ekranına birer tane TextField ve Button ekleyelim, bunları ekranın ortasına sabitleyelim ve isim verelim.

 

Ben StackView içine alıp auto-layout ile constraint vermeyi seçtim. Şimdi bu StackView in üstüne bir adet UIView sürükleyelim.

 

UIView in constraint lerini yandaki gibi verdim. Siz de aynı veya benzer değerler verebilirsiniz.

Bu UIView i etiketlerin görünmesi için kullanacağız. Her eklediğimiz etiket bu UIView içinde ufak baloncuklar şeklinde görünecek. Dolayısıyla constraint leri ona göre vermeniz gerekiyor.

İşimiz bittikten sonra UIView arkaplanını sahnenin arkaplanıyla aynı yapacağız, şimdilik böyle kalsın.

 

Şimdi UIView i seçelim ve Identity Inspector’dan custom class olarak TagListView seçelim.

 

Eğer beyaz renkli workspace dosyasıyla işlem yapmıyorsanız sorun yaşarsınız.

Ayrıca, TagListView seçiyor fakat projenizde hata oluşuyor ve “Welcome to TagListView” yazısını göremiyorsanız CocoaPods un farklı bir sürümünü kullanıyor olabilirsiniz. Lütfen Xcode Hatalarına Çözüm sayfasını ziyaret edip “cocoapods” diye aratın. 

 

Bitişe doğru…

 

TextField a yazıp Ekle dediğimiz her String i yukardaki UIView içinde görmek istiyoruz, amacımız bu. O zaman Assistant Editor’u açalım ve gerekli bağlantıları yapalım. Ayrıca TagListView kütüphanesini çağırmayı unutmayalım.

 

Klavyeyi Otomatik Yapmak

Klavyeyi kullanacağımız her yerde ekran klavyesini dokunmaya duyarlı hale getirmek lazım…

 

Bunu da sınıfa eklediysek geriye pek bir şey kalmadı.

Şimdi Ekle butonunun aksiyonuna bir şeyler yazalım 🙂

 

Aksiyon içinde şunları yaptık:

  • Eğer mTextField ın içi boşsa içindeki String i tag olarak ekle ve tag sayısını 1 arttır.
  • Eğer tag in üstüne dokunulursa bu tag i sil ve tag sayısını bir azalt.
  • Yeni tag girmek için mTextField içini boşalt.

 

Koşulları isteğinize göre değiştirebilirsiniz.

 

Projeyi çalıştıralım 🔥

 

 

Sonuç

İstediğimizi yaptık. Daha çok özelleştirmek için UIView seçiliyken Attributes Inspector dan ayar çekebilirsiniz.

Ayrıca Ekle aksiyonun içinde şöyle ayarlar da yaparsanız güzel olabilir:

– Eğer aynı etiket daha önce kullanıldıysa bir daha ekleme

– Maksimum 5 etiket eklenebilsin

– Eklenilen her etiket bir Array içinde de tutulsun

– Etiketin uzunluğu 10 karakterden uzun olmasın

vs.

Kendi projelerimde de severek kullandığım bu kütüphane umarım işinize yarar.

 

Projenin kaynak koduna iOS Notları – Github sayfasından erişebilirsiniz.

 

 

Yorum, görüş ve önerileri eksik etmeyin 🙂

 

İyi kodlamalar 💻

 

Kimler Neler Demiş?

avatar
  Subscribe  
Bildir