本文實(shí)現(xiàn)美圖秀秀首頁(yè)中的按鈕，它包含3張圖片和一個(gè)文本。通過(guò)開(kāi)發(fā)按鈕，我們可以學(xué)到iOS的自定義控件，繪制圖片和文本的知識(shí)。【聲明：本博客只能用作學(xué)習(xí)用途，不得用于商業(yè)用途，圖片資源均來(lái)自官方，產(chǎn)生糾紛，本人不負(fù)責(zé)】效果如下圖

　　　　

關(guān)于繪制控件顯示內(nèi)容，我們需要使用CoreGraphics框架，下面簡(jiǎn)單介紹一下CoreGraphics。

?

　　CoreGraphics

　　Core Graphics是蘋(píng)果提供的一套基于C的API，用于繪圖操作。Core Graphics 使用圖形上下文進(jìn)行工作，這個(gè)上下文的作用像畫(huà)家的畫(huà)布一樣。在圖形上下文之外是無(wú)法繪圖的，我們可以自己創(chuàng)建一個(gè)上下文，但是性能和內(nèi)存的使用上，效率是非常低得。我們可以通過(guò)派生一個(gè)UIView的子類(lèi)，獲得它的上下文。在UIView中調(diào)用drawRect：方法時(shí)，會(huì)自動(dòng)準(zhǔn)備好一個(gè)圖形上下文，可以通過(guò)調(diào)用UIGraphicsGetCurrentContext（）來(lái)獲取。 因?yàn)樗沁\(yùn)行期間繪制圖片，我們可以動(dòng)態(tài)的做一些額外的操作。drawRect:是系統(tǒng)的方法，不要從代碼里面直接調(diào)用 drawRect：，而應(yīng)該使用setNeedsDisplay重繪.

　　優(yōu)點(diǎn)：

　　快速、高效，減小應(yīng)用的文件大小。同時(shí)可以自由地使用動(dòng)態(tài)的、高質(zhì)量的圖形圖像。 使用Core Graphics，可以創(chuàng)建直線、路徑、漸變、文字與圖像等內(nèi)容，并可以做變形處理。

?

　　圖片資源

第一張為按鈕UIControlStateNormal正常狀態(tài)下的背景圖片，第二張為按鈕按下去的背景圖片。‘

　　繪制背景

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.fontlineBreakMode:self.titleLabel.lineBreakModealignment: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];

?

?

項(xiàng)目下載

注：每篇隨筆的項(xiàng)目代碼都會(huì)有區(qū)別，請(qǐng)按需下載。

?

總結(jié)

以上是生活随笔為你收集整理的美图秀秀首页界面按钮设计（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。