本文是特效界面设计，在美图秀秀的特效模块主要是实现图片添加滤镜效果，界面挺炫的。
界面包含黑边和虚化按钮，4种类型的滤镜，每种类型又包含许多具体滤镜效果，当我们点击时候开始处理图片
1.加载图片
self.imageView = [[UIImageView alloc] initWithImage:self.image]; self.imageView.frame = CGRectMake(0, 0, WIDTH, HEIGHT - 130); self.imageView.contentMode = UIViewContentModeScaleAspectFit; [self.view addSubview:self.imageView];
2.加载保存取消按钮
//保存与取消按钮的添加 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];
3.加载4种类型滤镜的bar
self.styleBar = [[FWEffectBar alloc] initWithFrame:CGRectMake(50, HEIGHT - 40, 280, 20)]; NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:0]; NSArray *titles = [NSArray arrayWithObjects:@"LOMO", @"美颜", @"格调", @"艺术", nil]; for (int i = 0; i < [titles count]; i ++) { FWEffectBarItem *item = [[FWEffectBarItem alloc] initWithFrame:CGRectZero]; item.title = [titles 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];
4.加载虚化和黑边按钮
UIButton * btnBlur = [UIButton buttonWithType:UIButtonTypeCustom]; [btnBlur setImage:[UIImage imageNamed:@"blur_deactivated"] forState:UIControlStateNormal]; self.isBlurActivate = NO; btnBlur.frame = CGRectMake(10, HEIGHT - 45 - kHeight, 25, 25); [btnBlur addTarget:self action:@selector(btnBlurClicked:) forControlEvents:UIControlEventTouchUpInside]; btnBlur.backgroundColor = [UIColor clearColor]; [self.view addSubview:btnBlur]; UIButton * btnDark = [UIButton buttonWithType:UIButtonTypeCustom]; [btnDark setImage:[UIImage imageNamed:@"dark_corner_deactivated"] forState:UIControlStateNormal]; self.isDarkCornerActivate = NO; btnDark.frame = CGRectMake(10, HEIGHT - 10 - kHeight, 25, 25); [btnDark addTarget:self action:@selector(btnDarkClicked:) forControlEvents:UIControlEventTouchUpInside]; btnDark.backgroundColor = [UIColor clearColor]; [self.view addSubview:btnDark];
实现点击按钮后显示的图片
- (void)btnBlurClicked:(id)sender{ UIButton *btn = (UIButton *)sender; if (self.isBlurActivate) { [btn setImage:[UIImage imageNamed:@"blur_deactivated"] forState:UIControlStateNormal]; self.isBlurActivate = NO; } else { [btn setImage:[UIImage imageNamed:@"blur_activated"] forState:UIControlStateNormal]; self.isBlurActivate = YES; }}- (void)btnDarkClicked:(id)sender{ UIButton *btn = (UIButton *)sender; if (self.isBlurActivate) { [btn setImage:[UIImage imageNamed:@"dark_corner_deactivated"] forState:UIControlStateNormal]; self.isDarkCornerActivate = NO; } else { [btn setImage:[UIImage imageNamed:@"dark_corner_activated"] forState:UIControlStateNormal]; self.isDarkCornerActivate = YES; }}
5.加载具体滤镜效果bar
self.filterStyleBar = [[FWEffectBar alloc] initWithFrame:CGRectMake(50, HEIGHT - 50 - kHeight, WIDTH - 70, kHeight)]; self.filterStyleBar.effectBarDelegate = self; self.filterStyleBar.itemBeginX = 15.0; self.filterStyleBar.itemWidth = 50.0; self.filterStyleBar.margin = 10.0; [self.view addSubview:self.filterStyleBar];
6.向bar中添加滤镜视图
- (void)setupFilterWithNormalImages:(NSArray *)normalImages HighlightImages:(NSArray *)highlightImages titles:(NSArray *)titles{ FWEffectBarItem *item = nil; NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:0]; for (int i = 0; i < [titles count]; i++) { item = [[FWEffectBarItem alloc] initWithFrame:CGRectMake((kWidth + kSpace) * i + 10, 0, kWidth, kHeight)]; item.titleOverlay = YES; item.backgroundColor = [UIColor blackColor]; UIImage *img = [UIImage scaleImage:self.image targetHeight:70]; [item setFinishedSelectedImage:img withFinishedUnselectedImage:img]; item.title = [NSString stringWithFormat:@"%i",i]; [items addObject:item]; } self.filterStyleBar.items = items;}
点击视图时显示边框
FWEffectBarItem *item = (FWEffectBarItem *)[bar.items objectAtIndex:index]; item.ShowBorder = YES;
如果视图没有完全显示在屏幕中时，移动视图以显示完整视图界面
[self.filterStyleBar scrollRectToVisible:item.frame animated:YES];