Swift yuvarlatılmış köşeler ve animasyon

Yusuf Özgül
2 min readDec 23, 2018

--

Mobil uygulamada görünümün güzel olması çok önemlidir, kullandığımız görüntülerin köşelerinin her zaman keskin hatlara sahip olmasını istemeyiz. Xcode hala view ve görsellerin köşelerini yuvarlamak için kod kullanmadan düzenleme imkanı sunmuyor. Mecburen kodlarımızla bu işleri yapacağız.

Köşeleri yuvarlamak yani radius dediğimiz olay için .layer.cornerradius özelliğini kullanıyoruz.

blueView.backgroundColor = .blue
blueView.layer.cornerRadius = 25.0

blueView değişkenimizd viewDidLoad altında bu kodu verdiğimiz zaman uygulamamızda nasıl göründüğüne bakalım:

Kodumuzun sonucu

Tüm köşeler yuvarlamak işinizi görmemiş olabilir bunun için güzel haber iOS 11 ile birlikte istediğimiz köşeleri yuvarlayabiliyoruz.

Bunun için köşelerimizi belirtmek için anahtar kelimelerimiz:

  • layerMaxXMaxYCorner => alt sağ köşe
  • layerMaxXMinYCorner => üst sağ köşe
  • layerMinXMaxYCorner => alt sol köşe
  • layerMinXMinYCorner => üst sol köşe

Anahtar kelimelerimiz bunlar peki bunları nasıl kullanacağız? 🤔

if #available(iOS 11, *) 
{
blueView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]
}

Bu kodumuz istediğimiz köşeyi yuvarlatılmış olmasını sağlıyor. Nasıl görüldüğüne bi bakalım.

Sol üst ve sağ alt köşe istediğimiz şekilde yuvarlatılmış oldu.

Birde Animasyon Ekleyelim

UiView animasyonu ile köşelerin yuvarlatılmasını animasyonlu şekilde yapalım.

if #available(iOS 11, *) {
UIView.animate(withDuration: duration, animations:
{
self.blueView.layer.cornerRadius = radius
}, completion: { _ in
UIView.animate(withDuration: duration, animations:
{
self.blueView.layer.cornerRadius = 0
})
})
}
Bu şekilde animasyonlu olarak kullanabiliriz.

Originally published at Yusuf ÖZGÜL.

--

--