如何用iOS创建一个大的红色UIButton？

Question

使用iOS，如何创建类似于删除iPhone上的联系人时使用的红色“删除”按钮？

Answer 1

首先从可伸缩的图像开始：

alt text http://grab.by/4lP

然后你制作一个拉伸图像作为背景的按钮并应用文本。

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(kLeftMargin, 10, self.view.bounds.size.width - kLeftMargin - kRightMargin, 52)];
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
[sampleButton addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton];

显然，您需要调整框架原点和大小以匹配您的应用，以及目标，选择器和标题。

Answer 2

我还制作了一些按钮......视网膜和非视网膜版本

如果要在Cell中使用它们，只需在cellForRowAtIndexPath中使用以下代码：

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:[cell.contentView frame]];
[sampleButton setFrame:CGRectMake(0, 0, cell.bounds.size.width-20, 44)];
[sampleButton setBackgroundImage:[UIImage imageNamed:@"button_red.png"] forState:UIControlStateNormal];
[cell addSubview:sampleButton];

Answer 3

我认为那些更好（并且它们在视网膜显示上也很好看）：

从这个非常好的.psd文件生成的

.png：http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

然后将其用作UIButton背景的可拉伸图像：

UIImage* greenButton = [UIImage imageNamed:@"UIButton_green.png"]; 
UIImage *newImage = [greenButton stretchableImageWithLeftCapWidth:greenButton.size.width/2 topCapHeight:greenButton.size.height/2];
[callButton setBackgroundImage:newImage forState:UIControlStateNormal];

Answer 4

最简单的方法可能是在PSD图层中包含大量UI元素的this iPhone GUI Photoshop file，然后在Photoshop中更改大按钮的色调并将其另存为PNG。

这样做的一个好处是，您还可以为所选按钮创建版本和/或突出显示状态，并将图像分配给标准UIButton。

Answer 5

您可以在分组表视图中创建单独的部分，仅为该部分提供一行，并将该单元格的背景图像设置为红色渐变图像。但是，您必须自己重新创建该图像。

Answer 6

我想提供一个解决方案，该解决方案不使用图像，但其外观与“联系人”中的“删除”按钮相同。 在下面的示例中，我将使用假设具有分组的UITableView，静态单元格，在故事板中设计。使其中一个部分只有一个单元格。该单元格将是“删除”按钮。给单元格一个红色背景颜色（f.e。红色221，绿色0，蓝色2）

我们要做的是将两个GradientLayers添加到单元格中。第一个将覆盖细胞的上半部分。第二个将覆盖下半部分。

将QuartzCore添加到您的实现文件中：

#import <QuartzCore/QuartzCore.h>

首先为这个单元格建立一个出口：

@property (strong, nonatomic) IBOutlet UITableViewCell *cellDelete;

创建一个格式化单元格的方法：

- (void)formatCellDelete
{
    // Top Gradient //
    CAGradientLayer *gradientTop = [CAGradientLayer layer];

    // Make a frame for the layer based on the size of the cells contentView
    // Make it half the height
    // The width will be -20 so the gradient will not overflow
    CGRect frame = CGRectMake(0, 0, _cellDelete.contentView.frame.size.width - 20, _cellDelete.contentView.frame.size.height / 2);
    gradientTop.frame = frame;

    gradientTop.cornerRadius = 8;

    UIColor* topColor = [UIColor colorWithWhite:1.0f alpha:0.75f];
    UIColor* bottomColor = [UIColor colorWithWhite:1.0f alpha:0.0f];
    gradientTop.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil];

    [_cellDelete.contentView.layer setMasksToBounds:YES];
    [_cellDelete.contentView.layer insertSublayer:gradientTop atIndex:0];



    // Bottom Gradient //
    CAGradientLayer *gradientBottom = [CAGradientLayer layer];

    // Make a frame for the layer based on the size of the cells contentView
    // Make it half the height
    // The width will be -20 so the gradient will not overflow
    frame = CGRectMake(0, 0, _cellDelete.contentView.frame.size.width - 20, _cellDelete.contentView.frame.size.height / 2);
    // And move to bottom
    frame.origin.y = frame.size.height;
    gradientBottom.frame = frame;

    topColor = [UIColor colorWithWhite:0.0f alpha:0.05f]; //0.20
    bottomColor = [UIColor colorWithWhite:0.0f alpha:0.0f];
    gradientBottom.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil];

    [_cellDelete.contentView.layer setMasksToBounds:YES];
    [_cellDelete.contentView.layer insertSublayer:gradientBottom atIndex:0];


    // Define a selected-backgroundColor so the cell changes color when the user tabs it
    UIView *bgColorView = [[UIView alloc] init];
    [bgColorView setBackgroundColor:[UIColor colorWithRed:(float)(0.502) green:0.0 blue:0.0 alpha:1.000]];
    bgColorView.layer.cornerRadius = 10;
    [_cellDelete setSelectedBackgroundView:bgColorView];
}

上面的内容将为您的手机提供玻璃看起来像“联系人”中的“删除”按钮。 但我们也希望它在用户点击时改变颜色。这就是上述方法中的最后一段代码。它将使用较暗的颜色设置不同的视图作为selectedBackgroundView。

点击后，单元格将保持选中并保持其深色。要自动取消选择单元格，我们执行以下操作：

从一个常量开始，该常量定义删除单元格的部分nr：

static NSInteger const SECTION_DELETE = 1;

现在实现(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath方法（在UITableViewDelegate中定义）：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{

    if(indexPath.section == SECTION_DELETE){

        [tableView deselectRowAtIndexPath:indexPath animated:YES];
    }


    // Navigation logic may go here. Create and push another view controller.
    /*
      *detailViewController = [[ alloc] initWithNibName:@"" bundle:nil];
     // ...
     // Pass the selected object to the new view controller.
     [self.navigationController pushViewController:detailViewController animated:YES];
     */

}