Meitu xiuxiu-special effects for Beautifying images interface design and xiuxiu Interface Design

Meitu xiuxiu-special effects for Beautifying images interface design and xiuxiu Interface Design

This article is a special effect interface design. In the special effect module of meitu xiuxiu, the effects of adding filters to images are quite dazzling.

The Interface contains black borders and virtual buttons, four types of filters, each type also contains many specific filter effects, when we click to start processing the image

1. load images

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. The cancel button for loading and saving

// Add 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. Load bar of four Filter Types

Self. styleBar = [[FWEffectBar alloc] initWithFrame: CGRectMake (50, HEIGHT-40,280, 20)]; NSMutableArray * items = [[NSMutableArray alloc] initWithCapacity: 0]; NSArray * titles = [NSArray arrayWithObjects: @ "LOMO", @ "beauty", @ "style", @ "art", 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. required tbardelegate = self; [self. styleBar setSelectedItem: [self. styleBar. items objectAtIndex: 0]; [self defined tbar: self. styleBar didSelectItemAtIndex: 0]; [self. view addSubview: self. styleBar];

 

4. Load virtual and Black edge buttons

    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];

 

Click the button to display the image.

- (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. Load the filter 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. Add a filter View to the 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;}

 

Display border when you click View

        FWEffectBarItem *item = (FWEffectBarItem *)[bar.items objectAtIndex:index];        item.ShowBorder = YES;

 

If the view is not fully displayed on the screen, move the view to display the full view interface.

[self.filterStyleBar scrollRectToVisible:item.frame  animated:YES];

 

 

Download Project