web-dev-qa-db-ja.com

iPhoneでボタンの背景色を設定するにはどうすればよいですか?

ボタンのカスタム背景色を設定するにはどうすればよいですか?

Interface Builderには、これを行うためのインターフェイスがないようです。

プログラムでのみ利用できますか?もしそうなら、例を挙げてください。

37
Alex

あなたの質問をrequire(私と同じように)programmaticボタンの色を設定する方法に読みました。これはUIKitからの明らかな省略であり、ドキュメント化されていないUIGlassButtonを機能させることができませんでした。

解決済み単一のセグメントUISegmentedControlを使用して、tintColorを設定できます。

UISegmentedControl * btn = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObject:name]];
btn.momentary = YES;
btn.segmentedControlStyle = UISegmentedControlStyleBar;
btn.tintColor = color;
[btn addTarget:self action:@selector(action:) forControlEvents:UIControlEventValueChanged];

momentaryおよびsegmentedControlStyleプロパティは重要であり、NSString *名の代わりに画像を使用できることに注意してください。

缶詰の画像の有限セットを使用できる場合、エンドキャップ付きの伸縮可能な画像は正常に機能しますが、それは要件に適合しません!例えば。、

buttonImage   = [[UIImage imageNamed:@"button.png"] stretchableImageWithLeftCapWidth:26 topCapHeight:16];
20
Tim James

これを実現するには、伸縮可能な画像を使用する必要があることがわかりました。 AppleのUICatalogの例には、この方法で描画される1つ以上の色付きのボタンがあります。テンプレートの画像を使用して、ボタンのニーズに合わせて色を変更できます。

Interface Builderでこれを行うかどうかはわかりませんが、次のコードを使用してボタンを作成し、そのコンテンツに画像を使用することができました。

downloadButton = [[UIButton alloc] initWithFrame:CGRectMake(36, 212, 247, 37)];

downloadButton.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
downloadButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

[downloadButton setTitle:NSLocalizedStringFromTable(@"Download", @"Localized", nil) forState:UIControlStateNormal]; 
[downloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[downloadButton setFont:[UIFont boldSystemFontOfSize:14.0]];

UIImage *newImage = [[UIImage imageNamed:@"greenButton.png"] stretchableImageWithLeftCapWidth:12.0f topCapHeight:0.0f];
[downloadButton setBackgroundImage:newImage forState:UIControlStateNormal];

[downloadButton addTarget:self action:@selector(downloadNewItem) forControlEvents:UIControlEventTouchDown];

downloadButton.backgroundColor = [UIColor clearColor];
[downloadDisplayView addSubview:downloadButton];
16
Brad Larson

角丸四角形ボタンのビューの背景色を設定しても、ボタンの背景色は変わりません。ボタンをカスタムボタン(インスペクタの最初のドロップダウン)にしてから、背景色を設定してみてください。あなたは望ましい効果を得るでしょう:)

15
lostInTransit

ボタンの色はまだ問題のようです。次のカテゴリは、UIColorパラメーターを受け取るインスタンスメソッドを介して、プログラムでボタンの背景画像を完全に設定します。ボタンの背景画像ファイルを作成する必要はありません。 UIControlStateに基づいてボタンの動作を保持します。そして、角を丸く保ちます。

ヘッダーファイルUIButton + ColoredBackground.h

#import <UIKit/UIKit.h>

@interface UIButton (ColoredBackground)

- (void)setBackgroundImageByColor:(UIColor *)backgroundColor forState:(UIControlState)state;

@end

およびUIButton + ColoredBackground.mのコンテンツ

#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>

@implementation UIButton (ColoredBackground)

- (void)setBackgroundImageByColor:(UIColor *)backgroundColor forState:(UIControlState)state{

    // tcv - temporary colored view
    UIView *tcv = [[UIView alloc] initWithFrame:self.frame];
    [tcv setBackgroundColor:backgroundColor];

    // set up a graphics context of button's size
    CGSize gcSize = tcv.frame.size;
    UIGraphicsBeginImageContext(gcSize);
    // add tcv's layer to context
    [tcv.layer renderInContext:UIGraphicsGetCurrentContext()];
    // create background image now
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    // set image as button's background image for the given state
    [self setBackgroundImage:image forState:state];
    UIGraphicsEndImageContext();

    // ensure rounded button
    self.clipsToBounds = YES;
    self.layer.cornerRadius = 8.0;

    [tcv release];

}

@end

新しいメソッドは、すべてのUIButtonインスタンスで次のように呼び出されます。

