本文是背景虚化界面设计,在美图秀秀的背景虚化模块主要是图像的模糊处理,可以按照圆形和线性进行模糊处理,并生成选定的形状。
在开发中遇到的误区
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个星期左右~
下载项目
为自己加油!