Swift | Dark Mode | 2020

Dark Mode iOS 13’te tanıtıldı ve WWDC 2019’da duyuruldu. İOS’a daha koyu bir tema ekler ve uygulamanız için de aynısını yapmanızı sağlar. Kullanıcılarınıza daha koyu bir tasarımda uygulamanızı tecrübe edebilmeleri için vermek harika bir ek.

Bu blog yazısında, Collect By WeTransfer uygulamasına Dark Mode desteğini ekledikten sonra deneyimlerimi sizinle paylaşacağım .

Devre Dışı Bırak ve Karanlık Modu devre dışı bırak

Karanlık Arayüz stilinin benimsenmesine dalmadan önce, nasıl çıkacağınızı kısaca açıklamak istiyorum. Uygulamanızı Xcode 11 kullanarak oluşturmaya başladığınızda, koyu görünümün varsayılan olarak etkin olduğunu fark edeceksiniz.

Karanlık modu desteği eklemek için zaman yoksa basitçe ekleyerek devre dışı can UIUserInterfaceStyleadresinden Müşteri Info.plistyönelik olarak ayarlayın ve Light.

Görünüm denetleyicisi başına Karanlık Modu geçersiz kılma

Her denetleyici için kullanıcı arabirimi stilini geçersiz kılabilir ve aşağıdaki kodu kullanarak onu aydınlık veya karanlık olarak ayarlayabilirsiniz:

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        overrideUserInterfaceStyle = .dark
    }
}

Görünüm başına Karanlık Modu geçersiz kılma

Tek bir UIViewörnek için aynısını yapabilirsiniz :

let view = UIView()
view.overrideUserInterfaceStyle = .dark

Pencere başına Karanlık Modu geçersiz kılma

Dark Mode’u program aracılığıyla devre dışı bırakmak istiyorsanız, pencere başına kullanıcı arayüzü stilini geçersiz kılmak kullanışlı olabilir:

UIApplication.shared.windows.forEach { window in
    window.overrideUserInterfaceStyle = .dark
}

keyWindowPaylaşılan özellik UIApplicationiOS 13’ten itibaren kullanımdan kaldırıldığı için, burada windows dizisini kullandığımızı unutmayın. Uygulamalar, artık hepsinin ekli bir pencereye sahip olan birden fazla sahneyi destekleyebileceği için kullanımı önerilmez.

Test için Karanlık Modu Etkinleştirme

Uygulamanızda daha koyu bir görünüm uygulamaya başlarsanız, iyi bir sınama yöntemi olması önemlidir. Görünüm modunu etkinleştirmek ve değiştirmek için, hepsinin yararı olan birçok yolu vardır.

Simülatörde Karanlık Modu Etkinleştirme

Simülatörünüzdeki Ayarlar uygulamasında Geliştirici sayfasına gidin ve Koyu Görünüm için düğmeyi açın:

Bir Aygıtta Koyu Modu Etkinleştirme

Bir cihazda, Ayarlar uygulamasındaki Ekran ve Parlaklık sayfasına giderek Koyu Modu etkinleştirebilirsiniz. Ancak, geliştirme sırasında karanlık ve aydınlık modları arasında hızlıca geçiş yapmak için Kontrol Merkezine bir seçenek eklemek çok daha kolay:Kontrol Merkezi’nden karanlık ve aydınlık modu arasında hızla geçiş yapın

Karanlık Modunu hata ayıklama menüsünden değiştirme

Xcode’da simülatör açıkken çalışırken, bunun yerine Ortam Geçersiz Kılmaları penceresini kullanmak isteyebilirsiniz. Bu, hata ayıklama sırasında hızlıca görünüm değiştirmenize olanak sağlar:

Not: Bu seçeneği görmüyorsanız, bir iOS 12 veya daha düşük bir cihazda çalışıyor olabilirsiniz.

Storyboard’larda Karanlık Modu Etkinleştirme

Bir Storyboard içindeki görüşleriniz üzerinde çalışırken, Storyboard’un içindeki görünümü karanlık olarak ayarlamak faydalı olabilir. Bu seçeneği alttaki cihaz seçiminin yanında bulabilirsiniz:

