你的位置:首页 > 操作系统

[操作系统]美图秀秀美化图片之【智能优化】模块界面设计


  美图秀秀的智能优化界面十分简单明了,它只包含了一张要进行处理的图片和一个bar,再就是取消操作和保存操作的2个按钮,先附一张界面图

 

一、点击美化图片首页【智能优化】,进入具体操作界面

FWFunctionViewController *vc = [[FWFunctionViewController alloc] initWithImage:self.image type:FWBeautyProcessTypeAutoBeauty];

[self presentViewController:vc animated:YES completion:^{}];

[vc displayAutoBeautyPage];


displayAutoBeautyPage方法用来显示页面,它调用了setupImageView和setupBar方法,来装配具体内容。

setupImageView调整需要处理图片的显示位置

  if (self.type == FWBeautyProcessTypeAutoBeauty || self.type == FWBeautyProcessTypeColorList || self.type == FWBeautyProcessTypeEdit)  {    //105 = 设备高 - 关闭按钮高度 - 3段间距:30 - bar高度:55 - 的结果    self.imageView.frame = CGRectMake(0, 0, WIDTH, HEIGHT - 115);  }  self.imageView.contentMode = UIViewContentModeScaleAspectFit;  [self.view addSubview:self.imageView];

setupBar用来装配bar的内容和位置

  self.styleBar = [[FWEffectBar alloc] init];  NSDictionary *autoDict = nil;    if (self.type == FWBeautyProcessTypeAutoBeauty || self.type == FWBeautyProcessTypeColorList)  {    self.styleBar.frame = CGRectMake(0,HEIGHT - 105, WIDTH, 55);        if (self.type == FWBeautyProcessTypeAutoBeauty )      autoDict = [[FWCommonTools getPlistDictionaryForButton] objectForKey:@"AutoBeauty"];    else      autoDict = [[FWCommonTools getPlistDictionaryForButton] objectForKey:@"ColorValue"];      }  else if (self.type == FWBeautyProcessTypeEdit)  {    self.styleBar.frame = CGRectMake(100, HEIGHT - 55, 160, 55);        autoDict = [[FWCommonTools getPlistDictionaryForButton] objectForKey:@"Edit"];      }    NSArray *normalImageArr = [autoDict objectForKey:@"normalImages"];  NSArray *hightlightedImageArr = [autoDict objectForKey:@"HighlightedImages"];  NSArray *textArr = [autoDict objectForKey:@"Texts"];    NSMutableArray *arr = [[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];    [arr addObject:item];  }    self.styleBar.items = arr;    self.styleBar.effectBardelegate = self;  [self.styleBar setSelectedItem:[self.styleBar.items objectAtIndex:0]];  [self.view addSubview:self.styleBar];  [self effectBar:self.styleBar didSelectItemAtIndex:0];

setupBar

getPlistDictionaryForButton方法用来读取effectViewInfo.plist文件中内容。effectViewInfo.plist文件包含了一些项目中需要使用到的图片资源

+ (NSDictionary *)getPlistDictionaryForButton{  NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"effectViewInfo" ofType:@"plist"];    return [[NSDictionary alloc] initWithContentsOfFile:plistPath];;}

 

 关于bar中需要的文本和图片资源信息都存放在plist文件中,这样可以节省许多代码。下面展示一下plist文件内容