[myButton setBackgroundImageByColor:[UIColor greenColor] forState:UIControlStateNormal];
10
alex

http://github.com/dermdaly/ButtonMaker

このアプリケーションを使用してUIbutton画像を生成できます...そしてボタンの背景画像として設定できます

9
S.P.

ボタン属性パレットでボタンの種類を「カスタム」に設定します。これにより、背景に選択した色の正方形ボタンが表示されます。

従来のボタンに似ているが、色が異なるボタンが必要な場合は、何らかの画像編集ソフトウェアにアクセスして作成する必要があります(カスタムボタンにはphotoshopを使用しています)。

5
acreek

このリンクは、問題に対するエレガントな解決策を提供します... http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/

5
Mark Shephard

ボタンを丸く保つために、使用するのはどうですか

view.layer.cornerRadius = 8;

ここで説明

iPhoneで角の丸いUILabelを作成するにはどうすればよいですか?

4
Alex

@Patchのコードバージョンを少し変更しました。私にとっての問題は、ポートレートモードからランドスケープモードに切り替えるときに、古いバージョンが角の丸みを汚すということでした。そのため、このバージョンではstretchableImageWithLeftCapWidth:topCapHeightメソッドを使用しました。

#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>

#define kCornerRadius 8.0f
#define kStrokeColor [UIColor blackColor]
#define kStrokeWidth 1.0f

@implementation UIButton (ColoredBackground)

- (void)setBackgroundImageByColor:(UIColor *)backgroundColor forState:(UIControlState)state{


CGSize gcSize = CGSizeMake(2*kCornerRadius +1, self.bounds.size.height);
UIGraphicsBeginImageContext(gcSize);
CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeOverlay);



CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();

UIColor *gradientStart = [UIColor colorWithRed:0.80 green:0.80 blue:0.80 alpha:0.2];
UIColor * gradientEnd = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.2];
NSArray *colors = [NSArray arrayWithObjects:(id)gradientStart.CGColor, (id)gradientEnd.CGColor, nil];
CGFloat locations[2] = { 0.0f, 1.0f };
CGGradientRef _gradient = CGGradientCreateWithColors(rgb, (__bridge CFArrayRef)colors, locations);
CGColorSpaceRelease(rgb);
CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), _gradient, CGPointMake(0.0, kStrokeWidth), CGPointMake(0.0, self.bounds.size.height-kStrokeWidth), 0);

UIBezierPath *outsideEdge = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0.0, 0.0, gcSize.width, gcSize.height) cornerRadius:kCornerRadius];
[backgroundColor setFill];
[kStrokeColor setStroke];
outsideEdge.lineWidth = kStrokeWidth;
[outsideEdge stroke];
[outsideEdge fill];

// Create the background image
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();    
UIGraphicsEndImageContext(); 

// Set image as button's background image (stretchable) for the given state
[self setBackgroundImage:[image stretchableImageWithLeftCapWidth:kCornerRadius topCapHeight:0.0] forState:state];

// Ensure rounded button
self.clipsToBounds = YES;
self.layer.cornerRadius = kCornerRadius;



}

@end

使用法は変更されていません。エッジがより明確になりました。また、グラデーションを追加してプラスチックを増やしました。ただし、これも削除できます。

2
Denny1989

@ user200212のソリューション(http://stackoverflow.com/a/8547424)のバリエーションを次に示します。 UIBezierCurveクラスを使用してボタンを塗りつぶし、その周りに1pxの黒い境界線を描画します。

UIButton + ColoredBackground.h

//  UIButton+ColoredBackground.h

#import <UIKit/UIKit.h>

@interface UIButton (ColoredBackground)

- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state;
+ (UIColor *) silverColor;

@end

UIButton + ColoredBackground.m

//  UIButton+ColoredBackground.m
#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>

@implementation UIButton (UIButton_ColoredBackground)

- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state{

    CGSize gcSize = self.bounds.size;
    UIGraphicsBeginImageContext(gcSize);

    // Create a Bezier Path around the button, and fill it with the background color
    UIBezierPath *outsideEdge = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:8.0f];
    [backgroundColor setFill];
    [[UIColor blackColor] setStroke];
    outsideEdge.lineWidth = 1.0;
    [outsideEdge fill];
    [outsideEdge stroke];

    // Create the background image
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();    

    UIGraphicsEndImageContext(); 

    // Set image as button's background image for the given state
    [self setBackgroundImage:image forState:state];

    // Ensure rounded button
    self.clipsToBounds = YES;
    self.layer.cornerRadius = 8.0;
}

