自定義按鈕與圓角的矩形中風，圖標和標籤

Question

我想使用代碼，所以這是一個可重用的對象來創建此按鈕，可以設置最小寬度，高度，或將其拉伸以適應圖標和標籤。在整個應用程序中，我們將在多個區域重複使用該按鈕，其中包括一個薄的圓形矩形筆觸，一個背景色，一個圖標（trans PNG）和一個標籤。我們希望使背景顏色和筆觸顏色可配置，以便我們可以打開/關閉按鈕。

---

編輯：幾乎工作的代碼，但該文本標籤塊是白色和需要調整圖像以適合於幀和兩個爲中心。

自定義按鈕的代碼：

#import "CustomButton.h" 

@implementation CustomButton 

- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border 
{ 
    self = [super initWithFrame:frame]; 
    if (self) 
    { 
     self = [UIButton buttonWithType:UIButtonTypeCustom]; 
     CALayer *layer = [self layer]; 

     self.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom; 
     self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter; 

     // background 
     if (background) { 
      layer.backgroundColor = (__bridge CGColorRef)(background); 
     } else { 
      layer.backgroundColor = [[UIColor darkGrayColor] CGColor]; 
     } 

     // border 
     if (border) { 
      layer.borderColor = (__bridge CGColorRef) (border); 
     } else { 
      layer.borderColor = [[UIColor lightGrayColor] CGColor]; 
     } 
     layer.cornerRadius = 2.0f; 
     layer.borderWidth = 0.5f; 

     // icon 
     UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:image]]; 
            [self addSubview:imageView]; 

     // text label 
     UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 25, 55, 15)]; 
     titleLabel.font = [[UIFont alloc] fontWithSize:7.00]; 
           titleLabel.text = title; 
           [self addSubview:titleLabel]; 

     [self setFrame:frame]; 
    } 
    return self; 
} 

@end 

---

編輯：更新後的代碼塊的上方，並得到按鈕的viewController使用在各個視圖中的下面的代碼來顯示：

CGRect buttonFrame = CGRectMake(125, 3, 52, 37); 
CustomButton *btnNearby = [[CustomButton alloc] initWithFrame:buttonFrame image:@"map.png" title:@"NEARBY" background:nil border:nil]; 
[myCustomView addSubview:btnNearby]; 

自定義按鈕出現但仍未正確格式化。

---

下面是應該顯示在按鈕的中心的例子圖標（白色PNG瓦特/反式）。的期望的功能

---

總結：

1）可重複使用的按鈕 2）可以具有最小的寬度/高度或覆蓋以匹配標籤和圖像+標籤 3的高度的寬度）具有可配置的筆畫顏色 4）匹配上面的按鈕圖標與筆畫+圖標+標籤+背景顏色 5）可以更改邊框顏色切換開/關

Answer 1

我能夠解決這個問題，我相信它可以進一步細化，但現在按鈕的問題出現按鈕。查看最終結果的快照，以及下面的工作代碼，希望能夠幫助其他人。

工作截圖：

工作代碼：

CustomButton.h

#import <UIKit/UIKit.h> 
#import <QuartzCore/QuartzCore.h> 

@interface CustomButton : UIButton 
- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border; 
@end 

CustomButton.m

#import "CustomButton.h" 

@implementation CustomButton 

- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border 
{ 
    self = [super initWithFrame:frame]; 
    if (self) 
    { 
     self = [UIButton buttonWithType:UIButtonTypeCustom]; 
     CALayer *layer = [self layer]; 

     // background 
     if (background) { 
      layer.backgroundColor = (__bridge CGColorRef)(background); 
     } else { 
      layer.backgroundColor = [[UIColor darkGrayColor] CGColor]; 
     } 

     // border 
     if (border) { 
      layer.borderColor = (__bridge CGColorRef)(border); 
     } else { 
      layer.borderColor = [[UIColor lightGrayColor] CGColor]; 
     } 
     layer.cornerRadius = 2.0f; 
     layer.borderWidth = 0.5f; 

     // icon 
     UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(14,3,20,19)]; 
     imageView.image = [UIImage imageNamed:image]; 
     imageView.contentMode = UIViewContentModeScaleAspectFit; 
     [self addSubview:imageView]; 

     // text label 
     UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 50, 14)]; 
     titleLabel.opaque = NO; 
     titleLabel.numberOfLines = 1; 
     titleLabel.textAlignment = UITextAlignmentCenter; 
     titleLabel.font = [UIFont systemFontOfSize:7.00]; 
     titleLabel.textColor = [UIColor whiteColor]; 
     titleLabel.backgroundColor = [UIColor clearColor]; 
     titleLabel.text = title; 
     [self addSubview:titleLabel]; 

     [self setFrame:frame]; 
    } 
    return self; 
} 

@end 

實例化的有賽格瑞一個UIImage層上的按鈕到視圖控制器：

// Add custom button to image view background layer 
CGRect buttonFrame = CGRectMake(125, 3, 50, 35); 
CustomButton *btnNearby = [[CustomButton alloc] initWithFrame:buttonFrame image:@"map.png" title:@"NEARBY" background:nil border:nil]; 
[myCustomView addSubview:btnNearby]; 

Answer 2

你可以嘗試這樣的事：

#import <QuartzCore/QuartzCore.h> 

@implementation CustomButton 

- (id)initWithFrame:(CGRect)frame andImageName:(NSString*)filename ofType:(NSString*)type 
{ 
    self = [super initWithFrame:frame]; 
    if (self) 
    { 
     self = [UIButton buttonWithType:UIButtonTypeCustom]; 
     CALayer *layer = [self layer]; 
     layer.borderColor = [[UIColor blueColor] CGColor]; 
     layer.cornerRadius = 4.0f; 
     layer.borderWidth = 2.0f; 

     UIImage* img = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:filename ofType:type]]; 
     UIImageView* imgView = [[UIImageView alloc] initWithImage:img]; 
     [imgView setFrame:CGRectMake(0, 0, img.size.width, img.size.height)]; 
     [self addSubview:imgView]; 

     [self setFrame:frame]; 
    } 
    return self; 
} 

- (void)switchColor 
{ 
    CALayer *layer = [self layer]; 

    if(buttonIsOn) 
     layer.borderColor = [[UIColor blueColor] CGColor]; 
    else 
     layer.borderColor = [[UIColor grayColor] CGColor]; 
} 

@end 

每次和你的使用此按鈕，只需使用：

CustomButton* cusButton = [[CustomButton alloc] initWithFrame:someFrame];

爲了交替描邊顏色，只需調用switchColor在第一線cusButton的目標方法，你應該沒問題。