美圖秀秀-美化圖片之【特效】介面設計

ForrestWoo發表於2016-01-13
特效

　　本文是特效介面設計，在美圖秀秀的特效模組主要是實現圖片新增濾鏡效果，介面挺炫的。

介面包含黑邊和虛化按鈕，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];

 

 

下載專案

 

相關文章