美图秀秀-美化图片之【背景虚化】界面设计

　　本文是背景虚化界面设计，在美图秀秀的背景虚化模块主要是图像的模糊处理，可以按照圆形和线性进行模糊处理，并生成选定的形状。

　　在开发中遇到的误区

1.模糊形状使用UIImageView，遇到一些麻烦，即使你向UIImageView对象添加手势，当你重载touchesBegan时，UIImageView对象也接收不到触摸事件，而是直接传递给self.view。所以最后使用了UIButton来显示模糊形状图片，这样方便我们接收事件。

2.UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];初始化时用UIButtonTypeCustom才可以显示原图片，否则显示图片时时高亮状态的图片，很是奇怪。

如图

先来几张效果图

　　

 

一、从美化图片首页进入背景虚化

    else if ([text isEqualToString:@"背景虚化"])
    {
        FWBlurViewController *vc = [[FWBlurViewController alloc] initWithImage:self.image];
        [self presentViewController:vc animated:YES completion:^{
        }];
    }

 

二、初始化界面

self.selectedIndex = 0;
    
    self.view.backgroundColor = [UIColor blackColor];
    
    //显示图片
    self.imageView = [[UIImageView alloc] initWithImage:self.image];
    self.imageView.frame = CGRectMake(0, 0, WIDTH, HEIGHT - 115);
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.view addSubview:self.imageView];
    
    //保存与取消按钮的添加
    UIImage *i1 = [UIImage imageNamed:@"btn_cancel_a@2x.png"];
    self.btnClose = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.btnClose setImage:i1 forState:UIControlStateNormal];
    self.btnClose.frame = CGRectMake(20, HEIGHT - kCancelHeight - 10, kCancelHeight, kCancelHeight);
    [self.btnClose addTarget:self action:@selector(btnCancelOrSaveClicked:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:self.btnClose];
    
    UIImage *i2 = [UIImage imageNamed:@"btn_ok_a@2x.png"];
    self.btnSave = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.btnSave setImage:i2 forState:UIControlStateNormal];
    self.btnSave.frame = CGRectMake(WIDTH - kCancelHeight - 20, HEIGHT - kCancelHeight - 10, kCancelHeight, kCancelHeight);
    [self.view addSubview:self.btnSave];
    [self.btnSave addTarget:self action:@selector(btnCancelOrSaveClicked:) forControlEvents:UIControlEventTouchUpInside];
    
    [self setupSlider];
    
    self.styleBar = [[FWEffectBar alloc] initWithFrame:CGRectMake(90, HEIGHT - 55, 180, 55)];
    
    NSDictionary *autoDict = [[FWDataManager getDataSourceFromPlist] objectForKey:@"Blur"];
    NSArray *normalImageArr = [autoDict objectForKey:@"normalImages"];
    NSArray *hightlightedImageArr = [autoDict objectForKey:@"HighlightedImages"];
    NSArray *textArr = [autoDict objectForKey:@"Texts"];
    
    NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:0];
    
    for (int i = 0; i < [textArr count]; i++)
    {
        FWEffectBarItem *item = [[FWEffectBarItem alloc] initWithFrame:CGRectZero];
        [item setFinishedSelectedImage:[UIImage imageNamed:[hightlightedImageArr objectAtIndex:i]] withFinishedUnselectedImage:[UIImage imageNamed:[normalImageArr objectAtIndex:i]] ];
        item.title = [textArr objectAtIndex:i];
        [items addObject:item];
    }
    self.styleBar.items = items;
    self.styleBar.effectBarDelegate = self;
    [self.styleBar setSelectedItem:[self.styleBar.items objectAtIndex:0]];
    [self effectBar:self.styleBar didSelectItemAtIndex:0];
    [self.view addSubview:self.styleBar];
    
     self.btnBlurType = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.btnBlurType setImage:[UIImage imageNamed:@"icon_blur_null"] forState:UIControlStateNormal];
    [self.btnBlurType addTarget:self action:@selector(btnBlurClicked:) forControlEvents:UIControlEventTouchUpInside];
    self.btnBlurType.frame = CGRectMake(20, HEIGHT - 90, 30, 30);
    [self.view addSubview:self.btnBlurType];

 

 

三、模糊形状视图管理

- (void)btnBlurClicked:(id)sender
{
    if (self.subView)
    {
        return;
    }
    
    [self setupSharpView];
}

- (void)hideShapeView
{
    [self.subView removeFromSuperview];
    self.subView = nil;
}
- (void)setupSharpView
{
    NSArray *arr = [NSArray arrayWithObjects:@"icon_blur_null", @"icon_blur_center", @"icon_blur_heart", @"icon_blur_star", @"icon_blur_heptagon", nil];
    self.subView = [[UIView alloc] initWithFrame:CGRectMake(10, HEIGHT - 135, 250, 35)];

    for (int i = 0; i < [arr count]; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [btn setImage:[UIImage imageNamed:[arr objectAtIndex:i]] forState:UIControlStateNormal];
        btn.frame = CGRectMake(10 + (35 + 10) * i, 0, 35, 35);
        [btn addTarget:self action:@selector(tap:) forControlEvents:UIControlEventTouchUpInside];
        [self.subView addSubview:btn];
    }
    
    [self.view addSubview:self.subView];
}

- (void)tap:(id)sender
{
    [self hideShapeView];
    
    [self.btnBlurType setImage:((UIButton *)sender).currentImage forState:UIControlStateNormal];
}


- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self hideShapeView];
}

 

 

小知识

1.[self.slider setThumbImage:[UIImage imageNamed:@"icon_slider_thumb"] forState:UIControlStateNormal];这段代码可以修改UISLIDER的滑块图片，默认的滑块太大~

2.UIImageView拦截事件要弱于UIButton

3.推荐创建UIButton时类型选择UIButtonTypeCustom。

 

界面做完主攻具体功能实现了，估计还得1个星期左右~

下载项目

 

 

 

 

为自己加油！