【问题标题】:How can I create a big, red UIButton with iOS?如何使用 iOS 创建一个大的红色 UIButton?
【发布时间】:2010-11-28 12:11:20
【问题描述】:

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

【问题讨论】:

  • This question 与您的非常接近,并包含几种生成此类彩色按钮的方法。
  • 我最近也这样做了,并为它创建了这个按钮(and some Monotouch example code 适用于任何单点触控者): '不完全匹配 iPhone UIGlassButton
  • 我在我的网站上添加了一些在 MIT 许可下免费提供的按钮图像,它们更接近于 iOS 玻璃按钮。 (但这个论坛不允许我发布图片 b/c 我是新人)要下载它们并获取示例代码,请参阅:geneticmistakes.com/articles/1000/…
  • 这里是整个 iOS 内置资源:github.com/pixelfreak/iOS-UI-Assets

标签: ios objective-c uitableview uibutton


【解决方案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];

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

【讨论】:

  • 很好的解决方案。只有一个代码修复:您忘记了 -[UIImage imageNamed:] 中字符串的@符号。
  • 注意:安东尼的问题在这里得到了回答:stackoverflow.com/questions/2276099/a-big-green-uiimage-anyone/…
  • 优秀的帖子-感谢免费图片,我会使用它:)
  • 我相信这已经过时了,因为 UIButton 的 'setFont' 已被弃用。仍然是一个很好的答案。
  • stretchableImageWithLeftCapWidth:topCapHeight: 在 5.0 中也已被弃用,取而代之的是 resizableImageWithCapInsets:
【解决方案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];

【讨论】:

  • 你有这些透明背景的吗?当我将它们放在非白色背景的视图中时,它看起来很古怪……知道我的意思吗?
  • @Hisoka: sampleButton.alpha = 0.5;
  • 非常好。这些是从 iPhone 的 GUI 中获取的吗?
【解决方案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];

【讨论】:

  • 请注意,在应用中使用这些违反了原作者的许可。
  • 请注意,链接现在已经过期,你得到一个“找不到页面”,显然这不是你的错,但我想你可以用一个新的链接更新如果你有一个。
【解决方案4】:

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

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

【讨论】:

  • 一个缺点是你需要在你的包中保留大量的大图像,并且它们不适合不同旋转的屏幕
【解决方案5】:

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

【讨论】:

  • 虽然这可行,但它不像我提出的解决方案那样可定制,因为为了获得特殊的突出显示或状态,您需要实现 Apple 已经包含在 UIButton 类中的自定义逻辑
【解决方案6】:

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

}

【讨论】:

    猜你喜欢
    • 2015-06-05
    • 2011-10-19
    • 2012-03-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多