Görünümlerde, denetleyicileri ve pencerelerde Koyu Modu geçersiz kılma

Bir önceki bölüm, tüm uygulama boyunca Işık Modu’nu etkinleştirme ve devre Info.plistdışı bırakmayı, görünüm başına, görünümü denetleyiciyi veya pencereyi kullanarak veya devre dışı bırakmayı kapsıyordu . Bu, geçici olarak Karanlık görünümünü test etme amacıyla zorlamak istiyorsanız bu harika bir yoldur.

Karanlık Mod için renkleri ayarlama

İOS 13’teki Dark Mode ile Apple, uyarlanabilir ve anlamsal renkler de tanıttı. Bu renkler, modal sunumda bulunmak ya da olmamak gibi çeşitli etkilere göre otomatik olarak ayarlanır.

Uyarlanabilir renkler açıklandı

Uyarlanabilir renkler otomatik olarak mevcut görünüme otomatik olarak uyarlanır. Uyarlanabilir bir renk, farklı arayüz stilleri için farklı bir değer döndürür ve bir sayfadaki modal sunum stili gibi sunum stillerinden de etkilenebilir.

Anlamsal renkler açıkladı

Anlamsal renkler niyetlerini açıklar ve uyarlayıcıdır. Bir örnek, labeletiketler için kullanılması gereken anlamsal renktir. Basit değil mi?

Onları amaçladıkları amaç için kullandığınızda, mevcut görünüm için doğru şekilde oluşturulur. labelÖrnek otomatik ışık modu ve karanlıkta beyaz siyah metin rengi değişir.

Mevcut tüm renkleri keşfetmek ve gerçekten ihtiyacınız olanları kullanmak en iyisidir.

Uyarlanabilir ve anlamsal renkleri keşfetme

Mümkünse, projenize anlamsal ve uyarlanabilir renkler uygulayabiliyorsanız Karanlık Modu benimsemek çok daha kolay olacaktır. Bunun için, Aaron Brethorst’un SemanticUI uygulamasını her iki görünüşte mevcut tüm renklerin genel bir bakışını görmenize izin veren son derece tavsiye ederim .

İOS 12 ve sonraki sürümlerinin anlamsal renklerle desteklenmesi

Anlamsal renkleri kullanmaya başlar başlamaz, sadece iOS 13 ve üstünü desteklediklerini fark edeceksiniz. Bunu çözmek için UIColor.init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)yöntemi kullanarak kendi özel UIColor sarıcımızı oluşturabiliriz . Bu, iOS 12 ve daha düşük sürümler için farklı bir renk döndürmenizi sağlar.

public enum DefaultStyle {

    public enum Colors {

        public static let label: UIColor = {
            if #available(iOS 13.0, *) {
                return UIColor.label
            } else {
                return .black
            }
        }()
    }
}

public let Style = DefaultStyle.self

let label = UILabel()
label.textColor = Style.Colors.label

Bu yaklaşımın bir başka yararı da kendi özel Style nesnesini tanımlayabilmenizdir. Bu, temaya izin verir, ancak uygulama boyunca renk kullanımınızı bu yeni Stil yapılandırmasını kullanmaya zorlandığında daha tutarlı hale getirir.

Özel bir anlamsal renk oluşturma

Özel bir anlamsal renk daha önce açıklanan UIColor.init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)yöntem kullanılarak yaratılabilir .

Çoğu zaman, uygulamanızın kendine özgü renk tonu rengi vardır. Bu renk Işık modunda harika çalışıyor ama Karanlıkta daha az çalışıyor olabilir. Bunun için mevcut arayüz stiline göre farklı bir renk verebilirsiniz.

public static var tint: UIColor = {
    if #available(iOS 13, *) {
        return UIColor { (UITraitCollection: UITraitCollection) -> UIColor in
            if UITraitCollection.userInterfaceStyle == .dark {
                /// Return the color for Dark Mode
                return Colors.osloGray
            } else {
                /// Return the color for Light Mode
                return Colors.dataRock
            }
        }
    } else {
        /// Return a fallback color for iOS 12 and lower.
        return Colors.dataRock
    }
}()

