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 ;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import UIKit
class ViewController: UIViewController {
@IBOutlet var okButton: UIButton!
@IBOutlet var adTextField: UITextField!
@IBOutlet var soyadTextField: UITextField!
@IBOutlet var adSoyadLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
|
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.
|
1
2
|
@IBAction func okButtonClicked(sender: AnyObject) {
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
|
override func viewDidLoad() {
super.viewDidLoad()
okButton.addTarget(self, action: “buttonTapped”, forControlEvents: UIControlEvents.TouchUpInside)
}
func buttonTapped()
{
println(“Butona tıklandı”)
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* Buton’a bir şeyler yaptırmamız için her iki methodu da kullanabilirsiniz. */
@IBAction func okButtonClicked(sender: AnyObject)
{
println(“StoryBoard’dan eklediğimiz action methodu”)
ad = adTextField.text
soyad = soyadTextField.text
adSoyadLabel.text = ad + ” “ + soyad
}
func buttonTapped()
{
println(“Butona target olarak eklediğimiz method”)
}
|
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 ;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
import UIKit
class ViewController: UIViewController {
@IBOutlet var okButton: UIButton!
@IBOutlet var adTextField: UITextField!
@IBOutlet var soyadTextField: UITextField!
@IBOutlet var adSoyadLabel: UILabel!
var ad : String = “” ;
var soyad : String = “”;
override func viewDidLoad() {
super.viewDidLoad()
okButton.addTarget(self, action: “buttonTapped”, forControlEvents: UIControlEvents.TouchUpInside)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
/* Buton’a bir şeyler yaptırmamız için her iki methodu da kullanabilirsiniz. */
@IBAction func okButtonClicked(sender: AnyObject)
{
println(“StoryBoard’dan eklediğimiz action methodu”)
ad = adTextField.text
soyad = soyadTextField.text
adSoyadLabel.text = ad + ” “ + soyad
}
func buttonTapped()
{
println(“Butona target olarak eklediğimiz method”)
}
}
|
Ş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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* Burada TextView’e kısa bir yazı ekleyip özelliklerini değiştiriyoruz*/
@IBAction func kısaYazıTıklandı(sender: AnyObject)
{
self.textView.selectable = false;
self.textView.editable = false;
self.textView.text = “Akıllı Yazılım Swift Dersleri !”;
}
/* Burada ise TextView’e uzun bir yazı ekleyip özelliklerini değiştiriyoruz */
@IBAction func UzunYazıTıklandı(sender: AnyObject)
{
self.textView.selectable = true;
self.textView.editable = true;
self.textView.text = “Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.”;
}
|
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.