<?"1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plist version="1.0"><dict>  <key>speciallyeffect</key>  <dict>    <key>Texts</key>    <array>      <string>LOMO</string>      <string>美颜</string>      <string>格调</string>      <string>艺术</string>    </array>  </dict>  <key>Edit</key>  <dict>    <key>normalImages</key>    <array>      <string>icon_edit_clip_a@2x.png</string>      <string>icon_edit_rotate_a@2x.png</string>      <string>icon_edit_sharp_a@2x.png</string>    </array>    <key>HighlightedImages</key>    <array>      <string>icon_edit_clip_b@2x.png</string>      <string>icon_edit_rotate_b@2x.png</string>      <string>icon_edit_sharp_b@2x.png</string>    </array>    <key>Texts</key>    <array>      <string>裁剪</string>      <string>旋转</string>      <string>锐化</string>    </array>  </dict>  <key>ColorValue</key>  <dict>    <key>normalImages</key>    <array>      <string>icon_brightness_a@2x.png</string>      <string>icon_contrast_a@2x.png</string>      <string>icon_colourTemperature_a@2x.png</string>      <string>icon_saturation_a@2x.png</string>      <string>icon_hightLight_a@2x.png</string>      <string>icon_shade_a@2x.png</string>      <string>icon_fillinlight_a@2x.png</string>    </array>    <key>HighlightedImages</key>    <array>      <string>icon_brightness_b@2x.png</string>      <string>icon_contrast_b@2x.png</string>      <string>icon_colourTemperature_b@2x.png</string>      <string>icon_saturation_b@2x.png</string>      <string>icon_hightLight_b@2x.png</string>      <string>icon_shade_b@2x.png</string>      <string>icon_fillinlight_b@2x.png</string>    </array>    <key>Texts</key>    <array>      <string>亮度</string>      <string>对比度</string>      <string>色温</string>      <string>饱和度</string>      <string>高光</string>      <string>暗部</string>      <string>智能补光</string>    </array>  </dict>  <key>MagicBrush</key>  <dict>    <key>normalImages</key>    <array>      <string>magic_brush_09@2x.png</string>      <string>magic_brush_13@2x.png</string>      <string>magic_brush_16@2x.png</string>      <string>magic_brush_17@2x.png</string>      <string>magic_brush_12@2x.png</string>      <string>magic_brush_14@2x.png</string>      <string>magic_brush_15@2x.png</string>      <string>magic_brush_11@2x.png</string>      <string>magic_brush_01@2x.png</string>      <string>magic_brush_02@2x.png</string>      <string>magic_brush_03@2x.png</string>      <string>magic_brush_04@2x.png</string>      <string>magic_brush_05@2x.png</string>      <string>magic_brush_06@2x.png</string>      <string>magic_brush_07@2x.png</string>      <string>magic_brush_08@2x.png</string>      <string>magic_brush_10@2x.png</string>      <string>magic_brush_eraser@2x.png</string>    </array>    <key>HighlightedImages</key>    <array>      <string></string>    </array>    <key>Texts</key>    <array>      <string>烟花棒</string>      <string>炫光</string>      <string>丝带</string>      <string>彩虹</string>      <string>四叶草</string>      <string>紫光</string>      <string>绿宝石</string>      <string>花瓣</string>      <string>七彩光圈</string>      <string>爱心</string>      <string>光晕</string>      <string>飘雪</string>      <string>心动</string>      <string>小星星</string>      <string>梦幻</string>      <string>萤火虫</string>      <string>荧光笔</string>      <string>橡皮擦</string>    </array>  </dict>  <key>AutoBeauty</key>  <dict>    <key>Texts</key>    <array>      <string>原图</string>      <string>自动</string>      <string>美食</string>      <string>静物</string>      <string>风景</string>      <string>去雾</string>      <string>人物</string>    </array>    <key>HighlightedImages</key>    <array>      <string>icon_autobeauty1_b@2x.png</string>      <string>icon_autobeauty2_b@2x.png</string>      <string>icon_autobeauty4_b@2x.png</string>      <string>icon_autobeauty5_b@2x.png</string>      <string>icon_autobeauty6_b@2x.png</string>      <string>icon_autobeauty7_b@2x.png</string>      <string>icon_autobeauty3_b@2x.png</string>    </array>    <key>normalImages</key>    <array>      <string>icon_autobeauty1_a@2x.png</string>      <string>icon_autobeauty2_a@2x.png</string>      <string>icon_autobeauty4_a@2x.png</string>      <string>icon_autobeauty5_a@2x.png</string>      <string>icon_autobeauty6_a@2x.png</string>      <string>icon_autobeauty7_a@2x.png</string>      <string>icon_autobeauty3_a@2x.png</string>    </array>  </dict></dict></plist>

effectViewInfo.plist

 

 

目前只实现了界面,具体功能还没有实现。

下载项目