web-dev-qa-db-ja.com

色付きの画像を持つUIBarButtonItemを作成できますか？

UIBarButtonItemに表示する画像がありますが、なんらかの理由で画像の輪郭のみが表示され、残りはすべて白です。実際に画像を表示するにはどうすればよいですか？

ありがとう！

iphoneobjective-cuibarbuttonitem
34
DevDevDev

UPDATE：iOS 7以降で利用できる、より簡単なソリューションについては MANIAK_dobriiの回答 を参照してください。

以下は、UIBarButtonItemの画像の使用方法です。

UIImage *image = [UIImage imageNamed:@"buttonImage.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );    
[button setImage:image forState:UIControlStateNormal];
[button addTarget:myTarget action:@selector(myAction) forControlEvents:UIControlEventTouchUpInside];    
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
…
62
amrox

他のiOS7 +ソリューションがあります：

NSString *iconFilename = // ...
UIImage *image = 
    [[UIImage imageNamed:iconFilename] 
        imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *barButtonItem = 
    [[UIBarButtonItem alloc] initWithImage:image
                                     style:UIBarButtonItemStylePlain 
                                    target:self 
                                    action:@selector(onBarButtonItemTapped:)];

UIImage.hから抽出：

...ナビゲーションバー、タブバー、ツールバー、およびセグメント化されたコントロールは、自動的に前景画像をテンプレートとして扱います... UIImageRenderingModeAlwaysTemplateを使用して画像を常にテンプレートとしてレンダリングするか、UIImageRenderingModeAlwaysOriginalを使用して画像を常にとしてレンダリングできますオリジナル。

58
MANIAK_dobrii

コーディングをまったく含まない別の方法があります。

まず、Assets.xcassetsドキュメントのバーに配置する画像を配置します。

アセットブラウザで画像を選択します。

Select the image

右側の垂直ツールバーでその画像の属性インスペクタを開きます。

Attributes inspector

「Render As」で「Original Image」を選択します。

Original Image

ストーリーボードではボタンは引き続きティントカラーでペイントされますが、シミュレータで実行すると、元の画像が表示されます。

Simulator

画像のデフォルトのレンダリングモードは、UIコントロールによって異なります。ただし、属性インスペクターでこのパラメーターを設定すると、画像が常に特定のレンダリングモードで表示されるように強制できます。

同じ画像を異なるコントローラーの異なるレンダリングモードで表現する必要がある場合は、MANIAK_dobriiからの応答がより適切です。

40
Felipe Ferri

In Swift 3：

let iconname = // ...
let image = UIImage(named: iconname)?.withRenderingMode(.alwaysOriginal)
let barButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(self. onBarButtonItemTapped))
self.navigationItem.leftBarButtonItem = barButtonItem
11
Kaptain

いいえ。 Human Interface Guidelines で読むことができるように

アイコンの外観を決定したら、次のガイドラインに従ってアイコンを作成します。

PNG形式を使用します。適切なアルファを持つ純白を使用します。ドロップシャドウは含めないでください。アンチエイリアスを使用します。ベベルを追加する場合は、90度にしてください（これを行うには、アイコンの上部に光源が配置されていると想像してください）。ツールバーとナビゲーションバーのアイコンの場合は、約20 x 20ピクセルのアイコンを作成します。タブバーアイコンの場合は、約30 x 30ピクセルのアイコンを作成します。

注：ツールバー、ナビゲーションバー、およびタブバーに提供するアイコンは、アプリケーションに表示されるアイコンを作成するためのマスクとして使用されます。フルカラーのアイコンを作成する必要はありません。

7
bpapa