탭 아이콘은 다중 탭 인터페이스에 있는 개별 탭을 표시하는 데 사용되는 그래픽 요소입니다. 각 탭 아이콘은 선택 해제된 상태와 선택된 상태의 두 가지 상태가 있습니다.
밀도별 아이콘 세트의 경우 낮은 해상도, 낮은 색상, 낮은 색상 등 중밀도 및 고밀도 화면에서 사용할 수 있습니다. 이렇게 하면 모든 레이어에서 모든 종류의 장치에서 적절히 올바르게 작동하도록 할 수 있습니다. 디자이너를 위한 팁 참조 을 확인하세요.
최종 아트는 투명한 PNG 파일로 내보내야 합니다. 포함 안함 배경 색상.
Adobe Photoshop에서 아이콘을 만들기 위한 템플릿은 Icon 템플릿 팩
경고:
탭 아이콘의 스타일이
Android 2.0(이전 버전과 비교) 받는사람
지원하는 경우 개발자는 다음을 따라야 합니다.
<ph type="x-smartling-placeholder">
</ph>
1. Android 2.0 이상에 대한 탭 아이콘을
drawable-hdpi-v5, drawable-mdpi-v5, drawable-ldpi-v5 디렉터리
2. 이전 버전의 탭 아이콘을
drawable-hdpi, drawable-mdpi, drawable-ldpi 디렉터리
3. 다음에서 android:targetSdkVersion를 5 이상으로 설정합니다.
<uses-sdk>
애플리케이션 매니페스트에 포함되었는지 확인합니다.
그러면 새 탭 스타일을 사용하여 탭을 렌더링하도록 시스템에 알립니다.
두 탭 상태의 아이콘 제공
탭 아이콘에는 선택 해제된 상태와 선택된 상태의 두 가지 상태가 있어야 합니다. 아이콘 제공 여러 개의 상태가 있는 경우 개발자는 주 목록 드로어블: 각 아이콘의 목록 드로어블은 어떤 이미지를 나열하는 XML 파일입니다. 여러 UI 상태에 사용할 수 있습니다.
예를 들어 'Friends'라는 탭이 있는 탭 위젯의 경우 '동료', 아래와 유사한 디렉터리 구조를 사용할 수 있습니다.
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...위에 나열된 XML 파일의 콘텐츠는
선택된 아이콘과 선택 해제된 아이콘 드로어블을 확인할 수 있습니다. 예를 들어 다음은
ic_tab_friends.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- selected state --> <item android:drawable="@drawable/ic_tab_friends_selected" android:state_selected="true" android:state_pressed="false" /> <!-- unselected state (default) --> <item android:drawable="@drawable/ic_tab_friends_unselected" /> </selector>
Android 2.0~Android 2.3
다음 가이드라인에서는 Android용 탭 아이콘을 디자인하는 방법을 설명합니다. 버전 2.0~Android 2.3 (API 수준 5~10)
크기 및 위치 지정
탭 아이콘은 단순한 모양과 양식을 사용해야 하며 최종 애셋 내에서 크기가 조정되고 배치되는 것을 볼 수 있습니다.
그림 1은 저작물. 아이콘의 크기를 실제 경계보다 작게 하고 저작물을 참고하세요.
아이콘의 권장 크기를 나타내기 위해 그림 1에는 다음과 같이 서로 다른 세 개의 가이드 직사각형이 포함되어 있습니다.
- 빨간색 상자는 전체 애셋의 경계 상자입니다.
- 파란색 상자는 실제 아이콘의 권장 경계 상자입니다. 아이콘 상자의 크기가 전체 애셋 상자보다 작아서 특수 아이콘을 사용합니다.
- 주황색 상자는 이미지 캡션 생성 시 실제 아이콘에 권장되는 경계 상자입니다. 콘텐츠가 정사각형입니다. 정사각형 아이콘 상자는 다른 아이콘 상자보다 작습니다. 아이콘을 사용하여 두 유형에 걸쳐 일관된 시각적 가중치를 설정합니다.
|
|
|
|
|
|
|
그림 1. 탭 아이콘의 크기 및 위치는 아이콘 애셋 |
스타일, 색상 및 효과
탭 아이콘은 평평하고 매트하며 사진이 정면으로 표시됩니다.
탭 아이콘에는 선택된 상태와 선택 해제된 상태의 두 가지 상태가 있어야 합니다.
|
그림 2. 선택 해제된 탭 아이콘의 스타일과 효과. 참고: 모든 픽셀 크기는 중밀도용이며 다른 밀도에 맞게 조정되어야 합니다.
|
|
그림 3. 선택된 탭 아이콘의 스타일과 효과. 참고: 모든 픽셀 크기는 중밀도용이며 다른 밀도에 맞게 조정되어야 합니다.
|
권장사항과 금지사항
다음은 권장사항 및 금지사항입니다 탭 아이콘을 만들 때 고려해야 할 실행할 수 있습니다
아이콘 예
아래 표시된 것은 표준 고밀도 탭 아이콘입니다. Android 플랫폼입니다.
경고: 이러한 리소스는 플랫폼 버전 간에 변경될 수 있으므로 참조해서는 안 됩니다. 원하는 경우 아이콘이나 기타 내부 드로어블 리소스를 사용하는 경우 애플리케이션 리소스에 이러한 아이콘이나 드로어블의 로컬 복사본을 만듭니다. 그런 다음 애플리케이션 코드에서 로컬 사본을 참조합니다. 이렇게 하면 아이콘의 모양을 계속 제어할 수 있습니다. 복사합니다. 아래 그리드는 전체가 아닙니다.
Android 1.6 이하
다음 가이드라인에서는 Android용 탭 아이콘을 디자인하는 방법을 설명합니다. 1.6 (API 수준 4) 이하
구조
- 선택 해제된 탭 아이콘의 채우기 그라데이션 및 효과가 메뉴 아이콘, 바깥 빛이 나지 않는걸요.
- 선택한 탭 아이콘이 선택되지 않은 탭 아이콘과 비슷해 보이지만 더 희미합니다. 안쪽 그림자로 바꾸어야 하고 앞부분 그라데이션은 대화상자 아이콘을 사용합니다.
- 탭 아이콘에는 가장자리에만 겹쳐야 하는 1픽셀의 SafeFrame이 있습니다. 안티앨리어싱을 정의합니다.
- 이 페이지에 지정된 모든 크기는 32x32픽셀 아트보드 크기를 기준으로 합니다. Photoshop 템플릿 내부의 경계 상자 주위에 1픽셀의 패딩을 유지합니다.
|
그림 3. 선택 해제된 탭의 Safeframe 및 채우기 경사 있습니다. 아이콘 크기는 32x32입니다. |
|
그림 4. 탭 아이콘의 Safeframe 및 채우기 경사 선택 상태가 됩니다. 아이콘 크기는 32x32입니다. |
선택 해제된 탭 아이콘
빛, 효과 및 그림자
선택 해제된 탭 아이콘은 선택된 탭 아이콘과 비슷해 보이지만 대화상자 아이콘과 동일한 전면 그라데이션을 적용했습니다.
|
그림 5. 선택 해제된 항목의 빛, 효과, 그림자 탭 아이콘을 탭합니다.
|
단계별 안내
|
선택된 탭 아이콘
선택한 탭 아이콘에 메뉴와 동일한 채우기 그라데이션 및 효과가 있습니다. 바깥 빛은 반짝이지 않습니다.
|
그림 6. 선택한 탭의 빛, 효과 및 그림자 있습니다.
|
색상 팔레트
|
단계별 안내
|
