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

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

项目下载