SwiftUI’da UIKit Bileşenlerine Erişim | SwiftUI Introspect

UIKit’in gücünü SwiftUI’da kullanmaya hazır mısın?

Photo by Maxwell Nelson on Unsplash

SwiftUI, 2019 Eylül ayında iOS 13 ile beraber çıkışını yaptığından beri Apple tarafından geliştiriliyor ve her sene daha da gelişmiş bir SwiftUI’ya sahip oluyoruz. Apple’ın ürünleri için geleceğin geliştirme ortamını sunup sunmadığı konusunda bir fikir belirtmeyeceğim. SwiftUI’ın çıkışının üzerinden 3 seneden fazla zaman geçmesine rağmen hala UIKit’in sağladığı avantajları sağlamaktan uzak olduğu noktalar var. Bu nedenle UIKit’e hala ihtiyaç duyuyoruz fakat SwiftUI kullanırken UIKit bileşenlerinin sağladığı fırsatlara erişmemize engel değil. SwiftUI Introspect ile SwiftUI View’lerinin sahip olmadığı özelliklere ulaşabiliyor ve değişiklikler yapabiliyoruz.

SwiftUI Introspect Nedir?

SwiftUI Introspect kütüphanesi daha komple bir SwiftUI deneyimi elde etme amacıyla geliştirilmeye başlanan bir kütüphane. SwiftUI Introspect, SwiftUI’da bulunan View’lerin özelleştirme olarak sahip olmadığı özellikleri UIKit bileşenlerine erişerek değiştirmemize imkan tanıyor. SwiftUI Introspect açık kaynak kodlu bir proje ve topluluğun desteğiyle geliştirilmeye devam ediliyor. Hatta SwiftUI’ın geleceğine de ışık tuttuğunu söyleyebilirim.

Tüm detayları SwiftUI Introspect kütüphanesinin GitHub repository’sinden öğrenebilirsiniz 👇

GitHub - siteline/SwiftUI-Introspect: Introspect underlying UIKit components from SwiftUI

SwiftUI Introspect Nasıl Kurulur?

1. Adım: File -> Add New Package

Yapılacak ilk adım Xcode’da projenizi açtıktan sonra File -> Add Packages adımını takip etmek. Aşağıda bulunan görselden takip edebilirsiniz 👇

Xcode’da projenizi açtıktan sonra File > Add Packages seçeneceğini seçerek ilerleyebilirsiniz.

2. Adım: SwiftUI Introspect’i Eklemek

Açılan ekranda arama kısmına SwiftUI Introspect kütüphanesinin GitHub Repository adresini yapıştırarak arayabilirsiniz.

https://github.com/siteline/SwiftUI-Introspect

Dependency Rule kısmında “Up to Next Major Version” seçeneğini seçmenizi öneririm. Buradaki Next Major kavramı kütüphane versiyonundaki ilk sayının artması anlamına geliyor. Örneğin şu anki 0.1.4 versiyonu yayınlansa dahi 1 ile başlayan bir versiyona güncellenmeyecek. Geliştiriciler Next Major update’leri projeleri derinden etkileyecek köklü değişikler olduğunda yapar. Bu da projenizdeki yapınızı bozabilir. Küçük güncellemeler ise projeleri derinden etkilemeyecek değişiklikleri barındırır.

Add to Project kısmından eklemek istediğiniz projeyi seçip sonrasında Add Package butonuna basarak kütüphaneyi projenize ekleyebilirsiniz.

Arama kısmına GitHub repository adresini yapıştırdıktan sonra SwiftUI Introspect kütüphanesi karşımıza geliyor.

Veee kurulum bitti ✅

Cocoapods ile kurulumuna göz atmak isterseniz kütüphanenin GitHub Repository’sine bakabilirsiniz.

Örneklerle İlerleyelim…

Uyarı! Gelecek SwiftUI sürümlerinde aşağıdaki Introspect yöntemleri güncelliğini yitirmiş olabilir ve uygulamanızın çökmesine neden olabilir.

Öncelikle çalışacağınız sayfalarda “import Introspect” yazarak Introspect kütüphanesini eklemeyi unutmayalım.

TextField ve TextEditor

SwiftUI’da TextField ve TextEditor’ün yeterince güçlü olmadığını düşünenlerdenim. Sürekli ZStack ile wrapped’leyip yeni özellikler eklemektense Introspect’in yardımıyla birçok güzel özelliğe erişebiliyoruz.

import SwiftUI
import Introspect
struct ContentView: View {
    @State var textField: String = ""
    @State var textEditor: String = ""
    
    var body: some View {
        VStack{
            TextField("", text: $textField)
                .padding(15)
                .background(Color.secondary)
                .cornerRadius(10)
                .introspectTextField { textField in
                    textField.autocapitalizationType = .none
                    textField.clearButtonMode = .always
                    textField.becomeFirstResponder()
                 }
                
            
            TextEditor(text: $textEditor)
                .padding()
                .background(Color.secondary)
                .cornerRadius(10)
                .introspectTextView { textView in
                    textView.autocapitalizationType = .none
                    textView.isSelectable = true
                    textView.backgroundColor = .systemGray
                    textView.bounces = false
                }
        }
        .padding()
        .font(Font.system(size: 20, weight: .semibold))
        .accentColor(Color.red)
        .foregroundColor(Color.black)
        
        
    }
}

ScrollView

ScrollView’de en azından benim ilk aradığım özelliklerden biri bounces özelliğini kapatabilmek oldu. Keşfedilecek daha çok özellik var :)

import SwiftUI
import Introspect
struct ContentView: View {
    var body: some View {
          HStack {
              ScrollView {
                  Text("ScrollView.introspectScrollView()")
              }
              .introspectScrollView { scrollView in
                  scrollView.layer.backgroundColor = UIColor.red.cgColor
                  scrollView.layer.cornerRadius = 20
                  scrollView.bounces = false
              }
ScrollView {
                  Text("child.introspectScrollView()")
                  .introspectScrollView { scrollView in
                      scrollView.layer.backgroundColor = UIColor.green.cgColor
                      scrollView.refreshControl = UIRefreshControl()
                  }
              }
          }
        .padding()
    }
}

Stepper

Stepper’i özelleştirmek tabii ki sadece SwiftUI ile mümkün fakat Introspect ile UIKit’in sağladığı özelliklere erişmenin yanında görünümünü değiştirmek de bir hayli kolaylaşıyor.

import SwiftUI
import Introspect
struct ContentView: View {
    var body: some View {
        Stepper(onIncrement: {}, onDecrement: {}) {
            Text("Stepper Green")
        }
        .introspectStepper { stepper in
            stepper.layer.borderColor = UIColor.black.cgColor
            stepper.layer.borderWidth = 2
            stepper.layer.backgroundColor = UIColor.green.cgColor
            stepper.layer.cornerRadius = 10
        }
        .padding()
    }
}

Daha fazlası?

Daha fazlası tabii ki var. SwiftUI Introspect’in desteklediği tüm SwiftUI View’larına kütüphanenin GitHub Repository’sinden bakabilirsiniz.

Hatta kendi selector’ünüzü geliştirerek SwiftUI Introspect yapılarınızı oluşturabilirsiniz. Kütüphanenin GitHub Repository’sinde ilgili alanında detaylar mevcut.

Yazıya ilgin için teşekkürler. Eğer içeriği beğendiysen alkışlarsan sevinirim :)