美图秀秀美化图片界面设计（一）

　　先来2张预览图

　　     

基本实现了美图秀秀的美化图片功能的首页界面。美图秀秀据说是7.4亿用户在使用，感觉很牛逼的样子，这样更加我坚定了开发下去的决心。

　　美化图片具体功能：

　　1.智能优化

　　2.编辑

　　3.增强

　　4.特效

　　5.边框

　　6.魔幻笔

　　7.马赛克

　　8.文字编辑

　　9.背景虚化

　　10.链接到美容功能

　　

在此文中我们将学到如下知识

　　1.图像的等比缩放处理。

　　2.自定义按钮

　　3.UIScrollView的使用

一、图像等比处理方法实现

　　1.指定宽度

+(UIImage *) imageCompressForWidth:(UIImage *)sourceImage targetWidth:(CGFloat)defineWidth{
    UIImage *newImage = nil;
    CGSize imageSize = sourceImage.size;
    CGFloat width = imageSize.width;
    CGFloat height = imageSize.height;
    CGFloat targetWidth = defineWidth;
    CGFloat targetHeight = height / (width / targetWidth);
    CGSize size = CGSizeMake(targetWidth, targetHeight);
    CGFloat scaleFactor = 0.0;
    CGFloat scaledWidth = targetWidth;
    CGFloat scaledHeight = targetHeight;
    CGPoint thumbnailPoint = CGPointMake(0.0, 0.0);
    if(CGSizeEqualToSize(imageSize, size) == NO){
        CGFloat widthFactor = targetWidth / width;
        CGFloat heightFactor = targetHeight / height;
        if(widthFactor > heightFactor){
            scaleFactor = widthFactor;
        }
        else{
            scaleFactor = heightFactor;
        }
        scaledWidth = width * scaleFactor;
        scaledHeight = height * scaleFactor;
        if(widthFactor > heightFactor){
            thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5;
        }else if(widthFactor < heightFactor){
            thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
        }
    }
    UIGraphicsBeginImageContext(size);
    CGRect thumbnailRect = CGRectZero;
    thumbnailRect.origin = thumbnailPoint;
    thumbnailRect.size.width = scaledWidth;
    thumbnailRect.size.height = scaledHeight;
    
    [sourceImage drawInRect:thumbnailRect];
    
    newImage = UIGraphicsGetImageFromCurrentImageContext();
    if(newImage == nil){
        NSLog(@"scale image fail");
    }
    
    UIGraphicsEndImageContext();
    return newImage;
}

　　2.指定高度

+(UIImage *) imageCompressForWidth:(UIImage *)sourceImage targetHeight:(CGFloat)defineHeight{
    UIImage *newImage = nil;
    CGSize imageSize = sourceImage.size;
    CGFloat width = imageSize.width;
    CGFloat height = imageSize.height;
    CGFloat targetHeight = defineHeight;
    
    CGFloat targetWidth = width / (height / targetHeight);
    CGSize size = CGSizeMake(targetWidth, targetHeight);
    CGFloat scaleFactor = 0.0;
    CGFloat scaledWidth = targetWidth;
    CGFloat scaledHeight = targetHeight;
    CGPoint thumbnailPoint = CGPointMake(0.0, 0.0);
    if(CGSizeEqualToSize(imageSize, size) == NO){
        CGFloat widthFactor = targetWidth / width;
        CGFloat heightFactor = targetHeight / height;
        if(widthFactor > heightFactor){
            scaleFactor = widthFactor;
        }
        else{
            scaleFactor = heightFactor;
        }
        scaledWidth = width * scaleFactor;
        scaledHeight = height * scaleFactor;
        if(widthFactor > heightFactor){
            thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5;
        }else if(widthFactor < heightFactor){
            thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
        }
    }
    UIGraphicsBeginImageContext(size);
    CGRect thumbnailRect = CGRectZero;
    thumbnailRect.origin = thumbnailPoint;
    thumbnailRect.size.width = scaledWidth;
    thumbnailRect.size.height = scaledHeight;
    
    [sourceImage drawInRect:thumbnailRect];
    
    newImage = UIGraphicsGetImageFromCurrentImageContext();
    if(newImage == nil){
        NSLog(@"scale image fail");
    }
    
    UIGraphicsEndImageContext();
    return newImage;
}

