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