iOS7自带扫描二维码、条形码功能实现

摘要:

随着二维码的普及,扫码功能越来越重要,比起手动输入,扫码直接获取的方式会更加的便捷和快速,在iOS7之前,实现扫码一般是使用第三方的类库,如ZBar等,iOS7之后开始自行提供扫码的框架,在AVFoundation中包含有实现扫码的类,使用起来还是很方便的,本文通过一个例子讲述其用法。


我们要实现的是如下的效果:

iOS7自带扫描二维码、条形码功能实现_第1张图片iOS7自带扫描二维码、条形码功能实现_第2张图片


左图有一个进入扫描界面的按钮和一个现实扫描结果的Label,右图是扫描的界面,有一个方框标识扫描区域,有一个上下运动的横线,有一段Label进行说明,现在来说明如何实现。


1、准备工作

先创建一个SingleView的工程,在storyboard中的View中添加一个扫描按钮和一个显示扫描结果的Label,如上左图,并关联到.h文件中去。

此外我们右图中的区域标识方框和上下扫描运动的线条都是图片,所以我们要把图片添加到我们的工程中去,可以在我的工程中复制图片文件([email protected][email protected])。

我们使用的是iOS7之后自带的类库,但同样需要在我们的工程中进行引用,所以要在代码中加上以下内容:

#import <AVFoundation/AVFoundation.h>

这样就可以使用相关的类和方法了。


2、实现扫描界面

我们使用苹果定义的方法来实现扫描界面的创建,在按钮的响应方法中:

- (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];
    }
}

其实到这里就已经实现扫描功能了,很简单对不对,我这里只是将扫描结果显示在Label上,如果是条形码就会显示数字,如果是二维码也会显示相应的内容,之后要对结果进行怎样地处理也可以自行处理,非常方便,扫描速度也很快。


3、优化扫描界面

上面虽然实现了扫描功能,但我们的扫描界面就是个没有按钮的拍照界面一样,非常单一,一般的扫码界面,都会有方框有线条有说明,所以我们也来实现这个界面的优化,让其更加美观和习惯。

PS:一般其实还会对非扫描区域,也就是方框以外的区域进行虚化模糊,让用户将注意力集中到扫描方框内来,我查了一下大致是使用高斯模糊吧,还没有研究透彻,希望高手指导一下~

首先我们加上方框,之前我们有把方框的图片放到这里面来,这里就可以直接使用了,这里要说的一点是,我们的扫描界面并不是跳转到另外一个新的界面,而是在本界面上添加一个subview,和添加按钮、Label理论上是一样的,所以上面会有一个设置放置层级的代码:

 [self.view.layer insertSublayer:self.layer atIndex:2];// 设置层级,可以在扫码时显示一些文字

这里的atIndex就是放在第几层,如果设置为0,那就是底层,我们原本的界面上是有按钮和Label的,设为0的话按钮和Label就会显示在扫描界面的上方, 体验就非常不好了,所以我们放在按钮和Label之上,也就是设为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];

在timer中我们引用了一个方法叫animation,方法如下:

// 扫描线条动画
-(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


转载请注明出处,谢谢

你可能感兴趣的:(ios,二维码,扫描,ios7,条形码)