你的位置:首页 > 操作系统

[操作系统]美图秀秀美化图片界面设计(一)


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

 

 

项目下载