美图秀秀-美化图片之【特效】界面设计

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

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

下载项目