@end

使用法:

[myButton setBackgroundImageByColor:[UIColor greenColor] forState:UIControlStateNormal];
1
Patch

ティムジェームスのソリューション(単一セグメントのセグメント化されたコントロール)は、まともな青いグラデーションの背景を持つシンプルな[保存]ボタンが必要なときに機能しました。ペン先に2セグメントコントロールを作成し、最初のセグメントを必要に応じて設定し、[mySegmentedControl removeSegmentAtIndex:1 animated:NO]を使用して-viewWillAppearの下の2番目のセグメントをプログラムで削除しました。私の目的では、ペン先のセグメント化されたコントロールの最初のセグメントで「モメンタリ」がアクティブ(チェック)である必要があり、「選択」はどちらのセグメントでもアクティブではありませんでした。 「変更された値」は、セグメント化されたコントロールの接続するアクションです。

1
iTinck

uitableviewのようにシステムの削除ボタンのようなボタンを作成するには、次のようにしました


UIButton *h=[[UIButton  alloc]init];
[[h layer] setCornerRadius:8.0f];
[[h layer] setMasksToBounds:YES];
[[h layer] setBorderWidth:1.0f];
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
[gradientLayer setBounds:[h bounds]];
[gradientLayer setPosition:CGPointMake([h bounds].size.width/2, [h bounds].size.height/2)];
[gradientLayer setColors:[NSArray arrayWithObjects:
(id)[[UIColor darkGrayColor]CGColor],(id)[[UIColor blackColor] CGColor], nil]];
[[h layer] insertSublayer:gradientLayer atIndex:0];

すべてのオブジェクトを解放し、QuartzCore/QuartzCore.hをインポートして、このフレームワークをプロジェクトに追加します。

1
saurabh

UIGlassButton画像を作成する、私が作成した無料アプリを次に示します。ボタンの種類をカスタムに設定します。 http://iTunes.Apple.com/us/app/uibutton-builder/id408204223?mt=8

1
Bryan

Fireworksで独自のボタンを作成して、この問題を解決しました。塗りつぶしの色と境界線の色を使用して、必要な大きさの丸い長方形を描きました。キャンバスをトリミングし、PNGとして保存します。 XCodeで、ファイルをResourcesフォルダーに追加します。 Interface Builderでカスタムボタンを使用して、そのPNGとして画像を指定できます。必要に応じてサイズを変更したり、テキストを一番上に配置したりします。元のサイズからサイズを大きく変更する必要がある場合、角の曲線が歪む場合があります。

1
Bob Snider

そのため、カテゴリを使用した非常にシンプルなソリューションを見つけました。 (非常に単純なので、何かハッキーなことをしなければならないと思いますが、私には見えません!)

UIButtonのカテゴリを定義し(概要がわからない場合は、クラスを最小限に「拡張」する方法です。つまり、クラスにメソッドを追加し、プロパティは追加しません)、UIButtonのメソッドを作成します。 UIButtonのスーパークラス(UIControl)setBackgroundColorメソッドを呼び出すsetBackgroundColor」。

@implementation UIButton (coloredBackgroundButton)

-(void)setBackgroundColor:(UIColor *)backgroundColor {
    [super setBackgroundColor:backgroundColor];
}

UIButtonを使用する場合は常に、このカテゴリが宣言されているヘッダーファイルをインポートする限り、この場合、

#import "coloredBackgroundButton.h" 

それらに対してsetBackgroundColorを呼び出すことができます。

0
user3743847

ボタンをクリックしてインスペクターに入ると、表示の背景色を変更するように言ったとき、keremkは正しかった。これにより、小さな角が選択した色に変わります。

0
Domness

colored UIButton

画像を使用したくない場合で、Rounded Rectスタイルとまったく同じように見せたい場合は、これを試してください。同一のフレームと自動サイズ変更マスクを使用してUIViewをUIButton上に配置し、アルファを0.3に設定し、背景を色に設定するだけです。次に、下のスニペットを使用して、色付きのオーバーレイビューから丸いエッジを切り取ります。また、UIViewのIBで[User Interaction Enabled]チェックボックスをオフにして、タッチイベントを下のUIButtonにカスケードできるようにします。

副作用の1つは、テキストも色付けされることです。

#import <QuartzCore/QuartzCore.h>

colorizeOverlayView.layer.cornerRadius = 10.0f;
colorizeOverlayView.layer.masksToBounds = YES;
0
Jacob Jennings

