Jak duży powinien być obraz UIBarButtonItem?

130

Chcę utworzyć własne niestandardowe przyciski Sortuj według daty i Sortuj według numeru, które planuję umieścić na pasku nawigacyjnym jako właściwy przycisk.

Jak duży powinien być mój obraz, aby odpowiednio wypełnić przestrzeń - strona dokumentacji UIBarItem nie zawiera nic na temat rozmiaru, jaki powinien mieć obraz.

Epsilon Prime
źródło

Odpowiedzi:

238

Począwszy od iOS 11, Wytyczne dotyczące interfejsu ludzkiego sugerują, że glify mają około 25 × 25 punktów na paskach narzędzi i paskach nawigacji, maksymalnie do około 28 punktów. (A HIG zdecydowanie powinien znajdować się w twoich zakładkach, jeśli pracujesz nad aplikacjami na iOS!)

To przełożyłoby się na obrazy 25 pikseli kwadratowych dla starszych urządzeń, takich jak iPad 2 / Mini, 50 pikseli kwadratowych dla większości obecnych urządzeń, takich jak iPhone 8 lub iPad, oraz 75 pikseli dla urządzeń Retina HD (iPhone 6/7/8 Plus lub iPhone X). Katalogi zasobów ogromnie pomogą w utrzymaniu porządku w różnych rozmiarach zasobów (a Xcode może obecnie nawet generować je ze źródeł wektorowych ).

Sixten Otto
źródło
1
Dzięki, dokładnie to, co musiałem wiedzieć w połączeniu ze wskaźnikiem do świetnego dokumentu. Dodany do zakładek.
Epsilon Prime
1
Żałuję jednak, że Mobile HIG nie stwierdził czegoś bardziej pomocnego niż „około 20x20”. Jeśli użyjesz obrazu o wymiarach dokładnie 20 x 20 pikseli, w rzeczywistości nie zostanie on odwzorowany w skali 1: 1, a przycisk nie będzie kwadratowy.
Clafou
1
Clafou, czy mówisz o obrazie dla zawartości przycisku (jak to jest pytanie), czy też do wykorzystania jako tło przycisku (z API dostosowywania wyglądu)? Czy zadałeś pytanie na ten temat?
Sixten Otto
Możesz zobaczyć niektóre z różnych rozmiarów używanych przez Apple, patrząc na obrazy, które Apple ma tutaj: developer.apple.com/library/ios/#documentation/uikit/reference/ ...
JasonZ
1
W przypadku iOS 7 zobacz odpowiedź @ hashier.
Rudolf Adamkovič
46

Te wytyczne Human Interface mówi ci to od iOS7:

Niezależnie od stylu wizualnego ikony utwórz pasek narzędzi lub ikonę paska nawigacji w następujących rozmiarach:

Około 44 x 44 pikseli

Około 22 x 22 pikseli (standardowa rozdzielczość)

Oto świetna matryca o wszystkich potrzebnych rozmiarach dla zasobów na wszystkich platformach

hashier
źródło
21

Tak, Apple sugeruje użycie obrazów o rozmiarze 22px, 44px i 66px dla UIBarButtonItems, ale jeśli używasz preinstalowanych ikon, takich jak ikona zakładki, rozmiar ma odpowiednio 25 pikseli, 50 pikseli i 75 pikseli dla 1x, 2x i 3x.

Oto 2 ikony w programie UIToolbar. Po prawej stronie znajduje się ikona zakładki systemowej Apple, a po lewej moja niestandardowa ikona.

Tutaj moja niestandardowa ikona o rozmiarze 22px-44px-66px:

wprowadź opis obrazu tutaj

A tutaj 25px-50px-75px:

wprowadź opis obrazu tutaj

Jeśli więc używasz ikon niestandardowych i systemowych na jednym pasku narzędzi, sugerowałbym użycie skalowania 25px-50px-75px, w przeciwnym razie niestandardowe ikony będą mniejsze. Tak naprawdę zawsze używam skalowania 25px-50px-75px, wygląda to lepiej na paskach narzędzi, jak dla mnie.

Peter Tretyakov
źródło
1
Dziękuję za to! Byłem pewien, że niektóre ikony, takie jak zakładki, są nieco większe niż rozmiar
22-44-66px
1
Wypróbowałem 25px-50px-75px i wygląda naprawdę ładnie. nie mały, nie duży.
MBH
-4

Łatwe: dołącz swoje obrazy do Assets.xcassets.

W jaki sposób?

  • Clic on Assets.xcassets
  • Kliknij ikonę Clic +, a następnie kliknij „Nowy zestaw obrazów”
  • Przeciągnij i upuść obraz do gniazda 3x
  • Zmień nazwę zestawu obrazów
  • W BarButton możesz użyć tej nazwy pod polem „Obraz”
jobima
źródło
3
Jak to odpowiada na pytanie o rozmiar?
Andrea Lazzarotto
@AndreaLazzarotto dobra uwaga, ale ta odpowiedź zawiera ważne informacje pominięte w innych odpowiedziach
paul