Afficher du HTML dans SwiftUI

Posté le 14 août 2021 de didier

La vue texte de SwiftUI ne permet pas (encore) d’afficher du texte enrichi. C’est l’occasion de créer une vue sur mesure, basée sur une vue existante de l’UIKit.
UILabel permet l’affichage de texte enrichi, et la classe NSAttributedString peut convertir du html.

Commençons par créer un wrapper pour la vue UILabel. On utilise pour cela le protocole UIViewRepresentable.

struct AttributedText: UIViewRepresentable {
    typealias UIViewType = UILabel

    var attributedString : NSAttributedString
        
    func makeUIView(context: Context) -> UILabel {
        let uiLabel = UILabel()
        return uiLabel
    }
    
    func updateUIView(_ uiView: UILabel, context: Context) {
        uiView.attributedText = attributedString
    }
}

Cette vue prend en paramètre une NSAttributedString pour l’afficher dans un UILabel.

Le protocole UIViewRepresentable utilise UIViewType, qui est un associatedtype, c’est à dire un type abstrait qui n’est défini que lors de l’implémentation du protocole.
Avec typealias, nous donnons une valeur définitive à ce type abstrait, ce qui nous permet de déclarer les fonctions du protocole avec UILabel.
Le protocole UIViewRepresentable requiert également une fonction makeUIView, qui doit retourner la vue UIKit souhaitée.
Enfin, La fonction updateUIView est appelée lorsque la vue doit être rafraîchie. Nous y mettons à jour le texte de l’UILabel.

Pour la conversion html, NSAttributedString propose un constructeur qui converti une Data. Si nous partons d’une variable String, nous devons d’abord la convertir en Data. Nous devons également prendre en compte le cas d’échec de la conversion. Dans l’exemple nous retournons une chaine vide :

var attributedString:NSAttributedString
let data = htmlText.data(using: .utf8)!
do {
    attributedString = try NSAttributedString(data: data,
		options: [
			.documentType: NSAttributedString.DocumentType.html,
            .characterEncoding: String.Encoding.utf8.rawValue
        ],
    	documentAttributes: nil)
}
catch {
    attributedString = NSAttributedString(string: "")
}

Il ne reste qu’à utiliser la vue sous cette forme :

AttributedText(attributedString: aString)

Partager :