Làm thế nào để tạo UIButton với một gradient đen cho iPhone?

Question

Tôi muốn tạo UIButton với chủ đề màu đen bình thường trong iOS. Tôi đã xem tài liệu và dường như không thể tìm ra cách để làm điều này. Khi tôi tạo nút, tôi nhận được nút tròn được làm tròn không có màu.

Đây là mã của tôi:

UIButton* leagueTeamButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 

Bất kỳ đề xuất về làm thế nào tôi có thể thêm các tiêu chuẩn theo chủ đề gradient đen nút?

Answer 1

Tạo một (hoặc hai, nếu bạn muốn thay đổi giao diện khi nhấn xuống) trong Photoshop - hoặc bất kỳ phần mềm xử lý hình ảnh nào - và đưa vào thư mục tài nguyên của dự án, sử dụng mã sau để thêm hình ảnh dưới dạng UIButton:

UIButton *yourButton=[UIButton buttonWithType:UIButtonTypeCustom]; 
[yourButton setFrame:CGRectMake(0,0,10,10)]; 
[yourButton addTarget:self action:@selector(functionYouWantToCall:) forControlEvents:UIControlEventTouchUpInside]; 

[yourButton setImage:[UIImage imageNamed:@"imageNormalState.png"] forState:UIControlStateNormal]; 
[yourButton setImage:[UIImage imageNamed:@"imageWhenPressDown.png"] forState:UIControlStateHighlighted]; // option if you want to display another image (i.e. darker one) when user press the button 

Answer 2

Bạn có thể có nút nền màu đen không có hiệu ứng tô chuyển tiếp, bạn phải đặt màu nền thành màu đen và nhập làm nút tùy chỉnh. Đối với hiệu ứng gradient, tôi sẽ đề nghị bạn đặt một hình ảnh làm hình nền của nút của bạn và đặt loại đó là nút tùy chỉnh.

Answer 3

Bạn cũng có thể dễ dàng làm điều đó bằng lớp:

-(void) addGradient:(UIButton *) _button { 

    // Add Border 
    CALayer *layer = _button.layer; 
    layer.cornerRadius = 8.0f; 
    layer.masksToBounds = YES; 
    layer.borderWidth = 1.0f; 
    layer.borderColor = [UIColor colorWithWhite:0.5f alpha:0.2f].CGColor; 

    // Add Shine 
    CAGradientLayer *shineLayer = [CAGradientLayer layer]; 
    shineLayer.frame = layer.bounds; 
    shineLayer.colors = [NSArray arrayWithObjects: 
         (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor, 
         (id)[UIColor colorWithWhite:1.0f alpha:0.2f].CGColor, 
         (id)[UIColor colorWithWhite:0.75f alpha:0.2f].CGColor, 
         (id)[UIColor colorWithWhite:0.4f alpha:0.2f].CGColor, 
         (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor, 
         nil]; 
    shineLayer.locations = [NSArray arrayWithObjects: 
          [NSNumber numberWithFloat:0.0f], 
          [NSNumber numberWithFloat:0.5f], 
          [NSNumber numberWithFloat:0.5f], 
          [NSNumber numberWithFloat:0.8f], 
          [NSNumber numberWithFloat:1.0f], 
          nil]; 
    [layer addSublayer:shineLayer]; 
} 

Answer 4

Nghe là một ví dụ cho việc xem của bạn với màu gradient bạn có thể làm tương tự với nút.

UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease]; 
    CAGradientLayer *gradient = [CAGradientLayer layer]; 
    gradient.frame = view.bounds; 


    static NSMutableArray *colors = nil; 
    if (colors == nil) { 
    colors = [[NSMutableArray alloc] initWithCapacity:3]; 
    UIColor *color = nil; 
    color = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0]; 
    [colors addObject:(id)[color CGColor]]; 
    color = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0]; 
    [colors addObject:(id)[color CGColor]]; 
    color = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0]; 
    [colors addObject:(id)[color CGColor]]; 
} 
// [(CAGradientLayer *)self.layer setColors:colors]; 
// [(CAGradientLayer *)self.layer setLocations:[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.48], [NSNumber numberWithFloat:1.0], nil]]; 

gradient.colors = colors; 
    [view.layer insertSublayer:gradient atIndex:0]; 
[self.view addSubview:view]; 

Answer 5

Phương pháp này tạo nút tùy chỉnh đẹp mắt. Tôi kết hợp các ví dụ cho lớp gradient và cho một lớp tỏa sáng.

-(void) myButtonChange: (UIButton*) btn 
{ 
    [btn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted]; 

    CAGradientLayer *btnGradient = [CAGradientLayer layer]; 
    btnGradient.frame = btn.bounds; 
    btnGradient.colors = [NSArray arrayWithObjects: 
         (id)[[UIColor colorWithRed:255.0f/255.0f green:255.0f/255.0f blue:255.0f/255.0f alpha:.6f] CGColor], 
         (id)[[UIColor colorWithRed:200.0f/255.0f green:200.0f/255.0f blue:200.0f/255.0f alpha:.4f] CGColor], 
         (id)[[UIColor colorWithRed:150.0f/255.0f green:150.0f/255.0f blue:150.0f/255.0f alpha:.4f] CGColor], 
         (id)[[UIColor colorWithRed:100.0f/255.0f green:100.0f/255.0f blue:100.0f/255.0f alpha:.4f] CGColor], 
         (id)[[UIColor colorWithRed:50.0f/255.0f green:50.0f/255.0f blue:50.0f/255.0f alpha:.4f] CGColor], 
         (id)[[UIColor colorWithRed:5.0f/255.0f green:5.0f/255.0f blue:5.0f/255.0f alpha:.4f] CGColor], 

         nil]; 
    [btn.layer insertSublayer:btnGradient atIndex:0]; 

    CAGradientLayer *glossLayer = [CAGradientLayer layer]; 
    glossLayer.frame = btn.bounds; 
    glossLayer.colors = [NSArray arrayWithObjects: 
        (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor, 
        (id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor, 
        (id)[UIColor colorWithWhite:0.75f alpha:0.0f].CGColor, 
        (id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor, 
        nil]; 
    glossLayer.locations = [NSArray arrayWithObjects: 
         [NSNumber numberWithFloat:0.0f], 
         [NSNumber numberWithFloat:0.5f], 
         [NSNumber numberWithFloat:0.5f], 
         [NSNumber numberWithFloat:1.0f], 
         nil]; 
    [btn.layer insertSublayer:glossLayer atIndex:0]; 

    CALayer *btnLayer = [btn layer]; 
    [btnLayer setMasksToBounds:YES]; 

    UIColor*mycolor = btn.backgroundColor; 
    [btn.layer setBorderColor:[mycolor CGColor]]; 
    [[btn layer] setBorderWidth:2.0f]; 
    [[btn layer] setCornerRadius:10.0f];  
} 

Đính kèm tất cả các nút đến một bộ sưu tập IBOutlet ...

@property (strong, nonatomic) IBOutletCollection(UIButton) NSArray *bigbuttongroup; 

... và sau đó chạy phương pháp này khi bạn cần phải

for(UIButton *btn in self.bigbuttongroup) 
    { 
     [self myButtonChange:btn]; 
    }