How to generate QR codes in iOS
Generating QR codes might be a niché subject, but it can be nice to know how to generate QR codes on the phone rather than just scanning them using the phone’s camera, and generating them is surprisingly easy. Let’s have a look at a straightforward example where we create our QR code based on a string, and as a bonus, we will put some customization to it by splashing some colors to it.
First, of, let’s create our subclass of UIView so that we gain the ability to easily place our QR code where we want in the application.
The next thing that we need to do is to add a filter, more specifically a CIQRCodeGenerator CIFilter. This specific filter has been around since iOS 7.0, so it’s is not particularly new. For more information about available CI generator filters, you can head over to https://developer.apple.com/library/content/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/uid/TP30000136-SW142
The CIQRCodeGenerator filter
This particular filter takes two arguments:
inputMessage: The data to be encoded as a QR code. An NSData object whose display name is Message.
inputCorrectionLevel: A single letter specifying the error correction format. An NSString object whose display name is CorrectionLevel. Default value: M
Because the correction level is optional, we will stick with the default value of that key.
However, we need a public method on our class to set an input message to the generator. Let’s add the missing pieces and see where we end up.
The first thing you’ll probably notice is that we have added an image view to our QR code implementation. The reason is that we get a generated QR code as a CIImage and we need a place to show it on screen. We do the usual limbo to add the image view to the view hierarchy and set a frame to it.
As for the generateCode method, it takes a string, but internally, one of the first thing that it does is to transform the input string into data. This is then used as the input message for our QR code filter. We supply the data and expect a CIImage as the output of the filter. This is accessed using the .outputImage property on the filter. We take the value and create a new image and assign it to our image view that was mentioned earlier.
If you run this code in a playground, you’ll notice that the QR code in question is a bit blurry, so let’s fix that plus splash some color.
If you take this and add it to a playground, you’ll end up with something like this:
So here is what we did to achieve this result. To correct the issue with the image being blurry, we applied a transform filter and up the scale by ten. This is probably something that you’d like to tinker with to not sacrifice any performance, using a scale of ten is random to illustrate how the method works.
To set the color values that we want, we need to invert the colors and later mask the image so that the background becomes transparent.
For inverting, we use another CIFilter named CIColorInvert. This simply inverts the colors that were generated by the CIQRCodeGenerator, which are black and white. The input for that filter is the transformed image, and we use the key kCIInputImageKey, you’ll see this key being used when doing masking as well.
Now that we have an inverted image, it is time to apply a mask. For masking, we use a filter named CIMaskToAlpha. Just like the invert filter, it also takes an image as its input using the same key, kCIInputImageKey.
We are now done with a filter; it is time to put the pieces into place.
First, we set a tint color to our image view, this will be the color of the actual code. We proceed to set a background color to the actual image view; this will act as the background color for the code as we applied an alpha filter to our image.
Last put not least, it is time to set the generated image to the image view. Because we are working with the Core Image framework, we don’t have a UIImage yet. Lucky for us, UIImage as an initializer that takes a CIImage. The icing on the cake is when you set your UIImage to your UIImageView, you do that by adding .withRenderingMode(.alwaysTemplate). This last step is important as it will make the image adopt the tint color of the image view.
And there you have it; now you can generate your QR codes and personalize them by dashing your color schemes on them.
