SwiftUI: Touch Bar
2016'da MacBook Pro ile tanıtılan Touch Bar’ı SwiftUI ile uygulamanızda destekleyin!
Merhaba sevgili TurkishKit okuyucuları. 👋 Bu yazımızda, bazı MacBook’larda bulunan bir donanım olan Touch Bar’ın SwiftUI ile etkin bir şekilde kullanımını inceleyeceğiz. 💻
Öncelikle biraz Touch Bar’dan bahsedelim. Retina ekrana sahip olmasına rağmen Apple’a göre bir çıktı yerine girdi birimi olan Touch Bar, 2016 yılında ilk kez karşımıza çıkmıştı. Touch Bar’ın genel amacı, kullanıcıların yapmak istedikleri hareketleri daha hızlı yapması olarak düşünülebilir.
Touch Bar’daki kullanılabilir alan bir hayli küçük olduğu için kodlamanın yanında tasarım konusunda da dikkatli olmanız gerekiyor. Bu sebeple bir uygulama geliştirmeden önce Human Interface Guidelines’a göz atabilirsiniz.
İlk yıllarda escape tuşunu da içinde barındıran Touch Bar, 2019 yılında 16" MacBook Pro ile birlikte bir boyut değişikliğine uğramış, escape tuşu fiziksel bir tuşa çevrilmişti.
Uygulamamızda Touch Bar’ı kullanmadan önce başka geliştiriciler tarafından yapılmış olan örneklere bakmak da işimize yarayabilir.
Touch Bar, SwiftUI’da AppKit kadar detaylı bir şekilde kontrol edilemese de basit özellikler destekleniyor. Bunlardan en önemlisi, tabii ki de butonlar.
Şimdi, Xcode’dan macOS uygulaması için bir proje oluşturalım. Uygulamanın ismi için SwiftUITouchBar’ı kullanabiliriz.
Daha sonra aşağıdaki kodları uygulamamıza ekleyerek yazı yazabileceğimiz bir yer oluşturalım.
import SwiftUIstruct ContentView: View {
@State private var text = ""
var body: some View {
TextField("Buraya tıklayın", text: $text)
.frame(width: 170)
.padding()
}
}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Şu an basit bir uygulama oluşturduk. Uygulamamızda TextField kullanmayı tercih etmemizin sebebi ise gayet basit. SwiftUI’da Touch Bar’ı kullanabilmek için imleç ile odaklanılabilir bir arayüz elemanına ihtiyaç duyuyoruz. Buradaki durumda ise yazdığımız arayüzün Touch Bar’da gözükmesi için kullanıcının metin alanına tıklamış olması gerekiyor.
Ana penceredeki arayüzümüzü oluşturduğumuza göre Touch Bar’a geçmeye hazırız.
Not: Cihazınızda Touch Bar bulunmuyorsa Xcode’da Command+Shift+8 kısayolunu kullanarak ekranınıza sanal bir Touch Bar yerleştirebilirsiniz.
Şimdi TextField’ın kodunu aşağıdaki ile değiştirelim:
TextField("Buraya tıklayın", text: $text)
.frame(width: 170)
.padding()
.touchBar(TouchBar {
Text("Merhaba Dünya! Touch Bar'dan selamlar👋")
})Üstteki kod ile touchBar metodunu kullanarak Touch Bar’da gözükecek bir yazı ekledik. Uygulamayı çalıştırıp metin alanına tıkladığımızda Touch Bar’ın görüntüsü aşağıdaki gibi olacak:
Ekranın solunda bizim yazdığımız arayüz elemanları bulunurken diğer elemanlar sistem tarafından otomatik olarak ekleniyor.
Şimdi ise ekrana bir buton ekleyelim. Bunun için touchBar metodunun içindeki kodu aşağıdaki ile değiştirelim:
TextField("Buraya tıklayın", text: $text)
.frame(width: 170)
.padding()
.touchBar(TouchBar {
Text("Merhaba Dünya! Touch Bar'dan selamlar👋")
Button("Hey, buraya dokun!") {
print("Merhaba")
}
})
Şimdi ise metin alanına tıkladığımızda bu şekilde bir görüntü ile karşılaşmamız gerekiyor.
Not: Butonların üstündeki mavi efekti kaldırmak için “.accentColor(nil)” modifier’ını kullanabilirsiniz.
Touch Bar’a ekleyebileceğimiz başka bir eleman ise Slider. Ekrana bir Slider eklemek için önce bir değişken oluşturmamız gerekiyor.
@State private var sliderValue = 0.0Üstteki kodla oluşturduğumuz değişken, Slider elementinin değerini tutacak. Şimdi de az önce koyduğumuz butonun yerine aşağıdaki kodları ekleyelim.
Slider(value: $sliderValue, in: 0…100)
.frame(width: 200)
Kodun çıktısı bu şekilde olacak. Gördüğünüz gibi, Slider elementi otomatik olarak macOS tasarımı yerine Touch Bar’daki tasarımında gösteriliyor.
Eğer buna gerçekten ihtiyacınız varsa veya Touch Bar’da çalışacak bir oyun geliştirmek isterseniz SpriteKit’i de kullanabilirsiniz. Örnek bir SpriteKit Scene’i oluşturmak için aşağıdaki kodu projeye ekleyelim.
import SpriteKitclass GameScene: SKScene {
let box = SKShapeNode(rectOf: CGSize(width: 30, height: 30))override func didMove(to view: SKView) {
addBox()
let move = SKAction.moveBy(x: 685, y: 0, duration: 10)
box.run(move)
} func addBox() {
box.name = “box”
box.position.y = 15
box.position.x = 0
box.fillColor = NSColor.red
self.addChild(box)
}
}
Böylece ekrana kırmızı bir kutu ekliyor, bu kutunun sağa doğru kaymasını sağlıyoruz. Şimdi SpriteKit Scene’ini SwiftUI’da gösterelim.
ContentView’ın içine aşağıdaki kodu ekleyelim:
var scene: SKScene {
let scene = GameScene()
scene.size = CGSize(width: 700, height: 300)
scene.scaleMode = .fill
return scene
}Şimdi touchBar metodunun içindeki kodu silerek oluşturduğumuz SpriteView’ı buraya koyalım.
.touchBar(TouchBar {
SpriteView(scene: scene)
})
İmleç ile metin alanına odaklandığımız zaman gördüğünüz gibi SpriteView, Touch Bar ekranında gösterilmeye başlanıyor.
Hatırlarsanız, SwiftUI WWDC 2019'da tanıtılırken macOS Namerizer adında bir uygulama gösterilmişti. Bu uygulama, Apple ekiplerinin bir sonraki macOS sürümü için isim bulmasına yardımcı oluyordu.
Her ne kadar Apple’ın tasarım prensiplerine uymasa da pratik yapabilmek için bu uygulamanın bir benzerini Touch Bar için geliştirmeye ne dersiniz?
Öncelikle ContentView’ın içinde WWDC’lerden gördüğümüz kadarıyla kullanılması olası isimleri taşıyan bir Array oluşturalım.
let names = [“Rancho Cucamonga”, “Weed”, “Avocado”, “Sea Lion”, “Goat Rock”, “Oxnard”, “Flying Squirrel”, “Colorado”, “Baby Deer”]Şimdi, eski Touch Bar arayüzünü silerek öncelikle sabit genişliğe sabit olan bir HStack oluşturalım. Genişlik olarak 630 pikseli baz alabiliriz.
Daha sonra sol tarafa yeni macOS sürümünün ismini taşıyacak Text elemanını, sağ tarafa da bu sürümün ismini oluşturmamızı sağlayacak butonu koyalım. İki elemanı birbirinden ayırmak için Spacer kullanabiliriz.
HStack {
Text(“Sıradaki sürüm: macOS Weed”)
Spacer()
Button(action: {}, label: {
Text(“Rastgele bir isim seç”)
Image(systemName: “die.face.5”)
})
}
.frame(width: 630)
İstediğimiz arayüzü oluşturduk. Sırada ise rastgele bir sürüm seçmek ve soldaki yazıyı güncellemek var.
Öncelikle, currentName adında bir değişken oluşturalım. Bu değişken, sıradaki sürümün şu anki ismini tutacak.
@State private var currentName = "Weed"Daha sonra, oluşturduğumuz butonun yapacağı aksiyona aşağıdaki kodu ekleyelim:
currentName = names.randomElement()!Böylece, butona basıldığında şu anki ismi kullanılabilir isimlerden rastgele bir tanesi ile değiştirebileceğiz. Son olarak ise sıradaki sürümü gösteren Text elemanını aşağıdaki şekilde değiştirelim:
Text(“Sıradaki sürüm: macOS \(currentName)”)Böylece, currentName’in değeri değiştiğinde yazımız da otomatik olarak güncellenecek. Şimdi uygulamayı tekrardan çalıştıralım.
Not: Touch Bar’ın ekran görüntüsünü almak için Command+Shift+6 kısayolunu kullanabilirsiniz.
Artık “Rastgele bir isim seç” tuşuna her bastığımızda sıradaki macOS sürümü için bir isim oluşturabiliyoruz.
SwiftUI’ın Touch Bar desteğindeki en büyük eksiklik, yeterli dokümentasyon olmaması. Kullanmak istediğiniz arayüz elementinin Touch Bar’da çalışıp çalışmadığını görebilmenin tek yolu bunu denemek.
Gördüğünüz gibi SwiftUI ile yazılmış bir macOS uygulamasında Touch Bar’ı kullanmak oldukça kolay. Siz de bu yolu kullanarak geliştirdiğiniz uygulamada kullanıcılarınız için kısayollar yaratabilirsiniz.
Bir sonraki makalede görüşmek üzere, takipte kalın. 👋