@ Denny1989をさらに構築して、viewDidLoadでボタンを設定するときにエラー(無効なコンテキスト0x0)が発生する問題を解決しました。ボタンは、サイズを設定する前にレイアウトする必要があるため、ビューが表示されるまで依存できません。このカテゴリは、UIControlStateNormalの色を追加します。アプリに他のコントロール状態が必要な場合は、同様にカテゴリに追加する必要があります。

//  UIButton+ColoredBackground.h

#import <UIKit/UIKit.h>

@interface UIButton (ColoredBackground)

@property (nonatomic, retain) UIColor *buttonColorNormal;

@property (nonatomic, retain) NSNumber *madeBackgroundImages;

- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state;

- (void)drawRect:(CGRect)rect;

- (void)awakeFromNib;

@end

そして

//  UIButton+ColoredBackground.m

#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>
#import <objc/runtime.h>

#define kCornerRadius 8.0f
#define kStrokeColor [UIColor darkGrayColor]
#define kStrokeWidth 1.0f



@implementation UIButton (ColoredBackground)

static char UIB_ButtonColorNormal_KEY;
static char UIB_MadeBackgroundImages_KEY;

@dynamic buttonColorNormal;

-(void)setButtonColorNormal:(NSObject *)buttonColorNormal
{
    objc_setAssociatedObject(self, &UIB_ButtonColorNormal_KEY, buttonColorNormal, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

-(NSObject*)buttonColorNormal
{
    return (NSObject*)objc_getAssociatedObject(self, &UIB_ButtonColorNormal_KEY);
}

@dynamic madeBackgroundImages;

-(void)setMadeBackgroundImages:(NSObject *)madeBackgroundImages
{
    objc_setAssociatedObject(self, &UIB_MadeBackgroundImages_KEY, madeBackgroundImages, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

-(NSObject*)madeBackgroundImages
{
    return (NSObject*)objc_getAssociatedObject(self, &UIB_MadeBackgroundImages_KEY);
}
- (void)awakeFromNib {
    [self setMadeBackgroundImages:[NSNumber numberWithBool:FALSE]];
    [super awakeFromNib];
}

- (void)drawRect:(CGRect)rect {
    // if background images were not created from color do so here
    // if self.buttonColorNormal is not set behaves like normal button
    if ((self.buttonColorNormal)&&(![[self madeBackgroundImages] boolValue])) {
        [self setBackgroundColor:[self buttonColorNormal] forState:UIControlStateNormal];
        [self setMadeBackgroundImages:[NSNumber numberWithBool:TRUE]];
    }
    [super drawRect:rect];
}

- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state {

    gcSize = CGSizeMake(2*kCornerRadius +1, self.bounds.size.height);
    UIGraphicsBeginImageContext(gcSize);

    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();

    UIColor *gradientStart = [UIColor colorWithRed:0.80 green:0.80 blue:0.80 alpha:0.2];
    UIColor * gradientEnd = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.5];
    NSArray *colors = [NSArray arrayWithObjects:(id)gradientStart.CGColor, (id)gradientEnd.CGColor, nil];
    CGFloat locations[2] = { 0.0f, 1.0f };
    CGGradientRef _gradient = CGGradientCreateWithColors(rgb, (__bridge CFArrayRef)colors, locations);
    CGColorSpaceRelease(rgb);
    CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeOverlay);
    CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), _gradient, CGPointMake(0.0, kStrokeWidth), CGPointMake(0.0, self.bounds.size.height-kStrokeWidth), 0);

    UIBezierPath *outsideEdge = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0.0, 0.0, gcSize.width, gcSize.height) cornerRadius:kCornerRadius];
    [backgroundColor setFill];
    [kStrokeColor setStroke];
    outsideEdge.lineWidth = kStrokeWidth;
    [outsideEdge stroke];
    [outsideEdge fill];
    CFRelease(_gradient);

    // Create the background image
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    // Set image as button's background image (stretchable) for the given state
    [self setBackgroundImage:[image stretchableImageWithLeftCapWidth:kCornerRadius topCapHeight:0.0] forState:state];

    // Ensure rounded button
    self.clipsToBounds = YES;
    self.layer.cornerRadius = kCornerRadius;

    // add colored border
    self.layer.borderColor = kStrokeColor.CGColor;
    self.layer.borderWidth = kStrokeWidth;
}

@end

使用法

- (void)viewDidLoad
{
        [myButton setButtonColorNormal:[UIColor redColor]];
}

必ずボタンタイプをカスタムにするか、drawRectが呼び出されないようにしてください。

0
T.J.