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

How can I create a big, red UIButton with iOS?

提问by igul222

Using iOS, how would I go about creating a red "delete" button similar to the one used when deleting contacts on the iPhone?

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

回答by coneybeare

You first start with a stretchable image:

你首先从一个可拉伸的图像开始：

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

替代文字 http://grab.by/4lP

Then you make a button with the stretched image as the background and apply text.

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

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];

Obviously, you will need to adjust the frame origin and size to match your app, as well as the target, selector, and title.

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

回答by Staeff

I've also made some buttons...retina and non-retina versions

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

If you want to use them in a Cell just use the following code in cellForRowAtIndexPath:

如果您想在 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];

回答by yonel

I think those ones are better (and they look fine on retina displaytoo) :

我认为那些更好（它们在视网膜显示器上看起来也不错）：

.png generated from this very nice .psd file : http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

从这个非常好的 .psd 文件生成的 .png：http: //www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

And then use it as a strechable image for the background of your UIButton:

然后将其用作您的背景的可拉伸图像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];

回答by Ramin

Probably the simplest way to do it is to snag this iPhone GUI Photoshop filethat contains lots of UI elements in PSD layers, then change the tint of the large button in Photoshop and save it as a PNG.

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

One advantage of doing it this way is that you can also create versions for button selected and/or highlight state and assign the images to a standard UIButton.

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

回答by Tim

You can create a separate section in your grouped table view, give that section only one row, and set that cell's background image to a red gradient image. You'll have to recreate that image on your own, though.

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

回答by Brabbeldas

I would like to contribute a solution which does not use images but which gives the same look as the 'delete' button in Contacts. In the below example I will use assume a UITableView with grouped, static cells, designed in storyboard. Make one of the sections have only a single cell. That cell will be the 'delete' button. Give the cell a red background color (f.e. Red 221, Green 0, Blue 2)

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

What we will do is add two GradientLayers to the cell. The first will cover the upper half of the cell. The second will cover the lower half.

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

Add QuartzCore to your implementation file:

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

#import <QuartzCore/QuartzCore.h>

Start with making an outlet to this cell:

首先为这个单元做一个出口：

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

Create a method in which the cell will be formatted:

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

- (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];
}

The above will give your cell the glass-look like the 'delete' button in Contacts. But we also want it to change color when the user taps it. This is what the last piece of code in the above method will do. It will set a different view with a darker color as the selectedBackgroundView.

以上将使您的单元格看起来像联系人中的“删除”按钮。但我们也希望它在用户点击时改变颜色。这就是上述方法中最后一段代码的作用。它将设置一个颜色较深的不同视图作为 selectedBackgroundView。

After tapping the cell will stay selected and will keep its dark color. To automatically deselect the cell we do the following:

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

Start with a constant which defines the section nr of your delete cell:

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

static NSInteger const SECTION_DELETE = 1;

Now implement the (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPathmethod (defined in UITableViewDelegate):

现在实现(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];
     */

}