UIBarButtonItem 이미지는 얼마나 커야합니까?


130

탐색 표시 줄에 오른쪽 버튼으로 배치 할 사용자 정의 정렬 기준 날짜 및 정렬 기준 번호 버튼을 만들고 싶습니다.

공간을 적절하게 채우려면 이미지 크기가 얼마나 커야합니까? UIBarItem 설명서 페이지에는 이미지의 크기에 대한 내용이 나와 있지 않습니다.

답변:


236

iOS 11부터 휴먼 인터페이스 지침 (Human Interface Guidelines) 은 글리프가 툴바 및 탐색 막대에서 약 25x25 포인트, 최대 약 28 포인트로 제안합니다. (그리고 iOS 앱에서 작업하는 경우 HIG가 북마크에 있어야합니다!)

그것은 iPad 2 / Mini와 같은 구형 장치의 경우 25px 정사각형, iPhone 8 또는 iPad와 같은 최신 장치의 경우 50px 정사각형, Retina HD 장치 (iPhone 6/7/8 Plus 또는 iPhone X)의 경우 75px 정사각형으로 변환됩니다. 자산 카탈로그는 다양한 자산 크기를 체계적으로 유지하는 데 크게 도움이됩니다 (Xcode는 요즘 벡터 소스에서이를 생성 할 수도 있습니다 ).


1
고마워, 내가 알아야 할 것은 훌륭한 문서에 대한 포인터와 결합되었습니다. 북마크.
Epsilon Prime

1
그래도 Mobile HIG가 "약 20x20"보다 더 유용한 것을 말했으면합니다. 정확히 20x20px의 이미지를 사용하면 실제로 1 : 1을 매핑하지 않으며 버튼이 정사각형이 아닙니다.
Clafou

1
Clafou, 버튼의 내용에 대한 이미지에 대해 이야기하고 있습니까? 이것에 대해 질문이 있습니까?
Sixten Otto

Apple이 보유한 이미지를 보면 Apple이 사용하는 다양한 크기 중 일부를 볼 수 있습니다. developer.apple.com/library/ios/#documentation/uikit/reference/…
JasonZ

1
iOS 7의 경우 @hashier의 답변을 참조하십시오.
Rudolf Adamkovič

46

휴먼 인터페이스 가이드 라인 iOS7에 있기 때문에 당신이 말한다 :

아이콘의 시각적 스타일에 관계없이 다음 크기의 도구 모음 또는 탐색 표시 줄 아이콘을 작성하십시오.

약 44 x 44 픽셀

약 22 x 22 픽셀 (표준 해상도)

다음은 모든 플랫폼의 리소스에 필요한 모든 크기 의 훌륭한 매트릭스 입니다.


19

예, Apple은에 22px, 44px 및 66px 크기의 이미지를 사용하는 것이 좋지만 UIBarButtonItemsBookmark 아이콘과 같은 사전 설치된 아이콘을 사용하는 경우 각각 1x, 2x 및 3x에 대해 25px 50px 및 75px 크기입니다.

에 2 개의 아이콘이 UIToolbar있습니다. 오른쪽에는 Apple의 시스템 책갈피 아이콘이 있고 왼쪽에는 사용자 정의 아이콘이 있습니다.

여기 내 사용자 정의 아이콘 크기는 22px-44px-66px입니다.

여기에 이미지 설명을 입력하십시오

그리고 여기 25px-50px-75px :

여기에 이미지 설명을 입력하십시오

따라서 하나의 툴바에서 사용자 정의 및 시스템 아이콘을 사용하는 경우 25px-50px-75px 스케일링을 사용하는 것이 좋습니다. 그렇지 않으면 사용자 정의 아이콘이 더 작아집니다. 사실 나는 항상 25px-50px-75px 스케일링을 사용하므로 툴바에서 더 좋아 보입니다.


1
감사합니다! 책갈피 하나와 같은 일부 아이콘은 22-44-66px 크기보다 약간 더 큽니다
tech4242

1
25px-50px-75px를 시도했는데 정말 좋아 보입니다. 크지 않은 작은.
MBH

-4

쉬움 : Assets.xcassets에 이미지를 포함시킵니다.

어떻게?

  • Assets.xcassets에 대한 클릭
  • Clic + 아이콘을 클릭 한 다음 "새 이미지 세트"를 클릭하십시오
  • 이미지를 3 배속 슬롯으로 드래그 앤 드롭
  • 이미지 세트 이름 바꾸기
  • BarButton의 "이미지"필드에서이 이름을 사용할 수 있습니다

3
이것은 크기에 대한 질문에 어떻게 대답합니까?
Andrea Lazzarotto

@AndreaLazzarotto 좋은 지적이지만이 답변에는 다른 답변에서 제외 된 중요한 정보가 포함되어 있습니다.
paul
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.