앱 위젯(경우에 따라 '위젯'이라고도 함)은 Android 1.5에 도입된 기능이며 Android 3.0 및 3.1에서 크게 개선되었습니다. 위젯은 애플리케이션의 정보를 적시에 또는 가장 적합한 정보를 사용자의 홈 화면에 한눈에 볼 수 있게 표시할 수 있습니다. 표준 Android 시스템 이미지에는 아날로그 시계, 음악 및 기타 애플리케이션용 위젯과 같은 여러 위젯이 포함되어 있습니다.
그림 1. Android 4.0의 앱 위젯 예
이 문서에서는 다른 위젯 및 Android 홈 화면의 다른 요소(예: 런처 아이콘 및 바로가기)와 그래픽이 서로 맞도록 위젯을 디자인하는 방법을 설명합니다. 또한 위젯 아트워크의 몇 가지 표준과 몇 가지 위젯 그래픽 도움말 및 유용한 정보도 설명합니다.
위젯 개발에 관한 자세한 내용은 개발자 가이드의 앱 위젯 섹션을 참조하세요.
표준 위젯 분석
일반적인 Android 앱 위젯에는 세 가지 주요 구성요소, 즉 경계 상자, 프레임 및 위젯의 그래픽 제어와 기타 요소가 있습니다. 앱 위젯에는 Android에 있는 보기 위젯의 하위 집합이 포함될 수 있습니다. 지원되는 제어에는 텍스트 라벨, 버튼 및 이미지가 포함됩니다. 사용 가능한 보기의 전체 목록은 개발자 가이드의 앱 위젯 레이아웃 만들기 섹션을 참조하세요. 제대로 디자인된 위젯은 경계 상자 및 프레임의 가장자리 사이에 여백을 두고 프레임의 안쪽 가장자리와 위젯의 제어 사이에는 패딩을 둡니다.
그림 2. 일반적으로 위젯에는 경계 상자와 프레임 사이에 여백이 있고 프레임과 위젯 제어 사이에 패딩이 있습니다.
참고: Android 4.0 기준으로, 위젯 프레임과 앱 위젯의 경계 상자 사이에는 사용자 홈 화면의 다른 위젯 및 아이콘과 더 잘 정렬되도록 자동으로 지정된 여백이 추가됩니다. 이 권장되는 동작을 활용하려면 애플리케이션의 targetSdkVersion을 14 이상으로 설정하세요.
홈 화면의 다른 위젯과 시각적으로 맞도록 디자인된 위젯은 정렬을 위해 홈 화면의 다른 요소에서 신호를 받으며, 표준 명암 효과도 사용합니다. 이 모든 세부정보는 이 문서에 설명되어 있습니다.
위젯 크기 결정
각 위젯에서는 minWidth 및 minHeight을 정의하여, 기본적으로 사용해야 하는 공간의 최소 크기를 나타냅니다. 사용자가 홈 화면에 위젯을 추가하면 일반적으로 지정한 최소 너비 및 높이보다 많은 공간을 차지합니다. Android 홈 화면에서는 위젯과 아이콘을 배치하는 데 사용할 수 있는 공간 그리드를 제공합니다. 이 그리드는 기기에 따라 다를 수 있습니다. 예를 들어 많은 핸드셋에서 4x4 그리드를 제공하고 태블릿에서는 이보다 큰 8x7 그리드를 제공할 수 있습니다. 위젯을 추가하면 minWidth 및 minHeight 제한조건을 충족시키기 위해 최소 수의 셀을 차지하도록 위젯이 가로 및 세로로 늘어납니다. 아래 위젯 레이아웃 및 배경 그래픽 디자인에서 설명한 대로, 앱 위젯에 9-패치 배경과 유연한 레이아웃을 사용하면 위젯이 기기의 홈 화면 그리드에 맞게 적절하게 조정되고 여전히 사용 가능하며 미적으로도 멋지게 표시됩니다.
셀의 너비와 높이 외에도 위젯에 적용되는 자동 여백의 크기는 기기마다 다를 수 있지만, 아래 표를 사용하여 원하는 수의 그리드 셀에 따라 위젯의 최소 크기를 대략적으로 추정할 수 있습니다.
| 셀 개수 (열 또는 행) |
사용 가능한 크기(dp) ( minWidth 또는 minHeight) |
|---|---|
| 1 | 40dp |
| 2 | 110dp |
| 3 | 180dp |
| 4 | 250dp |
| … | … |
| n | 70 × n − 30 |
minWidth 및 minHeight의 크기는 작게 산정하여, 정상적인 기본 상태에서 너비를 렌더링하도록 최소 크기를 지정하는 것이 좋습니다. minWidth 및 minHeight을 제공하는 방법의 예로 현재 재생되는 노래의 아티스트와 제목(세로로 스택), 재생 버튼 및 다음 버튼을 표시하는 음악 플레이어 위젯이 있다고 가정합니다.
그림 3. 음악 플레이어 위젯의 예.
최소 높이는 아티스트와 제목 및 텍스트 여백을 포함하도록 두 개의 TextViews 높이여야 합니다. 최소 너비는 재생과 다음 버튼에 최소 텍스트 너비(예: 10자의 너비)와 가로 텍스트 여백을 더한 값인 사용 가능한 최소 너비여야 합니다.
그림 4. minWidth/minHeight 계산에 사용하는 크기 및 여백의 예. 예를 들어 144dp를 텍스트 라벨의 최소 너비로 선택합니다.
계산의 예는 다음과 같습니다.
minWidth= 144dp + (2 × 8dp) + (2 × 56dp) = 272dpminHeight= 48dp + (2 × 4dp) = 56dp
위젯 배경 9-패치에 고유한 콘텐츠 패딩이 있으면 minWidth 및 minHeight에 적절하게 추가해야 합니다.
크기 조정 위젯
위젯은 Android 3.1에서 가로 및 세로로 크기를 조절할 수 있습니다. 즉, minWidth 및 minHeight이 실질적으로 위젯의 기본 크기가 됩니다. minResizeWidth 및 minResizeHeight을 사용하여 최소 위젯 크기를 지정할 수 있습니다. 이 값보다 작으면 위젯을 알아볼 수 없거나 사용할 수 없는 크기가 되도록 지정해야 합니다.
이는 일반적으로 ListView 또는 GridView를 기반으로 하는 위젯과 같은 컬렉션 위젯의 기본 기능입니다.
앱 위젯에 여백 추가
앞서 언급했듯이 Android 4.0에서는 targetSdkVersion을 14 이상으로 지정하는 애플리케이션의 홈 화면에서 위젯의 각 가장자리에 작은 표준 여백을 자동으로 추가합니다. 그러면 홈 화면을 시각적으로 균형을 맞출 수 있으므로, Android 4.0에서 앱 위젯의 배경 모양 외부에는 여분의 여백을 추가하지 않는 것이 좋습니다.
플랫폼의 이전 버전에 적용된 맞춤 여백이 있고 Android 4.0 이상을 위한 추가 여백이 없는 단일 레이아웃을 쉽게 작성할 수 있습니다. 레이아웃 XML을 사용하여 이와 같이 레이아웃을 작성하는 방법에 관한 자세한 내용은 개발자 가이드의 앱 위젯에 여백 추가를 참조하세요.
위젯 레이아웃 및 배경 그래픽 디자인
대부분의 위젯에는 단색 배경 직사각형 또는 둥근 직사각형 도형이 있습니다. 9-패치를 사용하여 각 화면 밀도마다 하나씩 이 도형을 정의하는 것이 좋습니다(자세한 내용은 여러 화면 지원 참조). 9-패치는 draw9patch 도구를 사용하거나 간단히 Adobe® Photoshop과 같은 그래픽 편집 프로그램을 사용하여 만들 수 있습니다. 그러면 위젯 배경 도형이 사용 가능한 전체 공간을 차지할 수 있습니다. 9-패치에는 미묘한 그림자 또는 기타 미묘한 효과를 내는 테두리 픽셀을 제외하고, 양쪽 가장자리 사이에 추가로 여백이 생기는 투명한 픽셀이 없어야 합니다.
참고: 활동의 제어와 마찬가지로 상태 목록 드로어블을 사용하여 상호작용 관리에 각각 시각적으로 포커스 지정됨 및 눌림 상태가 있는지 확인해야 합니다.
그림 5. 확장 가능 지역과 콘텐츠 패딩을 나타내는 9-패치 테두리 픽셀.
StackView를 사용하는 등의 일부 앱 위젯의 배경은 투명합니다. 이 경우 StackView의 개별 항목에서는 양쪽 가장자리 사이에서 여백으로 투명한 테두리 픽셀을 거의 또는 전혀 사용하지 않는 9-패치 배경을 사용해야 합니다.
위젯의 콘텐츠에는 RelativeLayout, LinearLayout 또는 FrameLayout과 같은 유연한 레이아웃을 사용해야 합니다. 활동 레이아웃을 다양한 실제 화면 크기에 맞게 조정해야 하듯이, 위젯 레이아웃도 다양한 홈 화면 그리드 셀 크기에 맞게 조정해야 합니다.
다음은 텍스트 정보를 표시하는 음악 위젯과 두 개의 버튼이 사용할 수 있는 레이아웃의 예입니다.
이 예는 OS 버전에 따라 앞서 설명한 여백 추가를 기반으로 합니다. 위젯에 여백을 추가하는 가장 강력하고 탄력적인 방법은 위젯 프레임과 콘텐츠를 패딩된 FrameLayout으로 래핑하는 것입니다.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/widget_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@drawable/my_widget_background">
<TextView
android:id="@+id/song_info"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="@+id/play_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
<Button
android:id="@+id/skip_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
이제 이전 섹션의 음악 위젯 예를 살펴보면 다음과 같이 유연한 레이아웃 속성을 사용할 수 있습니다.
그림 6. 유연한 레이아웃 및 속성 발췌 내용.
사용자가 홈 화면에 위젯을 추가하면 각 그리드 셀의 크기가 80dp × 100dp이고 모든 크기에 8dp 여백이 자동으로 적용되는 예제 Android 4.0 기기에서 위젯은 다음과 같이 확장됩니다.
그림 7. 시스템에서 자동으로 추가한 8dp의 여백이 있는 예제 80dp x 100dp 그리드의 음악 위젯.
App Widget Templates Pack 사용
새 위젯의 디자인을 시작하거나 기존 위젯을 업데이트할 때 다음과 같은 위젯 디자인 템플릿을 먼저 살펴보는 것이 좋습니다. 다운로드 가능한 패키지에는 여러 화면 밀도, OS 버전 위젯 스타일 및 위젯 색상에 맞는 소스 Adobe® Photoshop 파일, XML 및 9-패치 배경 그래픽이 포함되어 있습니다. 템플릿 패키지에는 전체 위젯 또는 위젯의 일부(예: 버튼)를 상호작용 가능하게 만드는 데 유용한 그래픽도 포함되어 있습니다.
그림 8. App Widget Templates Pack에서 발췌한 내용(중간 밀도, 어두움, Android 4.0/이전 스타일, 기본/포커스/눌림 상태).
아래 링크를 사용하여 최신 App Widget Templates Pack 보관 파일을 다운로드할 수 있습니다.