Aujourd’hui nous allons voir comment générer des QRCodes sur iOS en utilisant les librairies natives fournis par Apple. L’ensemble du code de ce tutoriel est comme d’habitude disponible sur github. Bonne lecture !
Avant d’entrer dans le coeur du sujet nous allons commencer par créer les fondations de notre application de création de QRCode. Pour cela ouvrez Xcode, ensuite créez un nouveau projet en utilisant le modèle Single View Application que vous appellerez après QRCodeGenerator. Maintenant ouvrons le storyboard et préparons notre interface graphique :
Pour ce faire nous aurons juste besoin de 2 éléments :
- 1
UITextField
que nous appelleronsqrcodeTextField
. - 1
UIImageView
que nous appelleronsqrcodeImageView
.
Pensez aussi à lier la ViewController
comme UITextFieldDelegate
pour savoir quand le texte de qrcodeTextField
change :
import UIKit
class ViewController: UIViewController, UITextFieldDelegate {
@IBOutlet weak var qrcodeTextField: UITextField!
@IBOutlet weak var qrcodeImageView: UIImageView!
// MARK: - Updating the QRCode
func updateQRCodeImageWithText(text: String) {
print(text)
}
// MARK: - UITextField Delegate Methods
func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool {
if let text = textField.text {
let newText = (text as NSString).stringByReplacingCharactersInRange(range, withString: string)
updateQRCodeImageWithText(newText)
}
return true
}
}
Dans cet example nous avons lier nos éléments à notre contrôleur, nous avons également implémentés la méthode textField(_: shouldChangeCharactersInRange: replacementString:)
afin de réagir à chaque changement de texte en appellant la méthode updateQRCodeImageWithText(_:)
qui va se charger de générer notre QRCode et de l’afficher correctement. Pour le moment cette méthode affiche change changement sur la console.
Générer un QRCode
Pour générer un QRCode rien de plus simple. Apple fournit une bibliothèque CIImage
qui nous permet de faire cela très facilement que nous devons au préalable importer :
import CoreImage
Maintenant nous allons générer une image contenant le QRCode avec le texte en entrée :
var qrcodeImage: CIImage?
func updateQRCodeImageWithText(text: String) {
if let data = text.dataUsingEncoding(NSISOLatin1StringEncoding, allowLossyConversion: false),
let filter = CIFilter(name: "CIQRCodeGenerator") {
filter.setValue(data, forKey: "inputMessage")
filter.setValue("Q", forKey: "inputCorrectionLevel")
qrcodeImage = filter.outputImage
}
}
Ici nous déclarons tout d’abord une variable globale qrcodeImage
qui contiendra notre image. Puis dans la méthode updateQRCodeImageWithText(_:)
nous convertissons notre texte en NSData
en utilisant le NSISOLatin1StringEncoding
(recommendation d’Apple, mais NSUTF8StringEncoding
fonctionne aussi) et nous préparons un filtre CIQRCodeGenerator
qui permet de générer le code.Ensuite, après avoir créer notre filtre, nous renseignons 2 valeurs : l’inputMessage
qui contient le NSData
de ce que l’on souhaite générer et l’inputCorrectionLevel
qui définit la tolérance aux é-erreur du générateur :
- L : 7% de tolérance aux erreurs
- M : 15% de tolérance aux erreurs
- Q : 25% de tolérance aux erreurs
- H : 30% de tolérance aux erreurs
Une fois fini nous pouvons récupérer l’image générer par le filter. Cette image est une CIImage
avec 1 point de résolution pour les plus petits rectangles. Maintenant il nous faut convertir cette image en UIImage
pour l’afficher sur notre écran :
var qrcodeImage: CIImage? {
didSet {
if let image = qrcodeImage {
qrcodeImageView.image = UIImage(CIImage: image)
}
else {
qrcodeImageView.image = nil
}
}
}
Ici nous écoutons les changements sur la variable qrcodeImage
et nous la convertissons en UIImage
quand l’image est disponible avant de l’afficher dans qrcodeImageView
. Voilà le résultat :

didSet
de notre variable qrcodeImage
:let scaleX = qrcodeImageView.bounds.width / image.extent.width
let scaleY = qrcodeImageView.bounds.height / image.extent.height
let transformedImage = image.imageByApplyingTransform(CGAffineTransformMakeScale(scaleX, scaleY))
qrcodeImageView.image = UIImage(CIImage: transformedImage)
Comme expliqué avant, nous calculons le ratio entre l’image à afficher et l’image original avant de créer notre nouvel image taillée aux bonnes dimensions :
Voilà ! C’est finit. Vous pouvez maintenant générer autant de QRCode que vous le souhaitez. Vous pouvez retrouver le projet complet sur github.
Conclusion
Maintenant que nous sommes à la fin de ce tutoriel, j’espère vraiment que cette application, que nous avons construit étape par étape, vous aidera à créer vos propres QRCodes. Comme vous l’avez vue à travers la réalisation de ce prototype, il a été relativement simple de venir à bout de ce processus. Quoi qu’il en soit, la prochaine fois que vous aurez à intégrer la génération de QRCode à vos applications, vous serez en mesure de le faire !
À bientôt pour de nouvelles aventures.