Swift Kod İle Önyüz Tasarımı

Merhabalar bu yazımda iOS için önyüz tasarımını storyboard kullanmadan nasıl yapabileceğimizden bahsedeceğim.

2.596

Merhabalar bu yazımda iOS için önyüz tasarımını storyboard kullanmadan nasıl yapabileceğimizden bahsedeceğim.

Öncelikle storyboard gibi sürükle-bırak mantığıyla çalışan ve gayet kullanışlı bir yapı varken neden kodlama ile tasarım yaparız bundan bahsedelim.

Storyboard üzerinden tasarım yaptığımız durumlarda önyüzün yeniden düzenlenebilirlik özelliğini çok kısıtlamış olmaktayız. Örneğin projenin ileri aşamalarında ilgili önyüzde bulunan birden fazla bileşenin arasına yeni bir bileşen koyulmak istenirse, storyboard üzerinde tüm çevre bileşenler bu durumdan etkilenecek ve düzenlemesi çok zor bir hal alacaktır.

Bir diğer kodlama ile önyüz tasarımına teşvik edici sebep ise yeniden kullanılabilirlik özelliğidir. Önceki projelerimizde ortaya koyduğumuz bileşenleri bir nevi kopyala-yapıştır yöntemiyle yeni projelerimizde kullanabiliriz. İlk projelerde kodlama ile önyüz tasarlamak çok uzun ve meşakatli gözükse de bu özelliğini düşününce gelecek için çok güzel bir birikimi de yanımızda getirdiğimizi göreceğiz.

Kısaca iOS Önyüzü 

iOS önyüzünde görünümlerin temeli “View”lara dayanmaktadır. “View”lar sizin belirteceğiniz boyutlarda ve konumda ekrana yerleşecektir. Bu yapıları kodlama yaparken çok kullanacağız. Bunun sebebi birden fazla önyüz bileşeninin aynı amaca hizmet ederken bir arada tutulmalarını kolaylaştırmaktır. Demek istediğimi yeniden ifade edersem bir “View” oluşturup ardından bu “View” üzerine diğer bileşenleri koyarsam elimde bir amaç uğruna birleşmiş bileşen bütünü olacaktır. Ardından oluşturduğum bu bütünü ekranda bir yere belirli bir boyutla konumlayıp tüm diğer bileşenlerin konumlarını başarıyla gerçekleştirmiş olurum.

Bir Örnek Giriş-Kayıt Ekranı Tasarımı

Sürekli teorik bilgi ile kodlama alanında tecrübe edinemeyeceğimiz ve konular havada kalmaması diye şimdi baştan bir örnek giriş-kayıt ekranı tasarımı yapalım.

Öncelikle yapmak istediğimiz ekranı sizlere göstermek istiyorum.

 

Şimdi tasarımı biraz inceleyelim. Görüldüğü gibi ekranda temelde 4 ana bileşen var.

  1. Profil fotoğrafı seçim ekranı
  2. Bir adet giriş-kayıt ekranını belirleyecek segment kontrolü
  3. Kayıt-Giriş formu
  4. Kayıt-Giriş butonu

Bileşenlerimizi yukarıdaki gibi belirlememiz bizim için çok önemlidir çünkü kodlama aşamasında bileşenleri konumlarken bize büyük kolaylık sağlayacaktır.

Adım adım kodlama aşamasına başlayalım.

  • Form Tasarımı

Form ekranda görüldüğü gibi bileşenlerin ortasında yer almaktadır peki biz neden işe ortadan başlıyoruz? Kodlama ile arayüz tasarımında bir diğer önemli husus ta proje ilerledikçe bileşenlerin konumlarını birbirine göre vereceğimizi öngörmektir. Ben tasarımı yaparken formu ekranın ortasına koyup diğer bileşenleri ona göre yerleştirmek istediğim için öncelikle onu oluşturup ekrana yerleştirmem gerekiyor.

Not: Eğer bir bileşen başka bir bileşene göre konum alıyorsa öncelikle konum aldığı bileşeni oluşturmalısınız. Aksi halde kod işlem sırasında onu oluşturacak öğe bulunmadığı için hata alacaksınızdır.

Öncelikle form yapımızı inceleyelim. Form üzerinde görüldüğü gibi kayıt ekranında 4 giriş ekranında 2 adet olmak üzere “textField”lar bulunmaktadır. Bu “textField”lar aynı amaca hizmet edeceklerinden bir “View” içerisinde toplanmaları bize kolaylık sunacaktır.

View Kod Sınıfı Oluşturma

“View” yapımızı xCode üzerinde oluşturmak için Cocoa Touch Class tipinde bir sınıf kullanacağız.

  • Öncelikle projemize “View” adında klasör oluşturalım. Bu işlemi proje klasörüne sağ tık yaparak “New Group” seçeneğini seçip yapabiliriz.

Ardından bir klasör oluşacaktır bu klasöre de “View” verelim.

  • Şimdi de “View” klasörüne sağ tıklayıp “New File” seçeğini seçerek bir View sınıfı oluşturalım.