userInterfaceStyleMevcut özellik koleksiyonundaki özellik kullanılarak karanlık mod algılanabilir . darkSize ayarlandığında mevcut görünümün karanlık olarak ayarlandığını bilirsiniz.

Kenarlık renkleri, Karanlık Mod için dinamik olarak güncellenmiyor

CALayers ile uyarlanmış renkler kullandığınızda, uygulamada canlı görünüm değiştirirken bu renklerin güncellenmediğini fark edeceksiniz. Bu yöntemi kullanarak çözebilirsiniz traitCollectionDidChange(_:).

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    /// Border color is not automatically catched by trait collection changes. Therefore, update it here.
    layer.borderColor = Style.Colors.separator.cgColor
}

Karanlık Mod için Varlıkları ve Görüntüleri Güncelleme

Tüm renkleri güncellemeyi bitirdikten sonra uygulamanızdaki varlıkları güncelleme zamanı geldi.

Bunu yapmanın en kolay yolu, bir Görüntü Varlık Kataloğu kullanmaktır. Her görünüm için ekstra bir görüntü ekleyebilirsiniz.

Bu, görüntünüzü de uyarlanabilir yapar ve görüntüyü geçerli arayüz stiline göre ayarlar.

Resimlere ve simgelere renk tonu uygulama

Her görünüm için ekstra varlık eklemek her zaman en iyi seçenek değildir. Sonunda, uygulama boyutunu daha büyük hale getirir.

Bu nedenle, iyi bir alternatif, renk tonu ile kullanılabilecek görüntüleri aramaktır. Bu, özellikle araç çubukları ve sekme çubuklarında kullanılan simgelerle harika çalışır.

Öncelikle, öğenin şablon olarak oluşturulmasını sağlamalısınız:

Aynısını kodda da yapabilirsiniz:

let iconImage = UIImage()
let imageView = UIImageView()
imageView.image = iconImage.withRenderingMode(.alwaysTemplate)

Bundan sonra, simgenin geçerli görünüme göre rengini ayarlamasını sağlamak için resim görünümü renk tonunu kolayca ayarlayabilirsiniz:

imageView.tintColor = Style.Colors.tint

Renkler için bir çözüm olarak renkleri ters çevirme

Renkleri ters çevirmek, uygulama boyutunu kaydetmenin başka bir yolu olabilir. Bu her görüntü için her zaman işe yaramaz, ancak paketinize başka bir varlık eklemenizi önleyen bir çözüm olabilir.

Aşağıdaki UIImageuzantıyı kullanarak bunu yapabilirsiniz :

extension UIImage {
    /// Inverts the colors from the current image. Black turns white, white turns black etc.
    func invertedColors() -> UIImage? {
        guard let ciImage = CIImage(image: self) ?? ciImage, let filter = CIFilter(name: "CIColorInvert") else { return nil }
        filter.setValue(ciImage, forKey: kCIInputImageKey)

        guard let outputImage = filter.outputImage else { return nil }
        return UIImage(ciImage: outputImage)
    }
}

Görünüm güncellendiğinde görüntünüzü el ile güncellemeniz gerekir. Bu nedenle, yöntemi aşağıdaki şekilde kullanmanız önerilir:

// MARK: - Dark Mode Support
private func updateImageForCurrentTraitCollection() {
    if traitCollection.userInterfaceStyle == .dark {
        imageView.image = originalImage?.invertedColors()
    } else {
        imageView.image = originalImage
    }
}

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    updateImageForCurrentTraitCollection()
}

Sonuç

Uygulamanıza Dark Mode’u uyarlamak için birçok ipucu sunduk. Anlamsal ve Uyarlanabilir Renk kullanmanın yararlarını da açıkladık. Umarım, bu Karanlık Modu biraz daha etkili bir şekilde uygulamanıza yardımcı oldu!