美图秀秀的智能优化界面十分简单明了，它只包含了一张要进行处理的图片和一个bar，再就是取消操作和保存操作的2个按钮，先附一张界面图
images/loading.gif' data-original="http://images2015.cnblogs.com/blog/133128/201601/133128-20160102153245635-201592408.png" />
一、点击美化图片首页【智能优化】，进入具体操作界面
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
目前只实现了界面，具体功能还没有实现。
下载项目
原标题：美图秀秀美化图片之【智能优化】模块界面设计
关键词：图片
我知道了 