With the arrival of WeChat, QR codes are becoming more and more popular. You can see QR codes everywhere, such as in shopping malls, KFC, restaurants, etc. For QR code scanning we use Google’s open source framework Zxing. We can go to http://code.google.com/p/zxing/ to download the source code and Jar package. Before, the QR code scanning function in my project only implemented the scanning function, and its UI was really ugly. A good The UI interface of an application software must be accepted by the public, otherwise people will not use your software. Therefore, application software functions are as important as the interface. For example, WeChat, I believe that the WeChat UI has been imitated by many application software. I also imitated the effect of scanning the QR code on WeChat. Although it is not as refined as WeChat does, the effect is still good, so I will share with you the code for modifying the UI and the code for scanning the QR code. First, I will encounter problems in future projects. Directly copy and use the same function. The second is to give a reference to those who have not added the QR code function. Standing on the shoulders of giants, haha. I also stood on the shoulders of giants before adding this function. Next, follow I implemented this function step by step, removing many unnecessary files
Let’s look at the structure of the project first
If you want to do the same for your project To add this function, you directly copy the three packages com.mining.app.zxing.camera, com.mining.app.zxing.decoding, and com.mining.app.zxing.view to your project, and then introduce the relevant When entering the corresponding resources, I quoted them directly from my project. The package name has not been changed. Of course, I also need to quote Zxing.jar
com.example.qr_codescan package, which contains a MipcaActivityCapture , it also directly introduces the code of my previous project. This Activity mainly handles the scanning interface classes. For example, if the scan is successful, there will be sounds and vibrations, etc. It mainly focuses on the handleDecode (Result result, Bitmap barcode) method inside. After the scan is completed, the scan will The initial parameters of the result and the bitmap of the QR code are passed to handleDecode (Result result, Bitmap barcode). We only need to write the corresponding processing code in it. There is no need to change other places. I will handle the scanning here. Results and photos taken by scanning
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
I made my own changes to the layout of the MipcaActivityCapture interface. Let’s take a look at the renderings first. I mainly use FrameLayout, with RelativeLayout nested inside.
The layout code is as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
In it I wrote the upper part of the interface in another layout , and then include it, because this activity_title is also used by other activities in my project, I also copied it directly
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
In my demo, There is a main interface MainActivity with a Button, an ImageView and a TextView. Click the Button to enter the QR code scanning interface. When the scan is OK, return to the main interface and display the scanned results to TextView and the image to ImageView. Inside, you don’t need to process pictures. I’ll add pictures here. The layout of the main interface is very simple as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
The code inside MainActivity is as follows, inside The function has been mentioned above
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
|
The above code is still relatively simple, but if you want to make a scanning box like WeChat, follow the above The code does not have that effect. We must rewrite the ViewfinderView class under the com.mining.app.zxing.view package. The pictures in WeChat are all used. I drew them myself. The code comments are relatively clear. Everyone Just look at the code, I believe you can understand it. If you want to modify the size of the scanning frame, go to the CameraManager class and modify
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 |
|
In the above code, in the middle That line is the picture used by WeChat. I drew it here. If you want to be more simulated, change the following code
1 |
|
to
1 2 3 4 5 6 |
|
Go and find the scan line in WeChat yourself. The one I posted is distorted. Download the WeChat apk, change the suffix name to zip, and then unzip it
The code for drawing the font under the scanning box needs to be modified so that it can be automatically arranged in the middle according to the font. If the word is too long, I have not processed it. It needs to be automatically wrapped. You can handle it yourself
1 2 3 4 5 6 7 8 |
|
Screenshot of the running interface. The green line in the middle will move up and down, which is similar to the effect of WeChat. Of course, you also need the corresponding permissions to run it.
The above is the entire content of this article. I hope it will be helpful for everyone to learn Android software programming.
For more Android-based articles on realizing various QR code scanning effects based on google Zxing, please pay attention to the PHP Chinese website!