本文實現美圖秀秀首頁中的按鈕，它包含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];

項目下載

注：每篇隨筆的項目代碼都會有區別，請按需下載。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。