UIButton

UIButton ile uygulamalarınıza butonlar ekleyerek istediğiniz aksiyonları çalıştırabilirsiniz.

Halil Özel
Nov 17, 2018 · 4 min read
Image for post
Image for post

Merhabalar, bugünkü yazımda bir önceki yazıda başlamış olduğum Swift ile UIKit serisine devam edeceğiz. Bir önceki yazıyı okumadıysanız yazıya aşağıdan ulaşabilirsiniz:

Bugünkü konumuz ise UIButton. Hazırsanız başlayalım :)

UIButton Nedir ?

UIButton, kullanıcılarınız ve kodunuz arasındaki etkileşimi sağlayan ve bu etkileşim sonucunda bir kod bloğunu çalıştıran arayüz elementidir.

Genel Bakış

Bir buton, üzerine tıklandığında kendisine bağlı eylemleri gerçekleşitirir. Butonların görünümü tamamen özelleştirilebilir. Arkaplan rengini, yazı fontunu veya başlık rengini değiştirerek uygulamanızın genel tasarımına uyacak butonlar tasarlayabilirsiniz. Bir butonu arayüzünüze kod ile veya Interface Builder aracılığıyla ekleyebilirsiniz.


Buton Etkileşimleri

Butonlar, kullanıcı butona tıkladığında uygulamanızı bilgilendirmek için Target-Action tasarım modelini kullanır. Bir butona ikifarklı yöntem ile aksiyon bağlanabilir;

  1. Taget: addTarget(_:action:for:) yöntemi ile butonunuza kod ile aksiyon bağlayabilirsiniz
  2. IBAction: Interface Builder ile bir IBAction bağlantısı oluşturabilirsiniz.

Bir aksiyon, aşağıdaki üç farklı formdan bir tanesine sahip olabilir.

@IBAction func islemYap()
@IBAction func islemYap(sender: UIButton)
@IBAction func islemYap(sender: UIButton, forEvent event: UIEvent)

Buton Durumları

Butonların görünümlerini tanımlayan beş farklı durum vardır. Arayüzünüze bir buton eklediğinizde, başlangıçta default durumdadır.

Default: Buton etkin ve kullanıcı onunla etkileşim içerisinde değil.

Highlighted: Kullanıcı butona dokundu ve(veya) üzerinde basılı pozisyonda.

Selected: Kullanıcı butona tıklamış.

Disabled: Devre dışı bırakılmıştır, rengi kısılmış ve dokunulduğunda highlight durumuna geçmez.


İçerik

Bir butonun içeriği, belirttiğiniz bir başlıktan veya görselden oluşur. Belirttiğiniz içerik, düğmenin kendisi tarafından yönetilen UILabel ve UIImageView elementlerini yapılandırmak için kullanılır. Bu elementlere .titleLabel veya .imageView özelliklerini kullanarak erişebilir ve değerlerini doğrudan değiştirebilirsiniz

Normalde, bir title vaya bir image kullanarak butonunuzu yapılandırırsınız ve buna göre butonunuzu boyutlandırırsınız. Butonlar ayrıca bir arkplan görseline de sahip olabilir. Aynı anda hem arkaplan görseli hem de bir title ve bir image kullanabilirsiniz.

Aşağıda belirtilen özellikleri kullanarak bir düğmenin mevcut içeriğine erişebilirsiniz.

Image for post
Image for post

Bir düğmenin içeriğini ayarlarken, her durum için ayrı ayrı başlık, resim ve görünüm özelliklerini belirtmeniz gerekir. Eğer belirli bir durum için içeriği özelleştirmezseniz, düğme default durumdaki değerleri kullanır. Bu değişiklikleri Interface Builder ile veya kodunuzda yapabilirsiniz.

setTitle("Highlighted Başlık", for: .highlighted)
setImage(UIImage(), for: .selected)
setTitleColor(UIColor.red, for: .disabled)

Interface Builder Özellikleri

Bir UIButton elementi için Interface Builder ile ayarlanabilecel temel özelliklerden bazıları aşağıdaki gibidir;

Type (Tip)

Buton tipleri system ve custom olmak üzere ikiye ayrılır. Bu özellik buton oluşturulurken verilir ve uygulama çalışırken bir daha değiştirilemez. Fakat runtime esnasında.buttonType ile butonun türüne ulaşabilirsiniz.

State Config (Durum)

Bu kontrolde bir durum seçtikten sonra butonun görünümüne yapacağınız değişiklikler seçtiğiniz durum için geçerli olacaktır. Örneğin; selected durumunu seçtikten sonra başlığın renginde yapacağınız değişiklik yalnızca bu durum için geçerli olacaktır.

Image for post
Image for post

Title (Başlık)

Butonunuzun başlığını belirtir. Bir butonun başlığını Plain (düz) veya Attributed (bitelikli) bir yazı olarak belirleyebilirsiniz.

Image for post
Image for post

Image (Görsel)

Butonunuzda bir görsel gösterebilirsiniz. Çoğunlukla bir ikon olarak tercih edilse de Xcode projenizde olan herhangi bir görseli kullanabilirsiniz.

Image for post
Image for post

Background (Arka Plan)

Butonunuzun arka plan resmidir. Arka plan resmi, başlığının ve ön plan görselinin arkasında görüntülenir.

Image for post
Image for post

Edge Insets (Hizalama)

Buton içerisinde bulunan başlık, görsel ve ikisinin aynı anda buton içerisinde konumlandırmasını düzenleyebilirsiniz. Örneğin başlık — görsel, başlık — buton veya görsel — buton arasındaki mesafeleri değiştirebilirsiniz.

Üç farklı inset türü vardır, bunlar;

ContentEdgeInset: Tüm butonun içeriğini çevreleyen dikdörtgenin (başlık + görsel) butonun duvarlarına olan uzaklığı.

Image for post
Image for post

TitleEdgeInset: Butonun başlık metni çevresindeki dikdörtgenin etrafına olan uzaklığı.

Image for post
Image for post

ImageEdgeInset: Butonun resminin çevresindeki dikdörtgenin etrafına olan uzaklığı.


Bu yazımızda UIKit kütüphanesinin en çok kullanılan arayüz elementlerinden biri olan UIButton’ın nasıl oluşturulacağını ve özelleştirilebileceğini öğrenmiş olduk. Sizler de bu özellikleri kendinize göre düzenleyip farklı kullanım senaryolarına göre adapte edebilirsiniz. “Swift ile UIKit” serisinin gelecek yazılarında görüşmek üzere! Kendinize iyi bakın 😀

TurkishKit

Apple dünyasında sınırları belirleyecek nitelikte…

Halil Özel

Written by

Android Developer 👨🏻‍💻

TurkishKit

Apple dünyasında sınırları belirleyecek nitelikte uygulamalar tasarlamak ve geliştirmek isteyen lise & üniversite öğrencilerinin buluşma noktası.

Halil Özel

Written by

Android Developer 👨🏻‍💻

TurkishKit

Apple dünyasında sınırları belirleyecek nitelikte uygulamalar tasarlamak ve geliştirmek isteyen lise & üniversite öğrencilerinin buluşma noktası.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store