web-dev-qa-db-ja.com

カラーティントUIButton画像

白または黒のUIImageをUISegmentedControlに配置すると、セグメント化されたコントロールの色合いと一致するように自動的にカラーマスクされます。これはすごくかっこいいと思ったので、他の場所でもできるかどうか疑問に思いました。たとえば、一様な形をしていても色が異なるボタンがたくさんあります。ボタンごとにPNGを作成するのではなく、このカラーマスキングを使用してすべてのボタンに同じ画像を使用することができますが、実際の色を変更するために色合いなどを設定することはできますか。

iosiphoneuibuttonios7uisegmentedcontrol
248
Logan Shire

IOS 7から、レンダリングモードを指定するための新しいメソッドがUIImageにあります。レンダリングモードUIImageRenderingModeAlwaysTemplateを使用すると、ボタンの色合いによってイメージの色を制御することができます。

Objective-C

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [[UIImage imageNamed:@"image_name"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[button setImage:image forState:UIControlStateNormal]; 
button.tintColor = [UIColor redColor];

迅速

let button = UIButton(type: .custom)
let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
button.setImage(image, for: .normal)
button.tintColor = UIColor.red
550
Ric Santos

Ricが彼の post で既に述べたように、あなたはコードでレンダリングモードを設定することができます、あなたは直接イメージカタログでこれを行うこともできます。 Render AsをTemplate Imageに設定するだけです。

enter image description here

警告iOS 7とこのアプローチで問題がありました。したがって、iOS 7を使用している場合は、 here に記載されているように、コードでも確実に実行することをお勧めします。

209
hashier

カスタムボタンはそれぞれの画像の色で表示されます。ストーリーボードでボタンの種類を「システム」（またはコードでUIButtonTypeSystem）に設定すると、ボタンの画像はデフォルトの色合いでレンダリングされます。

Button Type System Renders Icons tinted

（iOS9、Xcode 7.3でテスト済み）

72
auco

UIImageRenderingModeAlwaysTemplateをUIImageに反映させるには、画像レンダリングモードをtintColorに設定する必要があります。これがSwiftの解決策です。

let image = UIImage(named: "image-name")
let button = UIButton()
button.setImage(image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), forState: .Normal)
button.tintColor = UIColor.whiteColor()
35
Nick Wargnier

背景画像付きのカスタムボタンがある場合は、ボタンの色合いを設定し、次のように画像を上書きできます。

アセットで、色合いを設定したいボタンの背景を選択します。

画像の属性インスペクタで、 "Template Image"に関する値renderを設定します。

enter image description here

これでsetbutton.tintColor = UIColor.red you youボタンが赤く表示されます。

24
Ilker Baltaci

Swiftでは、次のようにすることができます。

var exampleImage = UIImage(named: "ExampleImage.png")?.imageWithRenderingMode(.AlwaysTemplate)

その後、あなたのviewDidLoadに

exampleButtonOutlet.setImage(exampleImage, forState: UIControlState.Normal)

そして色を変更する

exampleButtonOutlet.tintColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1) //your color

EDIT Xcode 8これで、.xcassets内の画像のレンダリングモードをTemplate Imageにすることもできます。その場合、特に宣言する必要はありません。もうvar exampleImageに

17
henrik-dmg

あなたが望むものが正確にはわからないが、このカテゴリメソッドは指定された色でUIImageをマスクするので、あなたは単一のイメージを持ち、あなたが望むものにその色を変えることができる。

ImageUtils.h

- (UIImage *) maskWithColor:(UIColor *)color;

ImageUtils.m

-(UIImage *) maskWithColor:(UIColor *)color 
{
    CGImageRef maskImage = self.CGImage;
    CGFloat width = self.size.width;
    CGFloat height = self.size.height;
    CGRect bounds = CGRectMake(0,0,width,height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
    CGContextClipToMask(bitmapContext, bounds, maskImage);
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor);    
    CGContextFillRect(bitmapContext, bounds);

    CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
    UIImage *coloredImage = [UIImage imageWithCGImage:cImage];

    CGContextRelease(bitmapContext);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(cImage);

    return coloredImage;    
}

ImageUtilsカテゴリをインポートして、次のようにします。

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