“New File”a tıkladıktan sonra gelen ekranda “Cocoa Touch Class” seçiyoruz.

Bu aşamadan sonra karşımıza sınıfımıza vereceğimiz adı ve alt sınıfını soran ekran gelecektir. Burada sınıf adını oluşturduğunuz “View”ın amacını belli edecek şekilde koymanız yararınıza olacaktır. Ben “InputContainerView” koymayı tercih ediyorum. Siz “FormView” gibi başka seçenekleri de kullanabilirsiniz. Burada asıl önemli olan kısım ise alt sınıf seçeneğidir. Biz bir “View” yaratmak istediğimizden alt sınıfımız “UIView” olacaktır.

Tüm işlemleri yaptıktan sonra View klasörünün altında yeni sınıfımız oluşmuş olacaktır. Bu sınıfa tıklayarak kod ekranına alalım. Karşımıza boş bir sınıf ekranı çıkacaktır. Oluşturduğumuz sınıf bizim seçtiğimiz şekilde “UIView” sınıfını miras edinecektir.

Artık oluşturduğumuz “View”ı kodlamaya başlayabiliriz. Tüm önyüz bileşenlerine ait nesneler kendi “init” fonksiyonları ile yaratılmaktadır. Bu sebeple öncelikle “init” fonksiyonunu yazacağız.

Kod bloğunda yer alan “self.translatesAutoresizingMaskIntoConstraints = false” kodunu inceleyelim. “translatesAutoresizingMaskIntoConstraints” özelliği verilen bileşenin otomatik sınırlamalar içinde oluşup oluşmayacağını sormaktadır. Biz bileşenimize kendimiz sınırlar vereceğimizden bu değişkene “false” değerini veriyoruz.

Şimdi sıra geldi “View” üzerinde yer alacak olan “textField”ları oluşturmaya. Bu “textField”lar ayrı ayrı sınıflarda oluşturulabileceği gibi aynı sınıf içerisinde bir eleman olarak ta yapılabilir. Bizim yapımız bileşik bir yapı olacağından sınıfın elemanı olarak oluşturmamız daha gerekli gözükmektedir.

Her bir “textField”ı aşağıdaki şekilde oluşturuyoruz.

Tüm “textField”ları çağrılmaya hazır hale getirdik. Şimdi bir de “textField”lar arasına ayrıştırıcı koyalım.

Sırada tüm “textField”lar ve ayrışıtırıcılar için kurulum fonksiyonu yazmaya.

Kurulum fonksiyonlarında bileşenlerin yerleşimini belirledik. Şimdi baştan kodlardan bahsedelim.

Burada ad bilgisini alacak olduğumuz “nameTextField”ın sol tarafını, oluşturduğumuz “View”ın sol tarafının 10 piksel içerisine alıyoruz.

Not: “isActive” özelliğini “true” olarak ayarlamayı kesinlikle unutmamalıyız. Aksi halde verdiğimiz sınırlamaların hiçbir anlamı kalmayacak, boşa yazılmış olacaklardır.

Burada ise “nameTextField”ın üst tarafı “View”ın üst tarafından başlayacak şekilde belirtildi.

“nameTextField”ın eni “View”ın enine eşitleniyor.

Son olarak “nameTextField”ın yüksekliği belirleniyor. Burada yüksekliği bir değişkene atayarak yapıyoruz. Bunu yukarı gördüğüm şekilde de yapabilirdik fakat neden böyle yaptığımızı ileride konuşacağız.

Diğer tüm “textField”lar da benzer mantıkla kurulmuşlardır. Yalnızca bazılarının üst alanları diğerlerinin alt alanlarına gelecek şekilde düzenlenirler.

Son olarak sıra geldi tüm “textField”lar ve ayrıştırıcıların “View” üzerine eklenmesine. Bunun için de bir “createForm” adında fonksiyon yazıyoruz.

Her bir bileşeni önce alt ekran olarak ekleyip ardından kurulum fonksiyonunu çağırıyoruz. Burada da dikkat edilecek nokta bileşenlerin eklenme sırası ve eklenmeden kurulum fonksiyonlarının çağrılamayacağıdır.

Not: Yukarıdaki kodlarımızda arkaplan rengi ayarlarken 3 adet girdi alan bir fonksiyon kullandık bu sizde bulunmayacaktır. Bunu gerçekleştirmek için “UIColor” sınıfına bir eklenti yapıyoruz. Eklentimizde istediğimiz 3 girdiyi alan fonksiyonu aşağıdaki gibi yazabiliriz.

Böylece girdileri alacağımız “View” hazır hale gelmiştir. Şimdi “Controller” sınıfından çağıralım.

Öncelikle yukarıdaki gibi bir nesne yaratalım.

Ardından nasıl bir önceki sınıfımızda “textField”lar ve ayrıştırıcılar için kurulum fonksiyonları yazdıysak burada da tüm “View” için bunu yapacağız.

Kod bloğumuzda ilk satırda girdi ekranımızı hazır bulunan ekrana alt görünüm olarak ekliyoruz.

