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

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:

A tutaj 25px-50px-75px:

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