UIBarButtonItem画像の大きさはどれくらいですか?


130

ナビゲーションボタンに右ボタンとして配置する予定の、独自のカスタムの[日付で並べ替え]ボタンと[番号で並べ替え]ボタンを作成しようとしています。

スペースを適切に埋めるには、画像の大きさをどの程度にする必要がありますか。UIBarItemドキュメントページには、画像のサイズに関するリストはありません。

回答:


236

iOS 11の時点で、ヒューマンインターフェイスガイドラインでは、ツールバーとナビゲーションバーのグリフは約25×25ポイント、最大で約28ポイントであることが推奨されています。(iOSアプリで作業している場合は、HIGがブックマークに含まれているはずです!)

これは、iPad 2 / Miniなどの古いデバイスでは25ピクセル四方、iPhone 8やiPadなどの最新のデバイスでは50ピクセル四方、Retina HDデバイス(iPhone 6/7/8 Plus、またはiPhone X)では75ピクセル四方の画像に変換されます。アセットカタログは、さまざまなアセットサイズを整理しておくのに非常に役立ちます(Xcodeは、最近ではベクトルソースからアセットを生成することもできます)。


1
ありがとう、正確に私が知る必要があったことと、優れたドキュメントへのポインタを組み合わせました。ブックマークしました。
イプシロンプライム

1
Mobile HIGが「約20x20」よりも役立つ情報を述べてくれれば幸いです。正確に20x20pxの画像を使用すると、実際には1:1にマップされず、ボタンは正方形になりません。
Clafou

1
Clafou、あなたは(この質問のように)ボタンのコンテンツの画像について話しているのですか、それとも(外観カスタマイズAPIを使用して)ボタンの背景として使用するのですか?これについて質問を投稿しましたか?
Sixten Otto 2012

あなたは、Appleがここに持っている画像を見ることにより、様々なサイズのAppleの用途のいくつかを見ることができます:developer.apple.com/library/ios/#documentation/uikit/reference/...
JasonZ

1
iOS 7については、@ hashierの回答を参照してください。
ルドルフアダムコビッチ2014

46

ヒューマンインタフェースガイドライン iOS7以来、あなたにこれを通知します:

アイコンの表示スタイルに関係なく、次のサイズのツールバーまたはナビゲーションバーアイコンを作成します。

約44 x 44ピクセル

約22 x 22ピクセル(標準解像度)

ここで偉大な行列すべてのすべてのプラットフォームのためのリソースのために必要なサイズは、


19

はい、Appleは22px、44px、66pxのサイズの画像を使用することを推奨していUIBarButtonItemsますが、ブックマークアイコンなどのプリインストールされたアイコンを使用する場合、1x、2x、3xはそれぞれ25px、50px、75pxのサイズになります。

ここに2つのアイコンがありUIToolbarます。右側はAppleのシステムブックマークアイコンで、左側はカスタムアイコンです。

ここに私のサイズが22px-44px-66pxのカスタムアイコン:

ここに画像の説明を入力してください

そしてここで25px-50px-75px:

ここに画像の説明を入力してください

したがって、1つのツールバーでカスタムアイコンとシステムアイコンを使用する場合は、25px-50px-75pxのスケーリングを使用することをお勧めします。そうしないと、カスタムアイコンが小さくなります。実際、私は常に25px-50px-75pxのスケーリングを使用しています。私にとっては、ツールバーでより良く見えます。


1
有難うございます!ブックマークのようなアイコンのいくつかは、22-44-66pxのサイズより少し大きいと確信していました
tech4242

1
私は25px-50px-75pxを試しましたが、それは本当に見栄えが良いです。小さくも大きくもない。
MBH

-4

簡単:画像をAssets.xcassetsに含めます。

どうやって?

  • Assets.xcassetsのクリック
  • Clic +アイコンをクリックし、[新しい画像セット]をクリックします
  • 画像を3倍スロットにドラッグアンドドロップ
  • 画像セットの名前を変更する
  • BarButtonでは、「Image」フィールドでこの名前を使用できます

3
これはサイズに関する質問にどのように答えますか?
Andrea Lazzarotto 2017年

良い点@AndreaLazzarottoが、この答えは、重要な情報は他の回答のうち、左含み
ポール
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.