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

[操作系统]美图秀秀首页界面按钮设计(二)


  本文实现美图秀秀首页中的按钮,它包含3张图片和一个文本。通过开发按钮,我们可以学到iOS的自定义控件,绘制图片和文本的知识。【声明:本博客只能用作学习用途,不得用于商业用途,图片资源均来自官方,产生纠纷,本人不负责】效果如下图

    

关于绘制控件显示内容,我们需要使用CoreGraphics框架,下面简单介绍一下CoreGraphics。

 

  CoreGraphics

  Core Graphics是苹果提供的一套基于C的API,用于绘图操作。Core Graphics 使用图形上下文进行工作,这个上下文的作用像画家的画布一样。在图形上下文之外是无法绘图的,我们可以自己创建一个上下文,但是性能和内存的使用上,效率是非常低得。我们可以通过派生一个UIView的子类,获得它的上下文。在UIView中调用drawRect:方法时,会自动准备好一个图形上下文,可以通过调用UIGraphicsGetCurrentContext()来获取。 因为它是运行期间绘制图片,我们可以动态的做一些额外的操作。drawRect:是系统的方法,不要从代码里面直接调用 drawRect:,而应该使用setNeedsDisplay重绘.

  优点:

  快速、高效,减小应用的文件大小。同时可以自由地使用动态的、高质量的图形图像。 使用Core Graphics,可以创建直线、路径、渐变、文字与图像等内容,并可以做变形处理。

 

  图片资源

第一张为按钮UIControlStateNormal正常状态下的背景图片,第二张为按钮按下去的背景图片。‘

  绘制背景

 if (self.state == UIControlStateNormal) {    buttonImage = self.normalButtonImage;    CGContextSetFillColorWithColor(context, self.backgroundColor.CGColor);  }  else {    CGContextSetFillColorWithColor(context, self.backgroundColorHighlighted.CGColor);    if (self.titleLabel.text.length > 0) {    }    if (self.normalButtonImage != self.highlightedButtonImage && self.highlightedButtonImage != nil) {      buttonImage = self.highlightedButtonImage;    }    else{      buttonImage = self.normalButtonImage;    }  }

 

  绘制按钮显示图片

    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);

  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)];  }

 

  绘制文本

  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];  }

 

  添加按钮

btnHome = [FWButton button];    [btnHome setTitle:[textArr objectAtIndex:i] forState:UIControlStateNormal];    [btnHome setImage:[UIImage imageNamed:[imageViewImageArr objectAtIndex:i]] forState:UIControlStateNormal];    [btnHome setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:[imageViewBackImageArr objectAtIndex:i]]]];    [btnHome setBackgroundColorHighlighted:[UIColor colorWithPatternImage:[UIImage imageNamed:[highLightedBackImageArr objectAtIndex:i]]]];    btnHome.frame = CGRectMake(row * (kWidth + kPadding) + page * WIDTH + startX, col * (kHeight + kPadding) + startY, kWidth, kHeight);    [btnHome.titleLabel setFont:[UIFont systemFontOfSize:14]];    [btnHome addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];    btnHome.topPading = 0.5;        [self.scrolleView addSubview:btnHome];

 

 

项目下载

注:每篇随笔的项目代码都会有区别,请按需下载。