二、自定义具体功能按钮

　　按钮添加到scrollView中，当tap按钮时链接到新的详细处理界面

　　1.基本介绍

按钮包含文本和正常状态、高亮状态下的背景，图片。文字和按钮图片竖排列。当按下按钮时，按钮便变蓝。

　　2.实现

#ifdef __IPHONE_6_0 // iOS6 and later
#  define UITextAlignmentCenter    NSTextAlignmentCenter
#  define UITextAlignmentLeft      NSTextAlignmentLeft
#  define UITextAlignmentRight     NSTextAlignmentRight
#  define UILineBreakModeTailTruncation     NSLineBreakByTruncatingTail
#  define UILineBreakModeMiddleTruncation   NSLineBreakByTruncatingMiddle
#endif

#define kButtonOffset 35.f
#define kTopPadding 5.f

#import "FWButton.h"

@interface FWButton ()

@property (nonatomic, strong) UIImage *highlightedButtonImage;
@property (nonatomic, strong) UIImage *normalButtonImage;

@end

@implementation FWButton

+ (FWButton *)button
{
    return [super buttonWithType:UIButtonTypeCustom];
}

+ (FWButton *)buttonWithType:(UIButtonType)type
{
    return [FWButton button];
}

- (void)setHighlighted:(BOOL)highlighted
{
    [super setHighlighted:highlighted];
    [self setNeedsDisplay];
}

- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        self.cornerRadius = 10.f;
        self.backgroundColor = [UIColor colorWithWhite:0.f alpha:0.4f];
        self.backgroundColorHighlighted = [UIColor colorWithWhite:0.f alpha:0.6f];
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    if (self.normalButtonImage == nil || self.highlightedButtonImage == nil) {
        self.normalButtonImage = [self imageForState:UIControlStateNormal];
        self.highlightedButtonImage = [self imageForState:UIControlStateHighlighted];
        [self.imageView removeFromSuperview];
    }
    
    if (self.normalTextColor == nil) {
        self.normalTextColor = [UIColor whiteColor];
    }
    if (self.highlightedTextColor == nil) {
        self.highlightedTextColor = [UIColor whiteColor];
    }
    
    UIImage *buttonImage;
    if (self.state == UIControlStateNormal) {
        buttonImage = self.normalButtonImage;
        CGContextSetFillColorWithColor(context, self.backgroundColor.CGColor);
    }
    else {
        CGContextSetFillColorWithColor(context, self.backgroundColorHighlighted.CGColor);
        if (self.titleLabel.text.length > 0) {
            //            CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
        }
        if (self.normalButtonImage != self.highlightedButtonImage && self.highlightedButtonImage != nil) {
            buttonImage = self.highlightedButtonImage;
        }
        else{
            buttonImage = self.normalButtonImage;
        }
    }
    
    // Draw button content view
    CGRect buttonRect = CGRectMake(0.f, 0.f, rect.size.width, rect.size.height);
    UIBezierPath *buttonBezier = [UIBezierPath bezierPathWithRoundedRect:buttonRect cornerRadius:self.cornerRadius];
    [buttonBezier addClip];
    CGContextFillRect(context, buttonRect);
    
    // Draw button image
    if (buttonImage != nil) {
        CGImageRef buttonCGImage = buttonImage.CGImage;
        CGSize imageSize = CGSizeMake(CGImageGetWidth(buttonCGImage)/[self scale], CGImageGetHeight(buttonCGImage)/[self scale]);
        CGFloat buttonYOffset = (rect.size.height-kButtonOffset)/2.f - imageSize.height/2.f + kTopPadding;
        if (self.titleLabel.text.length == 0) {
            buttonYOffset = rect.size.height/2.f - imageSize.height/2.f;
        }
        [buttonImage drawInRect:CGRectMake(rect.size.width/2. - imageSize.width/2.f,
                                           buttonYOffset,
                                           imageSize.width,
                                           imageSize.height)];
    }
    
    // Draw button title
    if (self.titleLabel.text.length > 0) {
        if (self.state == UIControlStateNormal) {
            CGContextSetFillColorWithColor(context, self.normalTextColor.CGColor);
        }else {
            CGContextSetFillColorWithColor(context, self.highlightedTextColor.CGColor);
        }
        [self.titleLabel.text drawInRect:CGRectMake(0.f, (buttonImage != nil ? rect.size.height-kButtonOffset+self.topPading *kTopPadding: rect.size.height/2 - 10.f), rect.size.width, 20.f)
                                withFont:self.titleLabel.font
                           lineBreakMode:self.titleLabel.lineBreakMode
                               alignment:UITextAlignmentCenter];
    }
    
    [self.titleLabel removeFromSuperview];
}

