탭 아이콘은 다중 탭 인터페이스에 있는 개별 탭을 표시하는 데 사용되는 그래픽 요소입니다. 각 탭 아이콘은 선택 해제된 상태와 선택된 상태의 두 가지 상태가 있습니다.
밀도별 아이콘 집합 제공에 설명된 대로 저밀도, 중밀도, 고밀도 화면에 별도의 아이콘 집합을 만들어야 합니다. 이렇게 하면 애플리케이션을 설치할 수 있는 다양한 기기에서 아이콘이 올바르게 표시됩니다. 여러 아이콘 세트를 사용하는 방법에 관한 제안사항은 디자이너를 위한 도움말을 참고하세요.
최종 아트는 투명한 PNG 파일로 내보내야 합니다. 배경색을 포함하지 마세요.
Adobe Photoshop에서 아이콘을 만들기 위한 템플릿은 Icon Templates Pack에서 사용할 수 있습니다.
경고: Android 2.0에서는 탭 아이콘의 스타일이 이전 버전과 비교하여 크게 변경되었습니다. 모든
Android 버전을 지원하려면 개발자가 다음을 실행해야 합니다.
1. Android 2.0 이상용 탭 아이콘을 drawable-hdpi-v5, drawable-mdpi-v5 및 drawable-ldpi-v5 디렉터리에 배치합니다.
2. 이전 버전의 탭 아이콘을 drawable-hdpi, drawable-mdpi, drawable-ldpi 디렉터리에 배치합니다.
3. 애플리케이션 매니페스트의 <uses-sdk>에서 android:targetSdkVersion를 5 이상으로 설정합니다.
그러면 새 탭 스타일을 사용하여 탭을 렌더링하도록 시스템에 알립니다.
두 탭 상태의 아이콘 제공
탭 아이콘에는 선택 해제된 상태와 선택된 상태의 두 가지 상태가 있어야 합니다. 여러 상태의 아이콘을 제공하려면 개발자는 아이콘마다 상태 목록 드로어블을 만들어야 합니다. 이는 여러 UI 상태에 사용할 이미지를 나열하는 XML 파일입니다.
예를 들어 'Friends'와 'Coworkers'라는 탭이 있는 탭 위젯의 경우 아래와 유사한 디렉터리 구조를 사용할 수 있습니다.
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. 선택한 탭 아이콘의 빛, 효과 및 그림자
|
색상 팔레트
|
단계별 안내
|
