앱 위젯 (경우에 따라 '위젯'이라고도 함)은 Android 1.5에서 도입되어 Android 3.0 및 3.1에서 크게 개선된 기능입니다. 위젯은 애플리케이션의 정보를 시의적절하게 표시하거나 관련성 있는 정보를 한눈에 확인할 수 있도록 사용자의 홈 화면에 표시할 수 있습니다. 표준 Android 시스템 이미지에는 아날로그 시계, 음악, 기타 애플리케이션용 위젯을 비롯한 여러 위젯이 포함되어 있습니다.
이 문서에서는 다른 위젯 및 Android 홈 화면의 다른 요소(예: 런처 아이콘 및 바로가기)와 그래픽에 맞도록 위젯을 디자인하는 방법을 설명합니다. 또한 위젯 아트워크의 일부 표준과 위젯 그래픽 도움말 및 유용한 정보도 설명합니다.
위젯 개발에 관한 자세한 내용은 개발자 가이드의 앱 위젯 섹션을 참고하세요.
표준 위젯 분석
일반적인 Android 앱 위젯에는 경계 상자, 프레임, 위젯의 그래픽 컨트롤 및 기타 요소, 이렇게 세 가지 기본 구성요소가 있습니다. 앱 위젯에는 Android에 있는 뷰 위젯의 하위 집합이 포함될 수 있습니다. 지원되는 컨트롤에는 텍스트 라벨, 버튼, 이미지가 포함됩니다. 사용 가능한 뷰의 전체 목록은 개발자 가이드의 앱 위젯 레이아웃 만들기 섹션을 참고하세요. 잘 디자인된 위젯은 경계 상자 가장자리와 프레임 사이에 여백을 두고 프레임 안쪽 가장자리와 위젯 컨트롤 사이에 패딩을 둡니다.
참고: Android 4.0부터는 위젯 프레임과 앱 위젯의 경계 상자 사이에 사용자 홈 화면의 다른 위젯 및 아이콘과 더 잘 정렬되도록 자동으로 여백이 앱 위젯에 부여됩니다. 이 권장 동작을 활용하려면 애플리케이션의 targetSdkVersion을 14 이상으로 설정하세요.
홈 화면의 다른 위젯과 시각적으로 맞도록 디자인된 위젯은 정렬을 위해 홈 화면의 다른 요소에서 신호를 얻습니다. 또한 표준 음영 효과도 사용합니다. 이러한 모든 세부정보는 이 페이지에 설명되어 있습니다.
위젯 크기 결정
각 위젯은 기본적으로 사용해야 하는 최소 공간을 나타내는 minWidth
및 minHeight
를 정의해야 합니다. 사용자가 홈 화면에 위젯을 추가하면 일반적으로 개발자가 지정한 최소 너비 및 높이보다 더 많은 공간을 차지합니다. Android 홈 화면은 사용자에게 위젯과 아이콘을 배치할 수 있는 사용 가능한 공간 그리드를 제공합니다. 이 그리드는 기기에 따라 다를 수 있습니다. 예를 들어 많은 핸드셋에서 4x4 그리드를 제공하고 태블릿은 더 큰 8x7 그리드를 제공할 수 있습니다. 위젯이 추가되면 minWidth
및 minHeight
제약 조건을 충족하는 데 필요한 가로 및 세로 셀을 차지하도록 위젯이 늘어납니다. 아래 위젯 레이아웃 및 배경 그래픽 디자인에서 설명했듯이, 앱 위젯에 나인 패치 배경과 유연한 레이아웃을 사용하면 위젯이 기기의 홈 화면 그리드에 맞게 적절하게 조정되고 사용 가능하고 보기 좋게 유지됩니다.
셀의 너비와 높이, 위젯에 적용되는 자동 여백의 양은 기기마다 다를 수 있지만, 아래 표를 사용하여 원하는 그리드 셀 수를 고려하여 위젯의 최소 크기를 대략적으로 추정할 수 있습니다.
셀 개수 (열 또는 행) |
사용 가능한 크기 (dp) ( minWidth 또는 minHeight ) |
---|---|
1 | 40dp |
2 | 110dp |
3 | 180dp |
4 | 250dp |
… | … |
n | 70 × n − 30 |
좋은 기본 상태에서 위젯을 렌더링하는 최소 크기를 지정하여 minWidth
및 minHeight
은 신중하게 사용하는 것이 좋습니다. minWidth
및 minHeight
를 제공하는 방법의 예로, 현재 재생 중인 노래의 아티스트와 제목 (세로로 쌓임), 재생 버튼, 다음 버튼을 표시하는 음악 플레이어 위젯이 있다고 가정해 보겠습니다.
최소 높이는 아티스트와 제목의 TextView 두 개 높이와 텍스트 여백 일부여야 합니다. 최소 너비는 재생 및 다음 버튼의 사용 가능한 최소 너비와 최소 텍스트 너비 (예: 10자의 너비), 가로 텍스트 여백을 더한 값입니다.
계산의 예는 다음과 같습니다.
minWidth
= 144dp + (2 × 8dp) + (2 × 56dp) = 272dpminHeight
= 48dp + (2 × 4dp) = 56dp
위젯 배경 나인 패치에 고유한 콘텐츠 패딩이 있는 경우 이에 따라 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과 같은 그래픽 편집 프로그램을 사용하여 만들 수 있습니다. 이렇게 하면 위젯 배경 도형이 사용 가능한 전체 공간을 차지할 수 있습니다. 나인 패치는 전면에 여백을 두고 투명한 픽셀이 없어야 하며 미묘한 그림자 또는 기타 미묘한 효과를 위한 테두리 픽셀을 몇 개 남겨두어야 합니다.
참고: 활동의 컨트롤과 마찬가지로 상태 목록 드로어블을 사용하여 대화형 컨트롤에 시각적으로 포커스가 맞춰진 상태와 눌린 상태가 명확하게 구분되도록 해야 합니다.
StackView
를 사용하는 것과 같은 일부 앱 위젯은 배경이 투명합니다. 이 경우 StackView의 각 개별 항목은 여백을 위한 테두리 투명 픽셀이 거의 또는 전혀 없는 더 넓은 가장자리를 사용하는 나인 패치 배경을 사용해야 합니다.
위젯의 콘텐츠에는 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>
이제 이전 섹션의 음악 위젯 예를 살펴보면 다음과 같이 유연한 레이아웃 속성을 사용할 수 있습니다.
사용자가 홈 화면에 위젯을 추가하면 각 그리드 셀의 크기가 80dp × 100dp이고 모든 크기에 8dp의 여백이 자동으로 적용되는 Android 4.0 기기의 예에서는 위젯이 다음과 같이 늘어납니다.
App Widget Templates Pack 사용
새 위젯 디자인을 시작하거나 기존 위젯을 업데이트할 때 먼저 아래의 위젯 디자인 템플릿을 살펴보는 것이 좋습니다. 아래의 다운로드 가능한 패키지에는 나인 패치 배경 그래픽, XML, 여러 화면 밀도, OS 버전 위젯 스타일 및 위젯 색상을 위한 소스 Adobe® Photoshop 파일이 포함되어 있습니다. 템플릿 패키지에는 전체 위젯 또는 위젯의 일부 (예: 버튼)를 대화형으로 만드는 데 유용한 그래픽도 포함되어 있습니다.
아래 링크를 사용하여 최신 App Widget Templates Pack 보관 파일을 다운로드할 수 있습니다.
Android 4.0용 App Widget Templates Pack 다운로드 »