美圖秀秀-美化圖片之【背景虛化】介面設計,秀秀介面設計
本文是背景虛化介面設計,在美圖秀秀的背景虛化模組主要是映像的模糊處理,可以按照圓形和線性進行模糊處理,並產生選定的形狀。
在開發中遇到的誤區
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個星期左右~
下載項目
為自己加油!