UIImage *redIcon = [icon maskWithColor:UIColor.redColor];
UIImage *blueIcon = [icon maskWithColor:UIColor.blueColor];
14
Kirby Todd

CustomTypeを指定したSwift 4：

let button = UIButton(frame: aRectHere)
    let buttonImage = UIImage(named: "imageName")
    button.setImage(buttonImage?.withRenderingMode(.alwaysTemplate), for: .normal)
    button.tintColor = .white
7
aBikis

Swift 3：

あなたが既にxCodeインターフェースビルダーを通してあなたのイメージを設定しているならば、この解決策は快適かもしれません。基本的に、画像を色付けするための拡張子が1つあります。

extension UIImage {
    public func image(withTintColor color: UIColor) -> UIImage{
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        let context: CGContext = UIGraphicsGetCurrentContext()!
        context.translateBy(x: 0, y: self.size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(CGBlendMode.normal)
        let rect: CGRect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
        context.clip(to: rect, mask: self.cgImage!)
        color.setFill()
        context.fill(rect)
        let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
    }
}

次に、特定の状態に合わせて画像を色付けするために、このUIButton拡張子を準備できます。

extension UIButton {
    func imageWith(color:UIColor, for: UIControlState) {
        if let imageForState = self.image(for: state) {
            self.image(for: .normal)?.withRenderingMode(.alwaysTemplate)
            let colorizedImage = imageForState.image(withTintColor: color)
            self.setImage(colorizedImage, for: state)
        }
    }
}

使用法：

myButton.imageWith(.red, for: .normal)

P.S （テーブルセルでもうまく機能します。setNeedDisplay()メソッドを呼び出す必要はありません。色の変更は、UIImageの拡張により即座に行われます。

4
Alessandro Ornano

Xamarin.iOS（C＃）の場合：

        UIButton messagesButton = new UIButton(UIButtonType.Custom);
        UIImage icon = UIImage.FromBundle("Images/icon.png");
        messagesButton.SetImage(icon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
        messagesButton.TintColor = UIColor.White;
        messagesButton.Frame = new RectangleF(0, 0, 25, 25);
4
Maciek z Wrocławia

あなたが手動であなたのイメージをマスクしたいならば、これは網膜スクリーンで動作する更新されたコードです

- (UIImage *)maskWithColor:(UIColor *)color
{
    CGImageRef maskImage = self.CGImage;
    CGFloat width = self.size.width * self.scale;
    CGFloat height = self.size.height * self.scale;
    CGRect bounds = CGRectMake(0,0,width,height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast);
    CGContextClipToMask(bitmapContext, bounds, maskImage);
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
    CGContextFillRect(bitmapContext, bounds);

    CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
    UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:self.scale orientation:self.imageOrientation];

    CGContextRelease(bitmapContext);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(cImage);

    return coloredImage;
}
3
Josh Bernfeld

Swift 3.0

    let image = UIImage(named:"NoConnection")!

 warningButton = UIButton(type: .system)        
    warningButton.setImage(image, for: .normal)
    warningButton.tintColor = UIColor.lightText
    warningButton.frame = CGRect(Origin: CGPoint(x:-100,y:0), size: CGSize(width: 59, height: 56))

    self.addSubview(warningButton)
2
Jad

試してみてください

フレーム設定後

NSArray *arr10 =[NSArray arrayWithObjects:btn1,btn2,nil];
for(UIButton *btn10 in arr10)
{
CAGradientLayer *btnGradient2 = [CAGradientLayer layer];
btnGradient2.frame = btn10.bounds;

btnGradient2.colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithRed:151.0/255.0f green:206.0/255.5 blue:99.0/255.0 alpha:1] CGColor],
                       (id)[[UIColor colorWithRed:126.0/255.0f green:192.0/255.5 blue:65.0/255.0 alpha:1]CGColor],
                       nil];
[btn10.layer insertSublayer:btnGradient2 atIndex:0];

}
2
guptha

ボタン画像または画像ビューの色合いの色を変更する

btn.imageView?.image = btn.imageView?.image?.withRenderingMode(.alwaysTemplate)

btn.imageView?.tintColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
1
Urvish Modi

クリック後に色合いがクリアされたので、上記のどれも私のために働きませんでした。私は使わなければならなかった

button.setImageTintColor(Palette.darkGray(), for: UIControlState())
0
Szymon Klimaszewski