星空网 > 软件开发 > 操作系统

美图秀秀

  本文是特效界面设计,在美图秀秀的特效模块主要是实现图片添加滤镜效果,界面挺炫的。

美图秀秀images/loading.gif' data-original="http://images2015.cnblogs.com/blog/133128/201601/133128-20160113212421053-1362048352.png" />

界面包含黑边和虚化按钮,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];

 

 

下载项目

 




原标题:美图秀秀

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
跨境电商服务平台 | 深圳旅行社 | 东南亚物流