Interface Design of meitu xiuxiu beautifying pictures [border] [major update] And xiuxiu Interface Design

Interface Design of meitu xiuxiu beautifying pictures [border] [major update] And xiuxiu Interface Design

Before writing a border, you need to inform everyone that the whole interface for Beautifying images has been completely rewritten. Please download the latest project [Click to download] first]

In the previous development method, the viewcontroller code is disordered because many factors are not taken into account. Therefore, the interface is re-developed. All the independent functions of beautifying images have an independent viewController, which is not easy to confuse. In addition, I learned how to use

In imagenamed, if the format of an image is PNG, you can remove .png, but use a suffix of .jpg as the format of a jpg image.

I. Links

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

 

Ii. Loading Interface

1. Load the image to be processed

// Display the image self. imageView = [[UIImageView alloc] initWithImage: self. image]; self. imageView. frame = CGRectMake (0, 0, WIDTH, HEIGHT-50-70); self. imageView. contentMode = UIViewContentModeScaleAspectFit; [self. view addSubview: self. imageView];

2. Load the SAVE and cancel buttons

　　

// 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 the border style [poster, simple, colorful] bar

Self. styleBar = [[FWEffectBar alloc] initWithFrame: CGRectMake (50, HEIGHT-40,200, 20)]; NSMutableArray * items = [[NSMutableArray alloc] initWithCapacity: 0]; NSArray * titles = [NSArray arrayWithObjects: @ "poster border", @ "simple border", @ "colorful border", 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 the [more materials] View

FWMoreEffectView *seView = [[FWMoreEffectView alloc] initWithFrame:CGRectMake(15, HEIGHT - 50 - kHeight, kWidth, kHeight)];    [self.view addSubview:seView];

 

FWMoreEffectView is a custom view, which is relatively simple and is not described here.

 

5. Load a specific border Style

　　　　

Self. borderStyleBar = [[FWEffectBar alloc] initWithFrame: CGRectMake (70, HEIGHT-50-kHeight, WIDTH-70, kHeight)]; self. borderStyleBar. required tbardelegate = self; self. borderStyleBar. itembegtables = 15.0; self. borderStyleBar. itemWidth = 50.0; self. borderStyleBar. margin = 10.0;
// Border style default view

[Self setupPosterBorder];

    [self.view addSubview:self.borderStyleBar];

 

- (void)setupBorderEffect:(NSArray *)images{    FWEffectBarItem *item = nil;    NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:0];        for (int i = 0; i < [images count]; i++)    {        item = [[FWEffectBarItem alloc] initWithFrame:CGRectMake((kWidth + kSpace) * i + 10, 0, kWidth, kHeight)];        item.backgroundColor = [UIColor whiteColor];        UIImage *img1 = [UIImage scaleImage:[UIImage imageNamed:[images objectAtIndex:i]] targetWidth:50];                [item setFinishedSelectedImage:img1 withFinishedUnselectedImage:img1];        [items addObject:item];    }        self.borderStyleBar.items = items;}

 

Define a method for loading a specific border style, pass a style Image array, and then call the following three methods to display

// Simple border view-(void) setupSimpleBorderView {[self setupBorderEffect: [NSArray arrayWithObjects: @ "border_w.kuang_a.jpg", @ "border ", @ "inline", @ "border_simple_15.jpg", @ "border_simple_16.jpg", @ "border_simple_17.jpg", @ "border_simple_18.jpg", @ "border_simple_19.jpg", nil];} // Paster border view-(void) setupPosterBorder {[self setupBorderEffect: [NSArray arrayWithObjects: @ "pb1", @ "PBS", @ "pb3", @ "pb4 ", @ "pb5", @ "pb6", @ "pb7", @ "pb8", @ "pb9", @ "pb10", nil];} // void setupDazzleBorder {[self setupBorderEffect: [NSArray arrayWithObjects: @ "example", @ "example", @ "xborder_qisehua_a.jpg", @ "example", "example ", @ "xborder_xueye_a.jpg", @ "xborder_yinhe_a.jpg", nil];}

 

We use different items for borderStyleBar to display different style items.

 

6. Implement bar Delegation

#pragma mark - FWEffectBarDelegate- (void)effectBar:(FWEffectBar *)bar didSelectItemAtIndex:(NSInteger)index{    if (bar == self.styleBar)    {        switch (index) {            case 0:                [self setupPosterBorder];                break;                            case 1:                [self setupSimpleBorderView];                break;                            case 2:                [self setupDazzleBorder];                break;        }    }    else    {        FWEffectBarItem *item = (FWEffectBarItem *)[bar.items objectAtIndex:index];        item.ShowBorder = YES;    }    }

 

When we click styleBar, we will switch the border style type. When we click borderStyleBar, apply the specific border style and the selected style will show a border.

Hide Status Bar

// Hide the status bar-(BOOL) prefersStatusBarHidden {return YES ;}

 

 

 

OVER. THANKS!