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

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

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

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

 

 

下載項目