- (void)setBackgroundColor:(UIColor *)color
{
    _backgroundColor = color;
}

- (void)setBackgroundColorHighlighted:(UIColor *)color
{
    _backgroundColorHighlighted = color;
}

- (CGFloat)scale
{
    if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
        return [[UIScreen mainScreen] scale];
    }
    return 1.0f;
}


@end

三、布局

　1.进入美图秀秀后按下【美化图片】使用UIImagePickerController来获取设备的图片，选择我们将要处理的图片后，主页将选择的图片传给【美化图片】页面

- (void)btnClicked:(id)sender
{
    if ([[(UIButton *)sender titleLabel].text isEqualToString:@"美化图片"]) {
        if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary])
        {
            imagePicker = [[UIImagePickerController alloc] init];
            
            imagePicker.delegate = self;
            imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
            [self presentViewController:imagePicker animated:YES completion:^{
                [[UIApplication sharedApplication] setStatusBarHidden:YES];
                
            }
             ];
        }
    }
}

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
    UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
    UIImage *image = [UIImage imageCompressForWidth:selectedImage targetWidth:WIDTH];
    if (image.size.height > HEIGHT - 67 - 44) {
        image = [UIImage imageCompressForWidth:selectedImage targetHeight:HEIGHT - 67 - 44];
    }
    currentImage = image;
    
    beautyVC = [[FWBeautyViewController alloc] initWithImage:currentImage];
    [imagePicker pushViewController:beautyVC animated:YES];
    
}

　　2.在【美化图片】页面显示选择的图片

　　

创建UIImageView实例。将其添加到视图中

 self.imageView = [[UIImageView alloc] initWithImage:self.image];
    CGSize size = self.image.size;
    CGFloat imageWidth = size.width;
    CGFloat imageHeight = size.height;
    CGFloat xPoiont = 0;
    CGFloat yPoint = 44;
    if (imageWidth == WIDTH) {
        yPoint = (HEIGHT - 44 - kHeight - imageHeight) / 2.0 + 44;
    }
    if (imageHeight == HEIGHT - 44 - kHeight ) {
        xPoiont = (WIDTH - imageWidth) / 2.0 ;
    }
    
    self.imageView.frame = CGRectMake(xPoiont, yPoint, 375, HEIGHT - 44 - kHeight );
    [self.imageView sizeToFit];
    self.imageView.clipsToBounds = YES;
    
    [self.view addSubview:self.imageView];

　　3.添加下面功能按钮

