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

Question

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

Answer 1

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

替代文字 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

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

.png 从这个非常好的 .psd 文件生成：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

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

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

Answer 5

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

Answer 6

我想提供一个不使用图像但外观与联系人中的“删除”按钮相同的解决方案。在下面的示例中，我将使用在故事板中设计的带有分组的静态单元格的 UITableView 。使其中一个部分只有一个单元格。该单元格将是“删除”按钮。给单元格一个红色的背景颜色（fe Red 221，Green 0，Blue 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];
     */

}