iOSYAZILIM

Swift – Basic Components

Swift Dersleri

Bu derste uygulamalarda en çok kullandığımız basit elemanların kullanımından bahsedeceğim. Button, TextView, TextField ve Label elemanlarını bir uygulamada kullanıp çalışma stillerinden bahsedelim.

Öncelikle ekranımıza bir eleman ekledikten sonra onu kod bölümünde kullanabilmek için IBOutlet tipinde bir parametre tanımlayıp ekrandaki eleman ile eşleştirmemiz gerekiyor. Bu işi daha kolay yapabilmemiz için xCode bize bir güzellik yapmış.

Öncelikle StoryBoard’da sağ üst taraftaki bölümde ekranı ikiye bölmemizi sağlayan kesişmiş iki yuvarlaklı butona tıklıyoruz. Daha sonrasında ise ekranımızdaki elemanın üstüne fareyi getirip ctrl’ye basılı tutarak kodumuzun yazılı olduğu yere doğru götürüyoruz ve sınıf adının altına bırakıyoruz.

Bu işlemi yaptıktan sonra artık butonumuzu bir değişken olarak oluşturmuş olduk. Ve ekrandaki buton ile kod içinde oluşturulmuş olan değişken de otomatik olarak bağlandılar. Aynı işlemi yukarıda yerleştirmiş olduğumuz TextField’ler içinde uygulayıp değişkenlerini oluşturuyoruz.

TextField’e tıkladığımızda sağ taraftaki bölümde özelliklerini düzenleyebileceğiniz kısmı göreceksiniz. Burada yazı renginden font’una arka plan resminden border style’a kadar bir çok özelliği daha tasarım aşamasında düzenleyebilirsiniz. Ben iki adet TextField’imizin sadece “Placeholder” kısımlarını ad ve soyad olarak doldurdum ve yukarıda gördüğünüz şekilde içleri dolu hale geldi. Kullanıcı içlerine yazı yazmaya başladığında placeholder’daki yazı kaybolacak.

Yazdığımız ad ve soyad’ını bir adet label ekleyerek orada göstereceğiz. Label’ı da ekledikten sonra şu anda kodumuz bu durumda ;

Butonumuzu ve textField’lerimizi oluşturduktan sonra butonumuza bir Action belirlememiz lazım. Bu işlemi de iki şekilde yapabiliyoruz. İlk olarak StoryBoard’dan yukarıdaki animasyonda gösterildiği gibi ctrl’ye basılı tutarak sınıfımızın içine taşıyoruz. Farklı olan kısım ise üst tarafta Outlet yerine Action oluşturuyorsunuz.

Buton’umuzun Action’ını da ekledikten sonra artık butona tıklandığında ne yaptırmak istiyorsak bu method’un içinde halledebiliriz. Diğer bir yol ise Butonumuzun değişkeni ‘okButton’ elimizde olduğu için sınıf içinde bir method oluşturup okButton’a bir target ekleyerek de aynı işlemi yaptırabiliriz.

Butona target methodu ve Event’ı ekliyoruz, basitçe butona diyoruzki ‘TouchUpInside’ event’ına karşılık gelen buton içine tıklama olayı gerçekleşirse şu methoda git ve çalıştır diyoruz. Butona görev atama işlemlerini bu şekilde gerçekleştiriyoruz.

Şimdi method’ın içini doldurarak işlemimizi yaptıralım.

Method’un içinde yukarıda tanımladığımız değişkenlere ( ad ve soyad ) textField’lerden aldığımız girdilerin atamasını yapıyoruz. Tabi bu olay buton’un action methodun da olduğu için buton tıklandığında textField’lerde ne yazıyorsa o girdileri alıp label’a yazdırıyoruz.

Kod’umuzun son hali ise şu şekilde ;

Şimdi uygulamamıza bir adet TextView ekleyelim. Kullanımı Label ile benzer şekildedir. Aralarındaki farklar ise ;

  • UILabel : “UILabel ile gösterdiğiniz text’ler sadece okunabilir özelliktedirler.”
  • UITextField yazı girebildiğiniz, yazıyı editleyebildiğiniz ve sonunda bir action ile ( Kullanıcının return butonuna basması gibi ) o yazıyı mesaj olarak gerekli nesneye gönderebildiğiniz bir nesnedir.
  • UITextView birden fazla satır yazıyı görüntüleyebildiğiniz, scroll ile uzun yazıları kaydırabildiğiniz bir sınıftır.

TextView’in genel özellikleri arasında editlenebilme ve yazıya tıklandığında seçilebilme özellikleri vardır. Eğer label da olduğu gibi sadece text’i okunması için koyduysanız sağ üst taraftaki bölümde Editable ve Selectable seçeneklerindeki tikleri kaldırmanız gerekir.

Şimdi örnek olması amacıyla TextView için iki adet buton ekleyelim. Bir tanesinde kısa yazı olsun ve kod ile textView’in editable ve selectable özelliklerini kapatalım. Diğer butonda ise uzun yazı ekleyip editable ve selectable özelliklerini açalım.

Evet butonlarımızı yerleştirdik ve  action methodlarının da içini doldurduk. Artık bişeyler şekillenmiştir kafanızda yani hangi item nasıl kullanılıyor, StoryBoard ve Code arasında bağlantı nasıl kuruluyor bu tarz başlangıç şeylerinden bahsettik

Son olarak tasarladığımız ekranların bütün telefonlarda bozulmadan durabilmesi için xCode’da AutoLayout özelliğini kullanmamız gerekiyor. Autolayout konusuna daha sonra değineceğimiz için sizin şu an yapmanız gereken şey tasarladığınız ekranın üst tarafına tıklayıp yani tüm ekranı seçip ;

görselde de görüldüğü üzere sağ alt taraftaki bölümden “Add Missing Constraints” seçeneğini seçiyoruz. xCode burada bizim için bütün elemanların constraint’lerini kendisi ekliyor.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

9 + two =

Başa dön tuşu