Devam eden 2 ve 3. satırda ise ekranın tam ortasında yer almasını sağlıyoruz.

4. satırımızda ise “View”ımızın enini ekran üzerinde hazır bulunan “View”ın eninden 24 eksik şekilde ayarlıyoruz. Bu işlemin mantığına bakmak gerekirse, hem görüntüyü en olarak ortalamış olduğumuz hem de 24 eksik yazdığımızdan sağ ve sol taraftan 12’şer piksel keserek ortalayacaktır.

Son olarak kurulum fonksiyonumuzu “viewDidLoad” fonksiyonundan çağırıyoruz.

Hatırlatma: “viewDidLoad” fonksiyonu, o an kullanılan “controller”ın görünümü hafızaya yüklendiği anda çağırılır.

İşin belki de en karmaşık aşamasını böylece bitirdik. Buraya kadar ki kısmı detaylıca anlattıktan sonra devam eden bileşenlerden daha kısa bahsedeceğim.

 

SegmentedController Sınıfı Oluşturma

Tüm bileşen sınıfları Cocoa Touch Class ile hazırlandığını bildiğimiz için burada da bu işlemi yapıyoruz. Bu kez alt sınıfı “UISegmentedController” yapıyoruz.

Yine bir “init” fonksiyonu yazacağız.

SegmentedController’ın kurulum fonksiyonunda diğerlerinden farklı olarak bir de segmentedController’ın değerini takip edecek ve değiştikçe yapılması istenen işlemi yapacak fonksiyonu işaret edecek özelliği ekleme kısmı vardır.

Burada segmentedController’ına bir amaç, hedef ekliyoruz. Bu amaç segmentedController’ın değeri değiştiği zaman gerçekleşecektir (for: .valueChanged). Aksiyon olarak ta ismi verilen fonksiyonu aktifleştirecektir ( action: #selector(handleLoginRegisterChanges).

“handleLoginRegisterChanges” fonksiyonuna aşağıda değineceğim.

imageView Oluşturma

Profil fotoğrafını seçmesi için kayıt ol ekranında bulunacak olan “imageView” için de alt sınıf olarak “UIImageView” alan sınıfı oluşturuyoruz.

 

Button Oluşturma

Son olarak tüm bilgiler dolduğunda giriş veya kayıt olmayı aktif hale getirecek butonumuzu yaratıyoruz.

 

SegmentedController’ın Değerine Göre Ekranın Değişmesi

İlk verdiğim fotoğraflarda göreceğimiz üzere segmentedController’da “Kayıt Ol” seçili olduğunda profil fotoğrafını seçebiliyoruz ve form üzerinde de doldurmamız gereken 4 alan oluyor. Bunun aksine, “Giriş” seçili olduğunda doldurulması gereken 2 alan ve profil fotoğrafı alanı kayboluyor. Bunları nasıl sağlıyoruz aşağıda göreceğiz.

Öncelikle “inputContainerView” kısmında bahsettiğim kısıtlamarı değişken ile vermek için değişkenleri yaratıyoruz.

Kısıtlamaları global olarak tanımlamak iyi olacaktır çünkü genelde kullanıldıkları birden fazla sınıf olacaktır. Ben bunu “Constant” adında boş bir sınıf yaratıp, değişkenleri veya sabitleri buraya yazarak gerçekleştiriyorum.

Şimdi “segmentedController”da bahsetmiş olduğum “handleLoginRegisterChanged” fonksiyonunu yazacağız.

Yazdığımız fonksiyonun içeriğine göz atalım.

Burada butonumuzun adını “segmentedController”ın seçili segmentine göre ayarlıyoruz. Yani biz “Kayıt Ol”u seçersek butonumuzun adı “Kayıt Ol” olacaktır.

Şimdi de değişken olarak tanımladığımız “inputContainerView”ın yüksekliğini yine “segmentedController”ın seçili segmentine göre ayarlıyoruz. “Giriş” tıklandığında ekranda yalnızca 2 adet doldurulması gereken “textField” olacağından “View”ın yüksekliğini azaltıyoruz.

Burada öncelikle “textField”ın aktif halde bulunan yükseklik kısıtlamasını etkisiz hale getirdik. Şimdi de yüksekliğini “segmentedController”ın değerine göre 0 veya tüm “inputContainerView”ın 1/4 katına eşitliyoruz. Kısıtlamayı tekrar aktif hale getirdikten sonra eğer “segmentedController”da “Giriş” seçili ise kaybolmasını istiyoruz.

Diğer tüm “textField”lar için aynı işlemi gerçekleştiriyoruz.

Son olarak ta “profileImageView”ı eğer “segmentedController”da “Giriş” seçili ise kaybolmasını için gereken ayarı yapıyoruz.

 

Tüm bu işlemler bittikten sonra elimizde basit bir “Giriş-Kayıt” ekranı oluşacaktır.

Mutlu günler dilerim.

 

Yazılmış olan kodlara buradan ulaşabilirsiniz.

Yorum yaz

Email adresiniz yayınlanmayacaktır.