SwiftUI’ da Şekil Çizimi

Custom Shape

Photo by Sander Dewerte on Unsplash

SwiftUI ile birlikte hazır olarak gelen bazı şekiller mevcut ancak bunlar her zaman işimizi görmeyebilir.

Built in Shapes

Kendi şeklimizi oluşturmak isteyebiliriz. Durum böyle ise SwiftUI bizden Shape Protokolünü entegre etmemizi bekliyor.

Shape Protocol

func path(in rect: CGRect) -> Path

Bu basit protokol sadece bu metodu doğrulamamızı bekliyor. Yani belirli bir frame (in rect: CGRect) içinde, bir çizim yapmamız bekleniyor.

Path çizmek için kullanabileceğimiz metodlara Xcode içerisinden de bakabilirsiniz, bir kısmını buraya yansıtmış olayım ve akabinde işe koyulalım.

Methods from SwiftUI Core

Bu metodlardan bazılarını (meşhurları) kullanarak bir kaç şekil çizelim.

• Pac - Man ᗧ

rect , bu şekli barındıracak frame i temsil eder.

1. move metodu, çizime başlamak istediğimiz noktayı belirlememizi sağlar. Şeklin merkezinden başlayacağımız için, başlangıç noktamızı buraya taşıdık.

2. addArc metodu ise, parametrelerden de anlayabileceğiniz üzere, belirli bir merkez, yarıçap ve başlangıç, bitiş açılarına göre bir çember çizmemiz için yardımcı olacak.

3. closeSubpath metodu da, şekil çiziminde, son kaldığımız yer ile başlangıç noktamızı (move diyerek belirlemiştik) birleştirir.

PacMan, endAngle: 270˚ & rotation: 45˚

Böyle bir görsel elde etmek için, 270˚ lik açı verebiliriz ve akabinde 45˚ şeklimizi çevirebiliriz.

Daha iyi anlaşılması açısından, endAngle parametresinin etkisini şu GIF ile takip edebiliriz.

endAngle demo

GIF’ teki açılar (0, 90..) dikkatinizi çekmiş olabilir, bunlar varsayılan (default) açılar, çizim yaparken bunları dikkate almalısınız (clockwise parametresine göre).

• Balon

balloon shape

Curve: Kavis, Eğim anlamlarına geliyor.

Balon şekli çiziminde de addCurve metodunu deneyimlemiş olduk.

Burada özet olarak, bulunduğumuz (başlangıç) noktadan, hedef noktaya ilerlerken, belirlediğimiz 2 kontrol noktasına göre hedefe (to point) varılır.
(Balonumuzun biraz daha tombik olması için de bu kontrol noktalarıyla oynayabiliriz.)

Ek olarak, Path’ in bu kontrol noktalardan geçeceğinin garantisi yok, sadece bu noktalara göre şekillendiğini bilelim. Zaten doğrudan kontrol noktasına gitmesini isteseydik bu amaçla addLine metodunu kullanırdık.

Şu görsel kavramamız için daha yardımcı olabilir.

https://developer.apple.com/documentation/uikit/uibezierpath/1624357-addcurve

• Üçgen

addLine kullanımına da değinmek amacıyla son olarak da üçgen çizelim.

Triangle Shape

Çizgi (Line) çizimlerinde, sadece nokta belirlememiz yeterli olduğundan en kolay metodun bu olduğunu düşünüyorum.

Burada ekstra olarak strokedPath metodunu kullandığımız dikkatinizi çekmiştir. Bu da bizden bir StrokeStyle parametresi istiyor, örnek olması açısından bir kaç parametresini doldurdum. Bu parametreler ile oynayarak çizgilerin kesişim noktalarının nasıl değiştiğini gözlemleyebilirsiniz.

Border, Fill, Stroke örnekleri

border, stroke, fill

Kod örneğinin çıktısı, sırasıyla görselde paylaşılmıştır.

fill ve stroke metodlarının Shape ler için olduğunu belirtelim. View leri de kapsamak adına, overlay kullanımının daha tercih edilebilir olduğunu düşünüyorum.
Yazıyı uzatmamak adına, ihtiyacınıza binaen yukarıdaki örneklere göre ya da referans olarak aşağıdaki bir kaç siteye de bakabilirsiniz.

SwiftUI : How to draw borders or strokes in SwiftUI?

How to add borders to SwiftUI views - Simple Swift Guide

Ekstra

Shape protokolü, Animatable protokolünü de içeriyor.

Bu protokol ile SwiftUI’ a Shape imizin hangi parametresi (ya da parametreleri) için animasyon konfigürasyonu yapabileceğini söyleyebiliriz.

PacMan çizimimiz için hızlıca kullanalım, hatırlarsanız endAngle parametresini kullanarak GIF’te hazırlamıştık. PacMan’ e şu kodu eklememiz yeterli.

AnimatableData hakkında şu yazı da faydalı olacaktır.

Animating complex shapes with AnimatablePair

Aşağıdaki repositoryleri inceleyip, Shape’ ler ile alakalı başka örneklere de göz atabilirsiniz.

EnesKaraosman/SwiftProgress

EnesKaraosman/StarView