There is a popular ZXing library for outputting / reading barcodes. It can output and read many different formats: QRCode, Aztec and others, more than 2 dozen. For reading codes, it has a ready control ZXingScannerView. A minimum of code is required to add this functionality to your application.
However, with the help of this library the code will be displayed canonically, in black and white. Consider the case when you need to portray a custom-looking code, for example, colored, with rounded elements or decorated in some other way (and so that it continues to be read well).
And real freedom of creativity opens only if you draw the code yourself - then everything is completely in your hands. This is what we will do with the example of a QR code.
The finished application is here .
This article implements an algorithm that is taken from the article: QR code generation algorithm , drawing using the SkiaSharp library is touched, and an example of application of a QR code generator with some decorative elements is given - highlighting, smoothing lines and background from a png file.
Explanations for implementation
Let's start by creating an empty Xamarin.Forms application. Create a new project in Visual Studio such as "Mobile App (Xamarin.Forms)", then select the "Blank" template. In the "Platforms" section, select any, SkiaSharp works on many platforms, including on android and iOS.
.Android and .iOS projects are left unchanged, we have a cross-platform implementation.
In a cross-platform project:
two background images were added - one for the entire page, and the other for the QR code. Please note that they have a Build Action “Embedded resource”.
The output is in the files MainPage.xaml and MainPage.xaml.cs
The ImageResourceExtension class for using images from resources in xaml.
All logic is in the QRCodeEncoder project. It is divided between classes:
- Encoder - encode a data string into a sequence of ones and zeros
- Renderer - correctly position the resulting data array, add overhead information and return the png file to Stream
The QR code generation algorithm has many reference books with numbers. What they all mean, see the article “QR Code Generation Algorithm” (see above).
Kanji encoding (for characters) is not implemented in the application.
Skiasharp
SkiaSharp is a cross-platform 2D drawing library for .NET. It is based on the Skia Graphics Library from Google. Available as a NuGet package:
nuget install SkiaSharp
Microsoft Documentation: SkiaSharp in Xamarin.Forms
All drawing takes place in the Draw method of the Renderer class. For example, some elements are made round, some are square:
canvas.DrawCircle() canvas.DrawRect()
some are highlighted:
var paint1 = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.DeepSkyBlue }; var paint2 = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.Red }; var paint3 = new SKPaint { IsAntialias = true, Style = SKPaintStyle.Fill, Color = SKColors.Gold };
and shows how to smooth the transition between adjacent elements.
Examples
And finally, examples of some interesting QR codes from the Internet:
