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

ストロークの色を交互に変更するには、の target メソッドswitchColorの最初の行を呼び出すだけcusButtonで問題ありません。

于 2012-09-17T18:11:12.640 に答える
0

私はこの問題を解決することができました、そしてそれはさらに洗練されることができると確信しています、しかしボタンは今問題のように表示されます。最終結果のスナップと、うまくいけば他の人を助けるために以下の作業コードを参照してください。

作業用スクリーンショット: ここに画像の説明を入力してください

作業コード:

CustomButton.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

CustomButton.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

ViewControllerにセグエしたUIImageレイヤーのボタンをインスタンス化しました。

// 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 に答える