self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, beginY, WIDTH - kWidth - 2, kHeight)];
    self.scrollView.contentSize = CGSizeMake(580, kHeight - 10);
    self.scrollView.backgroundColor = [UIColor blackColor];
    self.scrollView.bounces = NO;
    [self.view addSubview:self.scrollView];
    
    NSArray *normalImageViewImageArr = [NSArray arrayWithObjects:@"icon_function_autoBeauty_a@2x.png",
                                        @"icon_function_edit_a@2x.png", @"icon_function_color_a@2x.png", @"icon_function_stylize_a@2x.png",
                                        @"icon_function_border_a@2x.png", @"icon_function_mohuanbi_a@2x.png", @"icon_function_mosaic_a@2x.png",
                                        @"icon_function_text_a@2x.png", @"icon_function_bokeh_a@2x.png",
                                        nil];
    NSArray *hightlightedImageViewImageArr = [NSArray arrayWithObjects:@"icon_function_autoBeauty_b@2x.png",
                                              @"icon_function_edit_b@2x.png", @"icon_function_color_b@2x.png", @"icon_function_stylize_b@2x.png",
                                              @"icon_function_border_b@2x.png", @"icon_function_mohuanbi_b@2x.png", @"icon_function_mosaic_b@2x.png",
                                              @"icon_function_text_b@2x.png", @"icon_function_bokeh_b@2x.png",
                                              nil];
    NSArray *textArr = [NSArray arrayWithObjects:@"智能优化", @"编辑", @"增强", @"特效", @"边框", @"魔幻笔", @"马赛克", @"文字", @"背景虚化", nil];
    
    //ox 4 pad 15
    FWButton *btFunction = nil;
    int viewSpace = 15;
    int begainX = 4;
    for (int i = 0; i < 9; i++) {
        btFunction = [FWButton buttonWithType:UIButtonTypeCustom];
        
        [btFunction setTitle:[textArr objectAtIndex:i] forState:UIControlStateNormal];
        [btFunction setImage:[UIImage imageNamed:[normalImageViewImageArr objectAtIndex:i]] forState:UIControlStateNormal];
        [btFunction setImage:[UIImage imageNamed:[hightlightedImageViewImageArr objectAtIndex:i]] forState:UIControlStateHighlighted];
        [btFunction setBackgroundColor:[UIColor clearColor]];
        [btFunction.titleLabel setFont:[UIFont systemFontOfSize:10]];
        btFunction.frame = CGRectMake(begainX + (kWidth + viewSpace) * i, 3.5, kWidth, kHeight - 7);
        highlightedTextColor = [UIColor colorWithRed:19 / 255.0 green:105 / 255.0 blue:240 / 255.0 alpha:1.0];
        btFunction.highlightedTextColor = highlightedTextColor;
        btFunction.topPading = 3;
        [btFunction addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
        [self.scrollView addSubview:btFunction];
    }

　　4.添加右侧【去美容】按钮

modeView = [FWButton buttonWithType:UIButtonTypeCustom];
    [modeView setTitle:@"去美容" forState:UIControlStateNormal];
    [modeView setImage:[UIImage imageNamed:@"ic_function_meirong_a@2x.png"] forState:UIControlStateNormal];
    [modeView setImage:[UIImage imageNamed:@"ic_function_meirong_b@2x.png"] forState:UIControlStateHighlighted];
    [modeView setBackgroundColor:[UIColor clearColor]];
    [modeView.titleLabel setFont:[UIFont systemFontOfSize:10]];
    beginY = HEIGHT - kHeight;
    modeView.frame = CGRectMake(WIDTH - kWidth, beginY, kWidth, kHeight);
    highlightedTextColor = [UIColor colorWithRed:19 / 255.0 green:105 / 255.0 blue:240 / 255.0 alpha:1.0];
    modeView.highlightedTextColor = highlightedTextColor;
    modeView.topPading = 3;
    [modeView addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
    
    UIImageView *tagImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"mc_line@2x.png"]];
    tagImage.frame = CGRectMake(WIDTH - kWidth - 2, HEIGHT - kHeight + 10, 1, 50);
    tagImage.clipsToBounds = YES;
    [self.view addSubview:modeView];
    [self.view addSubview:tagImage];

项目下载