TextField İçine Resim Koymak

Basit TextField tasarımına son verin 🛠 TextField içine resim koymak istiyorsanız bu dersi kaçırmayın!

Storyboard kullanmayı ne kadar sevsek de bazı işleri kod yazarak halletmemiz gerekiyor. TextField içine resim koymak da bunlardan biri.

Bu yüzden Storyboard u birlikte kullanacağız.

 

Uzatmadan başlayalım 🔨

 

TextField İçine Resim Koymak: Örnek Proje

Hemen şekildeki gibi örnek bir proje yaratalım, olayı anlamak açısından bir tane TextField koymak yeterlidir.

0*yFMhcWWZF3USWAHp.png

Projemizde sanki kullanıcı adı aldığımızı varsayalım ama şu an TextField çok sade gözüküyor. Şimdi resim ekleyeceğiz.

Bunun için internette görsel olarak ‘username icon png’ anahtar kelimeleriyle arama yapalım ve beğendiğimiz bir ikonu indirip boyutunu 20 piksel olarak değiştirelim. Bu ikonu TextField alanımızın hemen solunda kullanacağız.

Kullanıcı adı bilgisi alacağımızı farzedersek bir adet kafa ikonu iş görecektir 👤

Aslında 40 ve 60 piksel olan versiyonlarını da projeye eklesek güzel olurdu fakat bunu farklı bir yazıda sebepleriyle beraber anlatacağım. Şimdilik böyle kalsın.

 

ViewController sınıfına girelim, TextField ın bağlantısını yapalım ve usernameTF ismini verelim.

Sınıfın bittiği son süslü parantezden sonra aşağıdaki extension modülünü yazalım

 

Böylelikle ne zaman TextField ile işlem yapacak olsak bu extension modülü içerisindeki metodlar bizim için hazır ve nazır olacak 🙂

Bu modülde kısaca şunları yazmış olduk:

  • UIView yarat ve ölçülerini belirle
  • ImageView yarat ve ölçülerini belirle
  • UIView, ImageView i subclass ı olarak kabul etsin
  • TextField ın soldaki view i bizim yarattığımız UIView olsun

 

Ayrıca farklı sınıflarda yeniden bu extension modülünü yazmamıza gerek yok, istediğimiz yerden çağırabiliriz.

Şimdi Asset klasörünü açalım ve indirdiğimiz ikonu buraya sürükleyelim.

Screen Shot 2018-09-18 at 1.06.32 PM.png

Resme ‘person’ ismi verirsek bu yazıyla beraber paralel gitmiş oluruz.

Sınıfın yukarısına gelelim ve değişkenlerimizi belirttiğimiz kısımda bir UIImage instance i yaratalım:

 

myIcon burada Asset klasörü içine sürüklediğimiz resmi temsil ediyor. Şimdi son olarak bu resmi usernameTF de kullanalım. Bunun için viewDidLoad içinde aşağıdaki kodu çalıştırmamız gerek:

0*ZV1rmG8miABn8SZZ.png

 

Sonuç

Evet, TextField ımızın içine ikonu yerleştirdik.

 

İlk haline göre daha güzel duruyor değil mi?

 

TextField içine resim koymayı isterseniz farklı kütüphaneler ile de birleştirebilirsiniz. Örneğin CocoaPods Kullanımı adlı dersimizde CocoaPods öğrenirken örnek olsun diye TextField görünümünü değiştirmiştik. CocoaPods Kullanımı dersine mutlaka göz atın.

 

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

 

Özellikle fenerbahçeli arkadaşlardan yorum, görüş, öneri bekliyorum 🙂

 

İyi kodlamalar 💻

1
Kimler Neler Demiş?

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Telefon Numarası Formatlamak - iOS Notları Recent comment authors
  Subscribe  
En Yeniler Eskiler Beğenilenler
Bildir
trackback

[…] bir şey yapmak isteseniz TextField İçine Resim Koymak dersine göz atmanızı tavsiye […]