0

按钮示例

我想使用代码重新创建此按钮，使其成为可重复使用的对象，您可以设置最小宽度、高度或拉伸以适合图标和标签。在整个应用程序中，我们将在多个区域重复使用该按钮，它将包括一个细圆角矩形描边、一个背景颜色、一个图标（trans PNG）和一个标签。我们想让背景颜色和笔触颜色可配置，以便我们可以打开/关闭按钮。

具有背景图案的视图区域上的示例布局

编辑：几乎可以工作的代码，但文本标签块是白色的，需要调整图像大小以适合框架并且两者都要居中。

自定义按钮代码：

#import "CustomButton.h"

@implementation CustomButton

- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border 
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self = [UIButton buttonWithType:UIButtonTypeCustom];
        CALayer *layer = [self layer];

        self.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom;
        self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

        // background
        if (background) {
            layer.backgroundColor = (__bridge CGColorRef)(background);
        } else {
            layer.backgroundColor = [[UIColor darkGrayColor] CGColor];
        }

        // border
        if (border) {
            layer.borderColor = (__bridge CGColorRef) (border);
        } else {
            layer.borderColor = [[UIColor lightGrayColor] CGColor];
        }
        layer.cornerRadius = 2.0f;
        layer.borderWidth = 0.5f;

        // icon
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:image]];
                                  [self addSubview:imageView];

        // text label
        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 25, 55, 15)];
        titleLabel.font = [[UIFont alloc] fontWithSize:7.00];
                                titleLabel.text = title;
                                [self addSubview:titleLabel];

        [self setFrame:frame];
    }
    return self;
}

@end

编辑：更新了上面的代码块，并在 viewController 的相应视图中使用以下代码显示按钮：

CGRect buttonFrame = CGRectMake(125, 3, 52, 37);
CustomButton *btnNearby = [[CustomButton alloc] initWithFrame:buttonFrame image:@"map.png" title:@"NEARBY" background:nil border:nil];
[myCustomView addSubview:btnNearby];

自定义按钮出现，但格式仍然不正确。

在此处输入图像描述

这是一个应该出现在按钮中心的示例图标（白色 PNG 带反式）。

显示在按钮中的示例地图图钉图标

所需功能的摘要：

1) 可重复使用的按钮 2) 可以具有最小宽度/高度或覆盖以匹配标签的宽度和图像的高度 + 标签 3) 具有可配置的笔划颜色 4) 匹配上面的按钮图标与笔划 + 图标 + 标签 + 背景颜色 5) 可以改变打开/关闭的边框颜色

4

2 回答 2

1

你可以尝试这样的事情：

#import <QuartzCore/QuartzCore.h>

@implementation CustomButton

- (id)initWithFrame:(CGRect)frame andImageName:(NSString*)filename ofType:(NSString*)type
{
    self = [super initWithFrame:frame];
    if (self) 
    {
        self = [UIButton buttonWithType:UIButtonTypeCustom];
        CALayer *layer = [self layer];
        layer.borderColor = [[UIColor blueColor] CGColor];
        layer.cornerRadius = 4.0f;
        layer.borderWidth = 2.0f;

        UIImage* img = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:filename ofType:type]];
        UIImageView* imgView = [[UIImageView alloc] initWithImage:img];
        [imgView setFrame:CGRectMake(0, 0, img.size.width, img.size.height)];
        [self addSubview:imgView];

        [self setFrame:frame];
    }
    return self;
}

- (void)switchColor
{
    CALayer *layer = [self layer];

    if(buttonIsOn)
        layer.borderColor = [[UIColor blueColor] CGColor];
    else
        layer.borderColor = [[UIColor grayColor] CGColor];
}

@end

每次使用此按钮时，只需使用：

CustomButton* cusButton = [[CustomButton alloc] initWithFrame:someFrame];

为了交替描边颜色，只需调用目标方法switchColor的第一行就cusButton可以了。

于 2012-09-17T18:11:12.640 回答
0

我能够解决这个问题，我相信它可以进一步完善，但现在按钮出现在问题中。请参阅最终结果的快照，以及下面的工作代码，希望能对其他人有所帮助。

工作截图： 在此处输入图像描述

工作代码：

自定义按钮.h

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface CustomButton : UIButton
- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border;
@end

自定义按钮.m

#import "CustomButton.h"

@implementation CustomButton

- (id)initWithFrame:(CGRect)frame image:(NSString *)image title:(NSString *)title background:(UIColor *)background border:(UIColor *)border 
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self = [UIButton buttonWithType:UIButtonTypeCustom];
        CALayer *layer = [self layer];

        // background
        if (background) {
            layer.backgroundColor = (__bridge CGColorRef)(background);
        } else {
            layer.backgroundColor = [[UIColor darkGrayColor] CGColor];
        }

        // border
        if (border) {
            layer.borderColor = (__bridge CGColorRef)(border);
        } else {
            layer.borderColor = [[UIColor lightGrayColor] CGColor];
        }
        layer.cornerRadius = 2.0f;
        layer.borderWidth = 0.5f;

        // icon
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(14,3,20,19)];
        imageView.image = [UIImage imageNamed:image];
        imageView.contentMode  = UIViewContentModeScaleAspectFit;
        [self addSubview:imageView];

        // text label
        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 50, 14)];
        titleLabel.opaque = NO;
        titleLabel.numberOfLines = 1;
        titleLabel.textAlignment = UITextAlignmentCenter;
        titleLabel.font = [UIFont systemFontOfSize:7.00];
        titleLabel.textColor = [UIColor whiteColor];
        titleLabel.backgroundColor = [UIColor clearColor];
        titleLabel.text = title;
        [self addSubview:titleLabel];

        [self setFrame:frame];
    }
    return self;
}

@end

实例化 UIImage 层上的按钮，该按钮与 View Controller 有 segue：

// Add custom button to image view background layer
CGRect buttonFrame = CGRectMake(125, 3, 50, 35);
CustomButton *btnNearby = [[CustomButton alloc] initWithFrame:buttonFrame image:@"map.png" title:@"NEARBY" background:nil border:nil];
[myCustomView addSubview:btnNearby];
于 2012-09-17T23:52:58.490 回答