Meitu xiuxiu-beautify the image [Virtual background] interface design, xiuxiu Interface Design

Meitu xiuxiu-beautify the image [Virtual background] interface design, xiuxiu Interface Design

This article describes the background blur interface design. The background blur module of meitu xiuxiu mainly deals with image blur. The blurred image can be processed according to the Circle and linear pattern, and the selected shape can be generated.

Misunderstandings encountered during development

1. the use of UIImageView in Fuzzy shape causes some trouble. Even if you add a gesture to the UIImageView object, when touchesBegan is reloaded, The UIImageView object will not receive the touch event, but will directly pass it to self. view. So we finally used UIButton to display blurred images, so that we can easily receive events.

2. UIButton * btn = [UIButton buttonWithType: UIButtonTypeCustom]; during initialization, you can use UIButtonTypeCustom to display the original image. Otherwise, it is strange to display the highlighted image from time to time.

First few

　　

 

I. Go to the homepage of beautifying images to blur the background

Else if ([text isEqualToString: @ ""]) {FWBlurViewController * vc = [[FWBlurViewController alloc] initWithImage: self. image]; [self presentViewController: vc animated: YES completion: ^ {}];}

 

Ii. Initialization Interface

Self. selectedIndex = 0; self. view. backgroundColor = [UIColor blackColor]; // displays the image self. imageView = [[UIImageView alloc] initWithImage: self. image]; self. imageView. frame = CGRectMake (0, 0, WIDTH, HEIGHT-115); self. imageView. contentMode = UIViewContentModeScaleAspectFit; [self. view addSubview: self. imageView]; // 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]; [self setupSlider]; self. styleBar = [[FWEffectBar alloc] initWithFrame: CGRectMake (90, HEIGHT-55,180, 55)]; NSDictionary * autoDict = [[FWDataManager secret] objectForKey: @ "Blur"]; NSArray * normalImageArr = [autoDict objectForKey: @ "normalImages"]; NSArray * keys = [autoDict objectForKey: @ "HighlightedImages"]; NSArray * textArr = [autoDict objectForKey: @ "Texts"]; NSMutableArray * items = [[NSMutableArray alloc] initWithCapacity: 0]; for (int I = 0; I <[textArr count]; I ++) {optional * item = [FWEffectBarItem alloc] initWithFrame: CGRectZero]; [item identifier: [UIImage imageNamed: [incluobjectatindex: I] identifier: [UIImage imageNamed: [normalImageArr objectAtIndex: i]; item. title = [textArr 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]; self. btnBlurType = [UIButton buttonWithType: UIButtonTypeCustom]; [self. btnBlurType setImage: [UIImage imageNamed: @ "icon_blur_null"] forState: UIControlStateNormal]; [self. btnBlurType addTarget: self action: @ selector (btnBlurClicked :) forControlEvents: UIControlEventTouchUpInside]; self. btnBlurType. frame = CGRectMake (20, HEIGHT-90, 30, 30); [self. view addSubview: self. btnBlurType];

 

 

3. Fuzzy shape View Management

- (void)btnBlurClicked:(id)sender{    if (self.subView)    {        return;    }        [self setupSharpView];}- (void)hideShapeView{    [self.subView removeFromSuperview];    self.subView = nil;}- (void)setupSharpView{    NSArray *arr = [NSArray arrayWithObjects:@"icon_blur_null", @"icon_blur_center", @"icon_blur_heart", @"icon_blur_star", @"icon_blur_heptagon", nil];    self.subView = [[UIView alloc] initWithFrame:CGRectMake(10, HEIGHT - 135, 250, 35)];    for (int i = 0; i < [arr count]; i++) {        UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];        [btn setImage:[UIImage imageNamed:[arr objectAtIndex:i]] forState:UIControlStateNormal];        btn.frame = CGRectMake(10 + (35 + 10) * i, 0, 35, 35);        [btn addTarget:self action:@selector(tap:) forControlEvents:UIControlEventTouchUpInside];        [self.subView addSubview:btn];    }        [self.view addSubview:self.subView];}- (void)tap:(id)sender{    [self hideShapeView];        [self.btnBlurType setImage:((UIButton *)sender).currentImage forState:UIControlStateNormal];}- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{    [self hideShapeView];}

 

 

Knowledge

1. [self. slider setThumbImage: [UIImage imageNamed: @ "icon_slider_thumb"] forState: UIControlStateNormal]; this code can modify the UISLIDER slider image. The default slider is too large ~

2. UIImageView interception events are weaker than UIButton

3. We recommend that you select UIButtonTypeCustom as the type when creating UIButton.

 

The main function of the interface has been implemented. It may take about one week to complete ~

Download Project

 

 

 

 

Cheer for yourself!