摘要:
随着二维码的普及,扫码功能越来越重要,比起手动输入,扫码直接获取的方式会更加的便捷和快速,在iOS7之前,实现扫码一般是使用第三方的类库,如ZBar等,iOS7之后开始自行提供扫码的框架,在AVFoundation中包含有实现扫码的类,使用起来还是很方便的,本文通过一个例子讲述其用法。
我们要实现的是如下的效果:
左图有一个进入扫描界面的按钮和一个现实扫描结果的Label,右图是扫描的界面,有一个方框标识扫描区域,有一个上下运动的横线,有一段Label进行说明,现在来说明如何实现。
先创建一个SingleView的工程,在storyboard中的View中添加一个扫描按钮和一个显示扫描结果的Label,如上左图,并关联到.h文件中去。
此外我们右图中的区域标识方框和上下扫描运动的线条都是图片,所以我们要把图片添加到我们的工程中去,可以在我的工程中复制图片文件([email protected]和[email protected])。
我们使用的是iOS7之后自带的类库,但同样需要在我们的工程中进行引用,所以要在代码中加上以下内容:
#import <AVFoundation/AVFoundation.h>
我们使用苹果定义的方法来实现扫描界面的创建,在按钮的响应方法中:
- (IBAction)scan:(id)sender {// 按钮响应方法 //获取摄像设备 AVCaptureDevice * device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo]; //创建输入流 AVCaptureDeviceInput * input = [AVCaptureDeviceInput deviceInputWithDevice:device error:nil]; //创建输出流 AVCaptureMetadataOutput * output = [[AVCaptureMetadataOutput alloc]init]; //设置代理 在主线程里刷新 [output setMetadataObjectsDelegate:self queue:dispatch_get_main_queue()]; //初始化链接对象 self.session = [[AVCaptureSession alloc]init]; //高质量采集率 [self.session setSessionPreset:AVCaptureSessionPresetHigh]; [self.session addInput:input]; [self.session addOutput:output]; //设置扫码支持的编码格式(如下设置条形码和二维码兼容) output.metadataObjectTypes=@[AVMetadataObjectTypeQRCode,AVMetadataObjectTypeEAN13Code, AVMetadataObjectTypeEAN8Code, AVMetadataObjectTypeCode128Code]; self.layer = [AVCaptureVideoPreviewLayer layerWithSession:self.session]; self.layer.videoGravity=AVLayerVideoGravityResizeAspectFill; self.layer.frame=self.view.layer.bounds;// 设置照相显示的大小 [self.view.layer insertSublayer:self.layer atIndex:2];// 设置层级,可以在扫码时显示一些文字 //开始捕获 [self.session startRunning]; self.timer = [NSTimer scheduledTimerWithTimeInterval:.02 target:self selector:@selector(animation) userInfo:nil repeats:YES]; }
-(void)captureOutput:(AVCaptureOutput *)captureOutput didOutputMetadataObjects:(NSArray *)metadataObjects fromConnection:(AVCaptureConnection *)connection{ if (metadataObjects.count>0) { //[session stopRunning]; AVMetadataMachineReadableCodeObject * metadataObject = [metadataObjects objectAtIndex : 0 ]; //输出扫描字符串 NSLog(@"%@",metadataObject.stringValue); self.scanResult.text = metadataObject.stringValue;// 将结果显示在Label上 // 关闭扫描,退出扫描界面 [self.session stopRunning]; [self.layer removeFromSuperlayer]; } }
上面虽然实现了扫描功能,但我们的扫描界面就是个没有按钮的拍照界面一样,非常单一,一般的扫码界面,都会有方框有线条有说明,所以我们也来实现这个界面的优化,让其更加美观和习惯。
PS:一般其实还会对非扫描区域,也就是方框以外的区域进行虚化模糊,让用户将注意力集中到扫描方框内来,我查了一下大致是使用高斯模糊吧,还没有研究透彻,希望高手指导一下~
首先我们加上方框,之前我们有把方框的图片放到这里面来,这里就可以直接使用了,这里要说的一点是,我们的扫描界面并不是跳转到另外一个新的界面,而是在本界面上添加一个subview,和添加按钮、Label理论上是一样的,所以上面会有一个设置放置层级的代码:
[self.view.layer insertSublayer:self.layer atIndex:2];// 设置层级,可以在扫码时显示一些文字
同样的道理,我们要在扫描界面上添加方框,其实也就是在这个界面上添加一个ImageView,那么我们只要在添加扫描界面之后再添加方框图片,就可以在扫描界面上显示了,而方框图片的中间部分是透明的,所以并不会影响我们的扫描视野,所以在按钮的响应方法中,添加扫描界面之后,再添加方框的图片即可:
// 方框 CGRect screenBounds = [ [ UIScreen mainScreen ] bounds ]; self.rectImage = [[UIImageView alloc]initWithFrame:CGRectMake(30, (screenBounds.size.height - (screenBounds.size.width - 60))/2, screenBounds.size.width - 60, screenBounds.size.width - 60)]; self.rectImage.image = [UIImage imageNamed:@"pick_bg"]; [self.view addSubview:self.rectImage];
另外要注意的一点是,我们虽然加了一个方框,但并不意味着方框区域就是扫描有效区域了,这个有效区域是要进行设定的,在之前设置output属性时,添加代码如下:
[output setRectOfInterest:CGRectMake((screenBounds.size.height - (screenBounds.size.width - 60))/2/screenBounds.size.height, 30/screenBounds.size.width, (screenBounds.size.width - 60)/screenBounds.size.height, (screenBounds.size.width - 60)/screenBounds.size.width)];
以同样的方法,我们在方框下加一段文字来进行说明:
self.explainLabel = [[UILabel alloc] initWithFrame:CGRectMake(30, (screenBounds.size.height - (screenBounds.size.width - 60))/2 + screenBounds.size.width - 50, screenBounds.size.width - 60, 30)]; self.explainLabel.text = @"将方框对准二维码、条形码进行扫描"; self.explainLabel.textAlignment = NSTextAlignmentCenter; [self.view addSubview:self.explainLabel];
// 用于扫码的线条动画 @property int num; @property BOOL upOrdown; @property NSTimer * timer;
然后我们去按钮的响应方法中添加上线条:
// 线条 self.upOrdown = NO; self.num =0; self.line = [[UIImageView alloc] initWithFrame:CGRectMake(70, (screenBounds.size.height - (screenBounds.size.width - 60))/2 + 10, screenBounds.size.width - 140, 2)]; self.line.image = [UIImage imageNamed:@"line.png"]; [self.view addSubview:self.line]; self.timer = [NSTimer scheduledTimerWithTimeInterval:.02 target:self selector:@selector(animation) userInfo:nil repeats:YES];
// 扫描线条动画 -(void)animation { CGRect screenBounds = [ [ UIScreen mainScreen ] bounds ]; if (self.upOrdown == NO) { self.num ++; self.line.frame = CGRectMake(70, (screenBounds.size.height - (screenBounds.size.width - 60))/2 + 10 +2*self.num, screenBounds.size.width - 140, 2); if (2*self.num == 280) { self.upOrdown = YES; } } else { self.num --; self.line.frame = CGRectMake(70, (screenBounds.size.height - (screenBounds.size.width - 60))/2 + 10 +2*self.num, screenBounds.size.width - 140, 2); if (self.num == 0) { self.upOrdown = NO; } } }
// 去掉扫描显示的内容 [self.timer invalidate]; [self.line removeFromSuperview]; [self.rectImage removeFromSuperview]; [self.explainLabel removeFromSuperview];
整个扫描功能实现起来还是蛮简单的,不防试试~
这里可以下载我的工程:https://github.com/Cloudox/ScanTest
转载请注明出处,谢谢