Wie groß sollte ein UIBarButtonItem-Image sein?

130

Ich möchte meine eigenen benutzerdefinierten Schaltflächen "Nach Datum sortieren" und "Nach Nummer sortieren" erstellen, die ich als rechte Schaltfläche in der Navigationsleiste platzieren möchte.

Wie groß sollte mein Bild sein, um den Platz angemessen auszufüllen ? Auf der UIBarItem- Dokumentationsseite wird nichts über die Größe des Bildes aufgeführt.

ios uikit uibarbuttonitem uibaritem Epsilon Prime
quelle

Antworten:

236

Ab iOS 11 schlagen die Richtlinien für die Benutzeroberfläche vor, dass Glyphen in Symbolleisten und Navigationsleisten etwa 25 × 25 Punkte betragen, maximal jedoch etwa 28 Punkte. (Und das HIG sollte auf jeden Fall in Ihren Lesezeichen sein, wenn Sie an iOS-Apps arbeiten!)

Dies würde zu Bildern mit einem Quadrat von 25 Pixel für ältere Geräte wie iPad 2 / Mini, 50 Pixel im Quadrat für die meisten aktuellen Geräte wie iPhone 8 oder iPad und 75 Pixel im Quadrat für Retina HD-Geräte (iPhone 6/7/8 Plus oder iPhone X) führen. Asset-Kataloge helfen immens dabei, die verschiedenen Asset-Größen organisiert zu halten (und Xcode kann sie heutzutage sogar aus Vektorquellen generieren ).

Sixten Otto
quelle
1
Vielen Dank, genau das, was ich wissen musste, kombiniert mit einem Zeiger auf ein großartiges Dokument. Lesezeichen.
Epsilon Prime
1
Ich wünschte, das Mobile HIG hätte etwas hilfreicheres als "ungefähr 20x20" angegeben. Wenn Sie ein Bild mit genau 20 x 20 Pixel verwenden, wird es nicht 1: 1 zugeordnet, und die Schaltfläche ist nicht quadratisch.
Clafou
1
Clafou, sprechen Sie über ein Bild für den Inhalt der Schaltfläche (wie diese Frage lautet) oder als Hintergrund für die Schaltfläche (mit der API zur Anpassung des Erscheinungsbilds)? Haben Sie eine Frage dazu gestellt?
Sixten Otto
Sie können einige der verschiedenen Größen sehen, die Apple verwendet, indem Sie sich die Bilder
ansehen,
1
Informationen zu iOS 7 finden Sie in der Antwort von @ hashier.
Rudolf Adamkovič
46

Die Richtlinien für die Benutzeroberfläche sagen Ihnen dies seit iOS7:

Erstellen Sie unabhängig vom visuellen Stil des Symbols eine Symbolleiste oder ein Navigationsleistensymbol in den folgenden Größen:

Über 44 x 44 Pixel

Über 22 x 22 Pixel (Standardauflösung)

Hier ist eine große Matrix von allen benötigten Größen für Ressourcen für alle Plattformen

hashier
quelle
19

Ja, Apple empfiehlt, Bilder mit einer Größe von 22px, 44px und 66px zu verwenden UIBarButtonItems. Wenn Sie jedoch vorinstallierte Symbole wie das Lesezeichensymbol verwenden, wird die Größe für 1x, 2x und 3x um 25px 50px und 75px berechnet.

Hier sind 2 Symbole in UIToolbar. Rechts ist das System-Lesezeichen-Symbol von Apple und links mein benutzerdefiniertes Symbol.

Hier meine benutzerdefinierte Symbolgröße 22px-44px-66px:

Geben Sie hier die Bildbeschreibung ein

Und hier 25px-50px-75px:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie also benutzerdefinierte Symbole und Systemsymbole in einer Symbolleiste verwenden, würde ich empfehlen, die Skalierung 25px-50px-75px zu verwenden, da sonst Ihre benutzerdefinierten Symbole kleiner werden. Tatsächlich verwende ich immer die Skalierung 25px-50px-75px. Auf Symbolleisten sieht es besser aus als bei mir.

Peter Tretyakov
quelle
1
Danke für das! Ich war mir sicher, dass einige der Symbole wie die Lesezeichen etwas größer sind als die Größe
22-44-66px
1
Ich habe 25px-50px-75px ausprobiert und es sieht wirklich gut aus. nicht klein, nicht groß.
MBH
-4

Einfach: Fügen Sie Ihre Bilder in Assets.xcassets ein.

Wie?

  • Klicken Sie auf Assets.xcassets
  • Klicken Sie auf das Symbol + und klicken Sie dann auf "New Image Set".
  • Ziehen Sie Ihr Bild per Drag & Drop auf den 3x-Steckplatz
  • Benennen Sie den Bildsatz um
  • Im BarButton können Sie diesen Namen im Feld "Bild" verwenden
jobima
quelle
3
Wie beantwortet dies die Frage nach der Größe?
Andrea Lazzarotto
@AndreaLazzarotto guter Punkt, aber diese Antwort enthält wichtige Informationen, die aus den anderen Antworten herausgelassen wurden
Paul