美图秀秀美化图片之【智能优化】模块界面设计

　　美图秀秀的智能优化界面十分简单明了，它只包含了一张要进行处理的图片和一个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文件内容

<?xml version="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>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
        </array>
        <key>HighlightedImages</key>
        <array>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
        </array>
        <key>Texts</key>
        <array>
            <string>裁剪</string>
            <string>旋转</string>
            <string>锐化</string>
        </array>
    </dict>
    <key>ColorValue</key>
    <dict>
        <key>normalImages</key>
        <array>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
        </array>
        <key>HighlightedImages</key>
        <array>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</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>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</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>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
        </array>
        <key>normalImages</key>
        <array>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
            <string>[email protected]</string>
        </array>
    </dict>
</dict>
</plist>

effectViewInfo.plist

 

 

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

下载项目